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

最新推荐文章于 2025-05-15 17:38:34 发布

皮皮皮皮裤

最新推荐文章于 2025-05-15 17:38:34 发布

阅读量2.7k

点赞数 14

CC 4.0 BY-SA版权

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

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

echarts 专栏收录该内容

1 篇文章

订阅专栏

文章描述了如何通过在折线图的options中设置visualMap属性，利用pieces属性划分数据段并定义不同颜色来表示阈值以上的蓝色和阈值以下的红色。给出了一段示例代码和预期效果。

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

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

解决方案：使用折线图的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"] // 阈值以下为红色，阈值以上为蓝色
    }
  }
}