ecahrts雷达图的编写

getRadarOption(arr) {
let indiArr = [];
let dataArr = [];
for (let i = 0; i < arr.length; i++) {
indiArr.push({
name: arr[i].name, // 各个极点的名称
min: 0, // 数值的最小范围
max: 100, // 数值的最大范围
});
dataArr.push(arr[i].value);
}

let option = {
color: ['#61a5e8'],
tooltip: {
trigger: 'item',
formatter: (params) => {
let indicator = option.radar.indicator;
let nameArr = [];
let data = '';
let result = '';

for (let key in indicator) {
nameArr.push(indicator[key].name);
}

for (let i = 0; i < params.value.length; i++) {
data = nameArr[i] + ':' + (params.value[i]);
result += data + '<br/>';
}

return result;
}
},
grid: {
top: '0%'
},
radar: {
shape: 'circle',
name: {
textStyle: {
color: '#000000',
fontSize: 13,
fontFamily: 'Microsoft YaHei',
}
},
splitNumber: 4,
splitArea: {
areaStyle: {
color: ['#ffffff', '#f2f2f2', '#ffffff', '#bcbcbc'] // 雷达图四个圈的颜色划分
}
},
axisLine: { // 雷达图线的样式
lineStyle: {
show: 'true',
color: '#ebebeb',
}
},
splitLine: { // 圆圈分割线样式
lineStyle: {
show: 'true',
color: '#ebebeb', // 分隔线颜色
1, // 分隔线线宽
}
},
radius: '70%',
center: ['50%', '50%'],
indicator: indiArr,
},
series: [{
name: '规则检查情况',
type: 'radar',
data: [
{
symbol: 'circle',
areaStyle: {
normal: {
opacity: 0.6,
},
},
value: dataArr, // 各个坐标的数值
},
]
}]
};

return option;
},
原文地址:https://www.cnblogs.com/zhanyuefeixian/p/12610955.html