项目需求圆形雷达图,最外面的一圈线设置为实线,内部网格线为虚线,发射线为实线,查找了很多案例没有找到相似需求,突然想到可以设置两个同等大小的雷达图,第二个只设置最外面一层为实线,并覆盖到第一个图上面实现效果
上图
代码
option = {
color: ['#FFA939'],
radar: [{
indicator: [{
text: '1',
max: 100
}, {
text: '2',
max: 100
}, {
text: '3',
max: 100
}, {
text: '4',
max: 100
}, {
text: '5',
max: 100
}],
center: ['50%', '50%'],
radius: 150,
startAngle: 90,
splitNumber: 4,
shape: 'circle',
name: {
formatter: '{value}',
textStyle: {
fontSize: 16,
color: '#1D4A77'
},
},
splitArea: {
areaStyle: {
color: ['transparent',
'transparent', 'rgba(114, 172, 209, 0)',
'transparent', 'rgba(114, 172, 209, 0)'
],
}
},
// 设置雷达图中间射线的颜色
axisLine: {
lineStyle: {
color: '#9AD7FF'
}
},
splitLine: {
lineStyle: {
color: '#9AD7FF',
type: 'dotted', //dashed solid dotted 射线类型【实线 虚线】
}
},
},
{
indicator: [{
max: 100
}, {
max: 100
}, {
max: 100
}, {
max: 100
}, {
max: 100
}],
center: ['50%', '50%'],
radius: 150,
startAngle: 90,
splitNumber: 1,
shape: 'circle',
splitArea: {
show:false,
},
axisLine: {
show:false
},
splitLine: {
lineStyle: {
color: '#9AD7FF',
type: 'solid',
width: 4
}
},
},
],
};