实践出真知
效果图
心路历程
大多数时候,使用echarts 就是参考示例图,根据需求进行改造,更多的研究就是在配置项的配置,看到没有的示例还真的是有一点点慌,但是怎么看需求的样式都是那么的合理,实用,所以我想一定是可以实现的,因为它并非不常见。怎么办呢,研究,找到方法之后,最终的实现还是轻松的。
需求分析
Q:是雷达图吗?
A:第一眼看上去,是雷达图,因为他有指示器,分割线都是雷达图的效果
Q:发现一个问题,效果图是有断点没有完全连接在一起的,但是雷达图是没有断点连接,而且没有值或者空出的部分是默认连接原点的,怎么办?
A:根据效果图,外围样式是雷达图,数据效果其实是折线图,因此数据的连接是折线图,根据需求图例也是折线的效果图。
Q:怎么把折线图画在雷达图上呢?
A:首先是不能用雷达图渲染数据了,在圆上连接折线,非极坐标不可了。
Q:极坐标实现后是完全的圆,和效果图又不太符合了?
A:那就尝试结合极坐标和雷达图一起用,最终就是要在极坐标里画折线图,然后和雷达图的指示器联系在一起。
代码实现
代码中添加了一些注释,
关键点:
- 雷达图和极坐标 polar 和 radar radius 要设置为相同的值,为了方便我是定义了变量 const radius = '70%'
- indicator中的数据和折线图中的data 要 一 一 对应,没有数据的部分要用 "-" ,代替,这样折线能隔开形成断点
- angleAxios 设置 startAngle:0 ,使得极坐标分割线和雷达图分割线重合
- 其他的小设置 看官网吧 比较全,讲的详细。
let option = {
angleAxis: {
type: 'category',
startAngle: 0,
splitLine: {
show: false
},
axisLine: {
show: false
}
},
//极坐标的设置
radiusAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
// 极坐标设置
polar: {
//极坐标弧度
radius: radius
},
// 雷达图设置
radar: {
// 雷达图指示器
indicator: (function() {
// 模拟指示器
let indictors = []
// 指示器和数据要对应
for (var i = 1; i <= 14; i++) {
indictors.push({
text: '测试一下指示器的名字' + i
// max:100,// max 值根据实际需求计算或者设置
})
}
return indictors
})(),
name: {
// 指示器的文本样式具体参考文档
},
radius: radius, // 极坐标和雷达图的radius 要保持一致
// 以下的小细节的配置看文档就可以了
areaStyle: {
//根据需求设置雷达区域的样式
color: '#000'
},
axisLine: {
lineStyle: {
type: 'dotted'
}
},
splitLine: {
// show: false
},
splitArea: {
show: false
}
},
series: [
{
type: 'line',
data: [1, 2, '-', 3, 4, 3, 5, 1, 3, '-', 2, '-', 4, '-'],
coordinateSystem: 'polar',
name: 'A',
stack: 'a',
emphasis: {
focus: 'series'
},
symbol: 'circle'
},
{
type: 'line',
data: [3, '-', 2, '-', 4, '-', 2, 4, 3, 1, 3, 2, '-', 5],
coordinateSystem: 'polar',
name: 'B',
stack: 'a',
emphasis: {
focus: 'series'
},
symbol: 'circle'
}
],
legend: {
show: true,
data: ['A', 'B', 'C']
}
}
积跬步 至千里