雷达图一般几个数据就渲染几维。
image.png
image.png
ecahrt实际也可以通过叠加，一个显示底一个显示数据，例如背景显示五维做画底的事情，后一个才是画数据的图。
开启第二个splitArea可以看出后一大一小是第二个大
option = {
radar: [{},{}],
series:[{}]
}
let data= [
{name:'1',score: '100'},
{name:'',score:100},
{name:'2',score: '50'},
{name:'',score:50},
{name:'3',score: '25'},
{name:'',score:25},
{name:'4',score: '80'},
{name:'',score:80},
]
option = {
radar: [
{
center: ['50%', '50%'],
radius: 70,
startAngle: 90,
nameGap: 5,
splitNumber: 4,
axisLine: {
lineStyle: {
color: '#fff',
type: 'solid',
}
},
splitLine: {
lineStyle: {
color: '#fff',
}
},
splitArea: {
areaStyle: {
color: ['#fff', 'rgba(255,255,255,.5)'],
}
},
indicator:[
// 用来比画的多一个维度
{
name:'',
},
...data.filter(item=>{
return item.name
}).map(item=>{
return {
name: ``,
max:100,
}
})
]
},
// 第二个
{
center: ['50%', '50%'],
radius:80,
startAngle: 90,
nameGap: 0,
axisLine: {
show:false,
lineStyle: {
color: '#fff',
type: 'solid',
}
},
splitLine: {
show:false,
lineStyle: {
color: '#fff',
}
},
splitArea: {
show:false,
// areaStyle: {
// color: ['#fff', 'rgba(255,255,255,.5)'],
// }
},
indicator:[
...data.map(item=>{
return {
name: item.name?`${item.name}\n${item.score}`:'',
max:'100'
}
}),
]
}
],
series: [
{
type: 'radar',
symbol:'none',
data: [
{
label: {
show: false,
formatter: function (params) {
return params.value;
}
},
value:[
...this.xx.filter(item=>{
return item.name!=''
}).map((item,i)=>{
console.log(item.name,i)
if(item.name) {
return item.avgScore
}else if(i==0){
console.log(i,this.schoolSports[i-1].avgScore)
return 100
}
}),this.xx[this.xx.length-1].avgScore
],
symbol:'none',
itemStyle: {
normal: {
color:'rgba(6, 106, 254, 1)',
show:false,
}
},
// 填充区域的线
lineStyle: {
normal: {
opacity: 0.5
}
},
// 填充区域背景
areaStyle: {
normal: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: .6,
// color: 'rgba(6, 106, 254, 1)'
// }, {
// offset: 1,
// color: 'rgba(6, 106, 254, 0)'
// }], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
}
}
]
},
]
}
网友评论