介绍一下背景,图中是一个电池在不同时间的电量值,两张图的数据是一样的。产品经理要求标出电量变化的情况,分为缓慢上升、缓慢下降和急速下降。
我刚开始的思路有两个:
- 使用series中的itemStyle给柱子指定颜色
- 分三个系列画
不过都遇到了问题
- 没办法出现三个legend
- 无奈没值得时候也会出现一个空,达不到要的效果
最终解决方法是使用visualMap,代码如下:
var data = []
for (let i = 0 ; i < 50; i++) {
data.push(i);
}
option = {
tooltip: {},
xAxis: {
type: "category",
data: data
},
yAxis: {},
visualMap: {
type: 'piecewise',
dimension: 2,
right: 0,
top: 0,
orient: 'vertical',
showLabel: true,
itemSymbol: 'rect',
align: 'left',
pieces: [{
min: 1,
max: 1,
color: 'blue',
label: '消耗'
}, {
min: 2,
max: 2,
color: 'green',
label: '充电'
}, {
min: 3,
max: 3,
color: 'red',
label: '快速消耗'
}]
},
series: [{
name: "Gaussian",
type: "bar",
data: [
[0, 100, 1], [1, 99, 1], [2, 98, 1], [3, 97, 1], [4, 96, 1], [5, 95, 1], [6, 94, 1], [7, 93, 1], [8, 92, 1], [9, 91, 1],
[10, 90, 2], [11, 91, 2], [12, 92, 2], [13, 93, 2], [14, 94, 2], [15, 95, 2], [16, 96, 2], [17, 97, 2], [18, 98, 2],
[19, 98, 1], [20, 97, 1], [21, 96, 1], [22, 94, 1], [23, 92, 1], [24, 91, 1], [25, 88, 1],
[26, 82, 3], [27, 76, 3], [28, 72, 3], [29, 68, 3], [30, 66, 3], [31, 55, 3],
[32, 60, 2], [33, 61, 2], [34, 62, 2], [35, 63, 2], [35, 64, 2], [36, 65, 2], [37, 66, 2], [38, 67, 2], [39, 68, 2], [40, 69,2], [41, 70, 2]
]
}]
}
https://echarts.apache.org/examples/zh/editor.html,打开这个页面,把上面的代码覆盖就能出现截图中的内容了
如果对你有帮助,记得点赞哦,嘻嘻:)