echarts 折线图动态基准线设置&超出基准线标红

羡与

已于 2025-02-21 18:22:35 修改

阅读量695

点赞数 5

CC 4.0 BY-SA版权

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

于 2025-02-21 18:17:04 首次发布

本文链接：https://blog.csdn.net/hfhwfw161226/article/details/145782624

基准线属性：markLine

线条标红关键属性：visualMap

小于： lt (less than)

大于：gt (greater than)

小于等于：lte (Less than or equal to)

大于等于：gte (Greater than or equal to)

1、基础应用——2条基准线

当存在2条基准线时，折线图切割为3部分，小于最低基准线和大于最高标准线的部分标红，中间位置为蓝色。代码如下（可直接cv到echarts官网的调试页面）：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  visualMap: {
    pieces: [
      {
        lte: 160,  // 小于等于160
        color: 'red' // 为红色
      },
      {
        gt: 160, // 大于160
        lte: 225, // 小于等于225
        color: '#5470c6' // 为蓝色
      },
      {
        gt: 225, // 大于225
        color: 'red' // 为红色
      }
    ],
    show: false, /