雷达图Echarts

下面是一些基础配置项以及常用的一些

可以参考官网进行查看 https://echarts.apache.org/zh/api.html#echarts

var option = {
radar: {
shape: ‘circle‘,//雷达图形状
radius:50,//雷达半径
splitNumber: 3, // 雷达图圈数设置
//雷达图各角的标志名称
indicator: [
{ name: ‘销售‘, max: 6500},
{ name: ‘管理‘, max: 16000},
{ name: ‘信息技术‘, max: 30000},
{ name: ‘客服‘, max: 38000},
{ name: ‘研发‘, max: 52000},
{ name: ‘市场‘, max: 25000}
]，
name: {
show:true,
formatter:function(value){// //雷达图各角的自定义显示数据
let result = ‘‘;
let index = list.indexOf(value);
result = ${value}：${data[index]};
return result;
},
textStyle: { //雷达图各角的样式
color: ‘#595C61‘
}
},
axisLine: {
lineStyle: {
color:‘black‘, // 设置雷达图中间射线的颜色
}
},
splitLine : {
show : true,
lineStyle : {
width : 1,
color : ‘black‘, // 雷达图网格的颜色
}
}，
splitArea : {
show : false,
areaStyle : {
color: ‘transparent‘, // 雷达图背景的颜色
}
},
},
series: [{
name: ‘‘,
type: ‘radar‘,
symbol: ‘circle‘, // 拐点的样式，还可以取值‘rect‘,‘angle‘等
symbolSize: 8, // 拐点的大小，当大小为零时可以表示隐藏
///数据形成的不规则区域的边线样式
itemStyle: {
normal: {
color: ‘rgba(255,255,255,0.6);‘,
lineStyle: {
width: 2,
color: ‘#21CCDF‘,
},
},
},
//数据形成的不规则区域的内部样式
areaStyle: {normal: {}},
data : [{
value:_this.radarData,
label: {//各拐点的数值
normal: {
show: true,
formatter:function(params) {
return params.value;
}
}
}
}]
}]
};

在vue中简单使用

可以直接通过npm进行下载

直接在页面中引用 import * as echarts from ‘echarts‘

下面代码写在挂载之后，可以拿到dom元素进行操作即可

var myChart = echarts.init(document.getElementById(‘setEcharts‘))
// 绘制图表
myChart.setOption({
  radar: [{
    splitNumber: 4,
    tooltip: {
      trigger: ‘axis‘
    },
    name: {
      formatter: function(value) {

let list = value.split("");
            let text = [];
            let result= ‘‘;
            for(let i=3;i<=list.length-2;i++) {
              text.push(list[i]);
            }
            if(list[1]‘a‘) {
              for(let j=1;j<=text.length;j++) {
                result +=text[j-1];
              }
            }
            if(list[1]‘b‘) {
              for(let j=1;j<=text.length;j++) {
                if(!(j%3)&&text[j]!=undefined) {
                  result += text[j-1]+‘\n‘;
                }else {
                  result += text[j-1];
                }
              }
            }
            if(list[1]==‘c‘) {
              for(let j=1;j<=text.length;j++) {
                if(!(j%4)&&text[j]!=undefined) {
                  result += text[j-1]+‘\n‘;
                }else {
                  result += text[j-1];
                }
              }
            }
            return list[0]+list[1]+list[2]+result+list[list.length-1];
      },
      rich: {
            a: { color:‘red‘ },
            b: {
               color: ‘#fff‘,
               align: ‘center‘,
fontWidth: ‘bold‘
            },
           c: { color:‘black‘}
      }
},
splitLine : {
show : true,
lineStyle : {
width : 3,
color : ‘#84869f‘, // 雷达图网格的颜色
}
},
axisLine: {
lineStyle: {
color:‘rgba(0,0,0,0)‘, // 设置雷达图中间射线的颜色
}
},
nameGap: -15,
// 指示器名称和指示器轴的距离。[ default: 15 ]
splitNumber: 4,
indicator: [
{ name: ‘{b|28个家长点赞}‘, max: 6500 },
{ name: ‘{b|66名综合排名}‘, max: 6500 },
{ name: ‘{b|18名门店排名}‘, max: 6500 },
{ name: ‘{b|28分技能考核}‘, max: 6500 },
{ name: ‘{b|28%学习进度}‘, max: 6500 },
{ name: ‘{b|80%续保率}‘, max: 6500 }
]
}],
color: [‘rgba(255,255,255,0)‘],
series: [{
type: ‘radar‘,
symbol: ‘rect‘,
symbolSize: 0,
data: [
{
value: [4600, 4500, 4200, 5030, 4930, 6500],
name: null
}
],
areaStyle: {
color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
{
color: ‘rgba(255, 255, 255, 0.9)‘,
offset: 1
}
])
}
}]
})
}

雷达图Echarts

原文：https://www.cnblogs.com/zllke/p/14753480.html