let data = [
{
name: 'name1',
max: 30
},
{
name: 'name2',
max: 30
},
{
name: 'name3',
max: 30
},
{
name: 'name4',
max: 30
},
{
name: 'name5',
max: 30
},
{
name: 'name6',
max: 30
},
{
name: 'name7',
max: 30
}
];
let datavalue = [13, 25, 13, 24, 25, 14, 26];
let ii = -1;
option = {
grid: {
top: '5%',
containLabel: true
},
animation: true, // 默认是true 是否开启动画
animationDuration: 5000, // 动画时长 ms
radar: {
radius: '60%', //大小
center: ['50%', '55%'], // 图的位置
axisName: {
rich: {
a: {
fontSize: '14',
color: '#fff',
align: 'left',
lineHeight: '20'
},
b: {
fontSize: '14',
color: '#188BD9',
align: 'left',
fontWeight: 'bold'
}
},
formatter: (a, b) => {
ii++;
// return `{a|${a}}\n{b|${datavalue[ii]}家}`;
return `{a|${a}} {b|${datavalue[ii]}家}`;
}
},
axisLine: {
lineStyle: {
color: 'rgba(153, 209, 246, 0.2)'
}
},
splitArea: {
show: false,
areaStyle: {
color: 'rgba(255,0,0,0)' // 图表背景的颜色
}
},
splitLine: {
show: true,
lineStyle: {
width: 1,
color: 'rgba(153, 209, 246, 0.3)' // 设置网格的颜色
}
},
indicator: data
},
series: [
{
name: '示例',
type: 'radar',
data: [
{
value: datavalue,
name: '示例',
areaStyle: {
color: 'rgba(153, 209, 246, 0.3)'
},
itemStyle: {
normal: {
borderWidth: 1,
color: '#188BD9',
borderColor: '#188BD9'
}
},
lineStyle: {
color: '#188BD9',
width: 1
},
label: {
show: false,
color: '#188BD9',
formatter: function (params) {
return params.value + '家';
}
}
}
]
}
]
};
echarts雷达图类目下显示值
于 2022-09-23 11:39:21 首次发布