【echarts】雷达图参数详细介绍

1. 详细示例

在这里插入图片描述

var option = {
  tooltip: {
  	 trigger: 'item'
  },
  radar: {
    startAngle: 90,//第一个指示器轴的角度,默认90
    indicator: [// 指示器
      { name: 'Category A', max: 220 },// name:指示器名称
      { name: 'Category B', max: 200 },// max:指示器的最大值,可选,建议设置
      { name: 'Category C', max: 100 },
      { name: 'Category D', max: 100, color: 'red' }, //标签特定的颜色
      { name: 'Category E', max: 70 }
    ],
    nameGap:12,//指示器名称和指示器轴的距离,默认15
    center: ['50%', '50%'],//雷达图的中心位置
    radius: '60%',// 半径
    splitNumber: 5, // 分隔段数, 默认5
    shape: 'circle', // 雷达图绘制类型: 'polygon'(默认) / 'circle'
    splitArea: {
      //分隔区域
      show: true, // 是否显示分隔区域, 默认true
      areaStyle: {
        // 分隔区域的样式 (淡蓝色)
        color: 'rgba(135, 206, 235, 0.2)'
      }
    },
    splitLine: {
      //分隔线
      show: true, //默认数值轴显示,类目轴不显示
      lineStyle: {
        // 分隔线的样式 (淡蓝色)
        color: 'rgba(255, 0, 255, 0.2)'
      }
    },
    axisLine: {
      // 坐标轴轴线
      show: true, //是否显示坐标轴轴线, 默认true
      // symbol: ['none', 'arrow'], // 轴线两边的箭头, 默认'none'
      lineStyle: {
        // 坐标轴轴线样式
        color: 'rgba(84, 112, 198, 0.6)'
      }
    },
    axisLabel: {// 坐标轴刻度标签
      show: true,// 是否显示刻度标签
      fontSize: 9,//字体大小

    }
  },
  series: [// 数据系列
    {
      type: 'radar',
      data: [// 具体数值
        {
          value: [90, 80, 70, 60, 50],//单个数据项的数值
          name: 'Data 1'//数据项名称,
          symbol:'rect',//单个数据标记的图形,默认circle
        },
          {
          value: [180, 200, 90, 80, 40],
          name: 'Data 2'
        }
        
      ]
    }
  ]
};

2. 基础示例

const option = {
  tooltip:{},
    radar: {
        indicator: [// 雷达图的指示器,每个指示器对应一个维度
        	//name:指示器名称 
            { name: 'Category A',max:220 },//max:指示器的最大值(可选
            { name: 'Category B' ,max:50},
            { name: 'Category C' },
            { name: 'Category D' },
            { name: 'Category E' }
        ],
        center: ['50%', '50%'],
        radius: '60%'
    },
    series: [{
        type: 'radar',
        data: [
            {
                value: [90, 80, 70, 60, 50],
                name: 'Data 1'
            }
        ]
    }]
};

max详解:图上的点是相对于这个最大值显示的,如果一个指示器的最大值比数值要小,就会如下图Category B一样。
在这里插入图片描述

注意: 如果只有一个数据时(一个指示器),在雷达图绘制类型默认为: polygon时无法显示区域,要手动将shape设置为circle
举个栗子:

// 雷达图绘制类型为默认polygon时
option = {
    radar: {
        indicator: [
            { name: 'Category A',max:220 },
        ],
        center: ['50%', '50%'],
        radius: '60%'
    },
    series: [{
        type: 'radar',
        data: [
            {
                value: [90],
                name: 'Data 1'
            }
        ]
    }]
};

在这里插入图片描述

option = {
    radar: {
       shape: 'circle',// 雷达图绘制类型设置为circle
        indicator: [
            { name: 'Category A',max:220 },
        ],
        center: ['50%', '50%'],
        radius: '60%'
    },
    series: [{
        type: 'radar',
        data: [
            {
                value: [90],
                name: 'Data 1'
            }
        ]
    }]
};

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/308453.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Nginx介绍与安装

目录 nginx服务 1、Nginx 介绍 2、为什么选择 nginx 3、IO多路复用 1、I/O multiplexing【多并发】 2、一个请求到来了,nginx使用epoll接收请求的过程是怎样的? 3、异步,非阻塞 4、nginx 的内部技术架构 5、yum安装部署nginx和配置管理 1.获取…

压测必经之路,Jmeter分布式压测教程

01、分布式压测原理 Jemter分布式压测是选择其中一台作为调度机(master),其他机器作为执行机(slave);当然一台机器也可以既做调度机,也做执行机。 调度机执行脚本的时候,master将会…

C++ 多态以及多态的原理

文章目录 多态的概念多态的构成条件虚函数的重写虚函数重写的两个例外 重载、重写(覆盖)、重定义(隐藏)对比C11 final 和 override关键字抽象类接口继承和普通继承多态的原理虚函数表多态的原理 单继承和多继承关系的虚函数表单继承中的虚函数表多继承中的虚函数表 多态的概念 …

C#实现个人账本管理系统

git地址:https://gitee.com/myshort-term/personal-ledger-management-system 1.系统简介 LedgerManagementSystem是一个小型的个人账本管理系统,可对收支项目进行增加、删除、修改、查询以及导入和导出。可对每日的各类收支项目进行汇总并查看和修改收…

vue3 ts defineProps、defineEmits、defineExpose、defineOptions、defineSlots

