echarts自定义雷达图（radar）

先来个效果图

1、首先设置形状

 shape: "circle", // 支持 'polygon' 和 'circle' ,默认polygon

2、设置线条

splitLine: {//分隔线show: true,lineStyle: {color: '#306eff'}},splitArea: {//分割区域show: false,},axisLine: {//雷达线show: true,lineStyle: {color: '#306eff',width: 2,}}

3、设置文本标签，按照此种格式写即可，color不设置时，默认是白色

indicator: [{ name: '销售（sales）', max: 6500},{ name: '管理（Administration）', max: 16000, color: 'red'}, // 标签设置为红色{ name: '信息技术（Information Techology）', max: 30000},{ name: '客服（Customer Support）', max: 38000},{ name: '研发（Development）', max: 52000},{ name: '市场（Marketing）', max: 25000}
]

4、设置数据展示区域

itemStyle: {normal: {areaStyle: {type: 'default', //不设置时，为透明opacity: 0.4,},}
},

5、封装方法

需要传入两个参数，一个是dom元素的Id，还有一个是json数据数组，调用请往下看

/*** 雷达图* @param id  div的id* @param data json数据数组* */
CharacterTrait.prototype.loadRadar = function (id, data) {var indicator = []; // 标签var value = []; // 数值var max = 0; // 最大值$.each(data, function (index, ele) {if (ele.value > max) {max = parseInt(ele.value) + 200;}});$.each(data, function (index, ele) {var indi = {text: ele.type, max: max, color: '#d9fdff'};indicator.push(indi);value.push(ele.value);});var myRadar = echarts.init(document.getElementById(id));//初始化图表var radarOption = {tooltip: {trigger: 'axis',confine: true, //触发时，内容包裹在图形内},color: ["#d9fdff"],radar: [{indicator: indicator,center: ['50%', '50%'],radius: '75%',nameGap: '10',//字与图形距离shape: "circle", // 支持 'polygon' 和 'circle' ,默认polygonsplitLine: {//分隔线show: true,lineStyle: {color: '#306eff'}},splitArea: {//分割区域show: false,},axisLine: {//雷达线show: true,lineStyle: {color: '#306eff',width: 2,}}}],series: [{type: 'radar',tooltip: {trigger: 'item'},itemStyle: {normal: {areaStyle: {type: 'default',opacity: 0.4,},}},data: [{value: value,name: '性格特征统计',}]}]};myRadar.setOption(radarOption);
}

6、调用封装的方法

var data = [{"type": "正常", "value": "1274"},{"type": "忧郁型", "value": "928"},{"type": "反社会型","value": "92"},{"type": "偏执型","value": "121"},{"type": "强迫型","value": "619"},{"type": "表演型","value": "284"},{"type": "冲动型","value": "218"}];that.loadRadar("characterTraitRadar", data);

完美收官，希望能帮助到各位，若有不明白的地方，尽情留言，我将及时回复

echarts自定义雷达图（radar）相关推荐

R语言使用ggradar包可视化基本雷达图（radar chart、蜘蛛图spider plot）、可视化单个数据对象的雷达图、自定义雷达图的线条类型、线条宽度、数据点大小、色彩等
R语言使用ggradar包可视化基本雷达图(radar chart.蜘蛛图spider plot).可视化单个数据对象的雷达图.自定义雷达图的线条类型.线条宽度.数据点大小.色彩等(Customize ...
JS Echarts之雷达图 | 使用Excel画雷达图
文章目录第一部分:JS Echarts之雷达图 1. 什么是 Echarts 2. JS Echarts之雷达图 2.1 使用Echarts画雷达图 2.3 echarts雷达图中常用修改修改in ...
R实战| 雷达图(Radar Chart)
R实战| 雷达图(Radar Chart) 雷达图(radar chart),又称蜘蛛网图(spider plot),是一种表现多维数据的强弱的图表.它将多个维度的数据量映射到坐标轴上,这些坐标轴起始 ...
[数据可视化] 雷达图(Radar)
雷达图介绍雷达图(Radar),也称为蜘蛛网图,其将多个维度的数据映射到坐标轴上,可以展示出各个变量的权重高低情况,非常适合展示性能数据比较,可以很好的刻画出某些指标的横向或纵向的对比关系功能:对 ...
使用echarts实现雷达图
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
【前端echatrs图表框架】使用echarts实现雷达图
一个学生在大学四年中所修的所有课程可以分为素质必修课,核心必修课,一般必修课,通识必修课,通识限选课5种,通过雷达图,导入学生在每一种课程的平均绩点,即可清晰地显示一个同学的综合发展情况了. 代码如下 ...
echarts实现雷达图
这里提供两种效果,都是对官网的demo进行一点的改进,这里放上官网链接,有不清楚的参数可直接查阅->echarts官网.话不多说,直接上代码: //实现一 initChart() {this.c ...
Odoo 8 Graph 视图之雷达图 (Radar\Spider)
据说7.0是有Radar图的,但是8以后被阉割掉了.自己动手 ,丰衣足食. 经过一天的努力,雷达图现已成功加入群共享套餐. 转载于:https://www.cnblogs.com/kfx2007/p/ ...
Android 自定义雷达图（蜘蛛网图）
这次自定义实现雷达图,它可以用在分析某些内容所占的比例,比较直观地突出某些数据,比如可以用在游戏玩家的各项能力的分析上,那么它的各项指标就比较明显地看出来了.效果图如下: 看完这幅图大家就清楚要实现的 ...

echarts自定义雷达图（radar）

echarts自定义雷达图（radar）相关推荐

最新文章

热门文章