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

最新推荐文章于 2024-04-19 10:36:05 发布

原创最新推荐文章于 2024-04-19 10:36:05 发布 · 3.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

echarts 专栏收录该内容

2 篇文章

订阅专栏

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

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

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' // 设置超出部分的颜色
              }
            }
          ]