文章目录 前言一、defineProps二、defineEmits三、defineExpose四、defineOptions( Vue3.3 新特性)五、defineSlots(Vue3.3 新特性) 前言 本章我们来讲解vue3 ts 中 defineProps、defineEmits、defineExpose、defineOptions、defineSlots的使用及作用。 …

x-cmd pkg | you-get - web 媒体内容下载工具

目录 简介首次用户功能特点竞品和相关作品进一步阅读 简介 You-Get 是一个开源的命令行小型下载工具,用于从各种网站下载视频、音频和其他媒体文件。 它可以解析和下载嵌套在网页中的媒体,能从 YouTube、优酷、Niconico 、bilibili 等热门网站下载视频、…

C++ vector模拟实现

C vector模拟实现 一.我们要实现的大致框架1.STL库中是如何实现的呢?1.迭代器2.成员变量3.vector的特性4.vector的成员变量大致情况 2.我们要实现的大致框架3.前言 二.具体实现1.迭代器,begin,end2.无参构造,析构,简单函数3.push_back4.reserve1.reserve的第一大坑点:野指针问…

React Native 桥接原生常量

一、编写并注册原生常量方法 在 SmallDaysAppModule 这个模块中有一个方法 getConstans ,重载这个方法就可将自定义的常量返回,系统会自行调用该方法并返回定义的常量将其直接注入到 JS 层,在 JS 层直接获取即可。 二、JS 层获取原生常量&am…

电脑USB接口不同颜色的含义

当你看到笔记本电脑或台式机的USB端口时,你会发现USB端口的颜色很多;这些颜色可不只是为了好看,实际上不同颜色代表着不同的性能,那么这些带颜色的USB端口都是什么含义呢,下面就具体介绍下不同颜色代表的含义。-----吴…

钉钉逐浪AI Agent

文|郝 鑫 编|刘雨琦 “大公司代表落后生产力,是慢半拍的”,“小创新靠大厂,大创新仍然要靠小厂”,这是以李彦宏和王小川为代表的创业老炮,在2023年总结出来的创新规律,从移动互…

单片机原理及应用:中断嵌套

​中断嵌套是指中断系统正在执行一个中断服务时,有另一个优先级更高的中断提出中断请求,这时会暂时终止当前正在执行的级别较低的中断源的服务程序,去处理级别更高的中断源,待处理完毕,再返回到被中断了的中断服务程序…

阿里云的通义千问VS百度的文心一言~~

最近人工智能热度迅速升温,我体验了一下各大厂商的大模型的能力,发现他们确实很智能! 我想问一下“南方小土豆”这个梗是如何火起来的,结果如下: 文心一言: 回答的比较准确,但有一些过于“官方”…

ChatGPT4+Python近红外光谱数据分析及机器学习与深度学习建模进阶应用

2022年11月30日,可能将成为一个改变人类历史的日子——美国人工智能开发机构OpenAI推出了聊天机器人ChatGPT3.5,将人工智能的发展推向了一个新的高度。2023年4月,更强版本的ChatGPT4.0上线,文本、语音、图像等多模态交互方式使其在…

vue知识-03

购物车案例 要实现的功能&#xff1a; 1、计算商品总价格 2、全选框和取消全选框 3、商品数量的增加和减少 <body> <div id"app"><div class"row"><div class"col-md-6 col-md-offset-3"><h1 class"text-center…

SpringCloudAlibaba微服务架构实战派上下册技术交流!

另外我的新书RocketMQ消息中间件实战派上下册&#xff0c;在京东已经上架啦&#xff0c;目前都是5折&#xff0c;非常的实惠。 https://item.jd.com/14337086.html​编辑https://item.jd.com/14337086.html “RocketMQ消息中间件实战派上下册”是我既“Spring Cloud Alibaba微…

Springboot药物不良反应智能监测系统源码

一、系统简介 ADR指的是药品不良反应&#xff0c;即在合格药品在正常用法用量下&#xff0c;出现与用药目的无关或意外的有害反应。ADR数据辨别引擎、药品ADR信号主动监测引擎、ADR处置行为分析引擎。ADR数据辨别引擎&#xff0c;通过主动监测患者具象临床指标&#xff0c;比如…

Simpy简介:python仿真模拟库-03/5

一、说明 在过去的两篇文章中&#xff0c;我们了解了 simpy 的基础知识、声明变量和处理表达式。值得注意的例子包括评估导数和积分。现在&#xff0c;让我们继续使用函数。 二、SymPy — 函数类 SymPy 包包含 sympy.core.function 模块中的 Function 类。该类作为各种数学函数…

腾讯云优惠券介绍、领取方法及使用教程

腾讯云作为国内领先的云服务提供商&#xff0c;为了吸引更多的用户使用其产品&#xff0c;经常会推出各种优惠券活动。本文将详细介绍腾讯云的优惠券、领取方法和使用教程。 一、腾讯云优惠券介绍 腾讯云优惠券是腾讯云为了吸引用户使用其产品而推出的促销活动。用户可以通过领…

软件测试工程师,从6K到25k的测试之路养成,一路狂飙...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、技术方向 就技…

静态网页设计——滑板官网(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X)

前言 声明&#xff1a;该文章只是做技术分享&#xff0c;若侵权请联系我删除。&#xff01;&#xff01; 感谢大佬的视频&#xff1a;https://www.bilibili.com/video/BV1Cw411u7hj/?vd_source5f425e0074a7f92921f53ab87712357b 源码&#xff1a;https://space.bilibili.com…