echarts设置上下限，折线超出部分，显示别的颜色

最新推荐文章于 2025-02-21 18:17:04 发布

_小太子

最新推荐文章于 2025-02-21 18:17:04 发布

阅读量3.3k

点赞数 2

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

本文链接：https://blog.csdn.net/Teemo_shape/article/details/124669652

版权

echarts 专栏收录该内容

2 篇文章

订阅专栏

该博客介绍了如何利用ECharts的visualMap组件来监控实时数据，当数值超出预设的最大值和最小值时，数据会以红色高亮显示。通过配置pieces和outOfRange属性，可以定制不同区间的数据颜色，从而实现数据可视化的有效监控。

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

需求: 进出水设置了最大值最小值，监控实时数据，超出部分标红。

visualMap 视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。

 visualMap: [
            {
              top: 10,
              right: 10,
              show: false,
              precision: 1,
              seriesIndex: 0,
              pieces: [
                {
                  gt: 0, // 设置最小值
                  lte: 49, // 设置最大值
                  color: 'rgba(31,134,253,1)'
                }
              ],
              outOfRange: {
                color: 'red' // 设置超出部分的颜色
              }
            },
            {
              top: 10,
              right: 10,
              show: false,
              seriesIndex: 1,
              precision: 1,
              pieces: [{
                gt: 0, // 设置最小值
                lte: 12, // 设置最大值
                color: 'rgba(35,184,188,1)'
              }
              ],
              outOfRange: {
                color: 'red' // 设置超出部分的颜色
              }
            }
          ]