思路
略繁琐,但目前别无他法。本雷达图上涉及到五个维度,就黄色的线而言,第一次按照标准写法value的值设置为 [4000, 2080, 2080, 80, 80],然后再按照单个维度画5次,每次只有对应维度有值,即value分别设置为[4000, null, null, null, null] ,[null, 2080, null, null, null],[null, null, 2080, null, null],[null, null, null, 80, null],[null, null, null, null, 80]这种。
var option = {
legend: {
show:false,
top: '0%',
right: '2%',
orient: 'vertical',
textStyle: {
color: '#fff', fontSize: 22, },
data: ['移网', '家宽'],
icon: 'roundRect',
},
tooltip: {
},
radar: {
radius: '90%',
center: ['50%', '52%'],
startAngle: 0,
triggerEvent: true,
name: {
textStyle: {
color: '#fff', fontSize: '20', borderRadius: 3, padding: [20, 5] } },
nameGap: '2',
indicator: [
{
name: '平均下载速率', max: 5000,unit:'kbps' },
{
name: '建立连接时延', max: 2600,unit:'ms' },
{
name: '首屏时长', max: 2600 ,unit:'ms'},
{
name: '打开成功率', max: 100 ,unit:'%'},
{
name: '页面显示成功率', max: 100,unit:'%' },
],
splitArea: {
areaStyle: {
color:'transparent',
shadowColor: 'rgba(0, 0, 0, 1)',
shadowBlur: 30,
shadowOffsetX: 10,
shadowOffsetY: 10
}
},
axisLine: {
lineStyle: {
color:'#002B78',} },
splitLine: {
lineStyle: {
width: 1.5,
color: '#002B78',
}
}
},
series: [
{
type: 'radar',
symbol: 'circle',
symbolSize: 12,
itemStyle: {
color: '#00C5CC'
},
lineStyle: {
color: 'transparent'
},
areaStyle: {
color: 'transparent',
opacity: 0.3
},
tooltip: {
show:true,
formatter: function() {
return '平均下载速率(kbps):4000';
}
},
z: 5, //这个必须设置,最终显示的tooltip来自于这个图层
data: [
{
value: [4000,null ,null ,null , null],
name: '移网',
}
]
},
{
type: 'radar',
itemStyle: {
color: '#00C5CC'
},
lineStyle: {