ECharts 雷达图可以使用 series[i]-radar
设置 ,雷达图主要用于表现多变量的数据,例如玩”和平精英”战况的各个属性分析,雷达图依赖radar
组件。 关于雷达图其他的一些属性自行去查看官网,我们在这里讲的是在雷达图上设置极坐标。 首先要了解极坐标系,因为实现极坐标需要一个系列三个属性完成,分别是polar:{}
极坐标系、radiusAxis:{}
极坐标系的径向轴、angleAxis:{}
极坐标系的角度轴完成,查看示例 如何把极坐标系和雷达图合并呢,下面我们就来说说如何设置,还是需要用到radar
组件,radar
组件下面有一个indicator
属性, 它是雷达图的指示器,用来指定雷达图中的多个变量(维度)。 然后我们它的最大值radar.indicator[i].max
和最小值radar.indicator[i].min
设为统一的值,要注意它的这里的最大值要大于或等于你的数据的最大值,最小值要小于或等于你的数据的最小值。 下面是用雷达图表现的示例。
See the Pen echarts 雷达图设置极坐标 by w3cbest.com (@w3cbest) on CodePen.
var max = 4, min = -4;
option = {
...
radar: {
...
indicator: [{
name: '销售',
max: max,
min: min
},
{
name: '管理',
max: max,
min: min
},
{
name: '技术',
max: max,
min: min
}
],
splitArea: {
show: false
},
splitLine: {
show: false
}
},
polar: {},
angleAxis: {
min: 0,
max: 360,
interval: 5,
clockwise: false,
axisTick: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
min: min,
max: max,
interval: 2,
splitArea: {
show: true
}
},
series: [{
...
data: [{
value: [4, -4, 1]
}]
}]
};