如何用echarts对折线图数据区间划分不同颜色

最新推荐文章于 2025-01-07 17:50:09 发布

皮皮皮皮裤

最新推荐文章于 2025-01-07 17:50:09 发布

阅读量2.5k

点赞数 14

分类专栏： echarts 文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/qq_40819426/article/details/136177158

版权

echarts 专栏收录该内容

1 篇文章

订阅专栏

需求描述：每个折线图都有一个阈值曲线，对于阈值以上折线显示为蓝色，阈值线以下，折线显示为红色。

解决方案：使用折线图的options的visualMap属性，对数据进行分段，因此需要用到pieces属性去划分数据段，并对不同的数据段给定制定的颜色。

代码如下：

options = {
  title:{...},
  legend:{...},
  series:{...},
  visualMap:{
    show: true,
    pieces: [
      {
        min: Math.min(...data),
        max: Number(threshold)
      },
      {
        min: Number(threshold),
        max: Math.max(...data)
      }
    ],
    inRange: {
      color: ["#df3437", "#587dff"] // 阈值以下为红色，阈值以上为蓝色
    }
  }
}