echarts同一个系列出现不同的颜色

最新推荐文章于 2024-02-06 17:44:55 发布

原创最新推荐文章于 2024-02-06 17:44:55 发布 · 826 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

文章讲述了如何使用Echarts的visualMap功能来展示电池电量在不同时间的变化情况，包括缓慢上升、缓慢下降和急速下降三种状态，通过颜色编码区分，解决了legend显示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

介绍一下背景，图中是一个电池在不同时间的电量值，两张图的数据是一样的。产品经理要求标出电量变化的情况，分为缓慢上升、缓慢下降和急速下降。

我刚开始的思路有两个：

使用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，打开这个页面，把上面的代码覆盖就能出现截图中的内容了

如果对你有帮助，记得点赞哦，嘻嘻:)