ECharts如何实现基于y轴数值的static bands静态区间背景色效果

你之前用splitArea实现的方案本质是绑定坐标轴刻度分割线，配色会按刻度区间循环，没法精准匹配自定义的数值边界，要实现固定数值区间的静态色带，直接用系列的markArea（标记区域）配置即可，不受坐标轴刻度规则限制，能精准对齐任意数值范围。

具体实现方法 #

• 核心逻辑：通过markArea.data定义每个色带的Y轴起止值、对应填充色，配置后色带会自动铺满整个X轴绘图区域，和目标效果完全一致。
• 基础配置参考（以三个区间色带为例：Y轴0-40绿色、40-70蓝色、70-100红色）：

option = {
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 100
  },
  series: [
    {
      name: '业务数据',
      data: [22, 55, 89, 34, 62, 91, 47],
      type: 'line',
      // 静态色带核心配置
      markArea: {
        silent: true, // 关闭色带交互响应，避免遮挡图表本身的tooltip、点击事件
        data: [
          // 绿色区间：0-40
          [
            { yAxis: 0, itemStyle: { color: 'rgba(16, 142, 62, 0.25)' } },
            { yAxis: 40 }
          ],
          // 蓝色区间：40-70
          [
            { yAxis: 40, itemStyle: { color: 'rgba(24, 113, 235, 0.25)' } },
            { yAxis: 70 }
          ],
          // 红色区间：70-100
          [
            { yAxis: 70, itemStyle: { color: 'rgba(230, 44, 44, 0.25)' } },
            { yAxis: 100 }
          ]
        ]
      }
    }
  ]
};

配置注意事项 #

• 色带颜色建议使用带透明度的RGBA值，透明度控制在0.2-0.4区间即可，避免完全遮挡网格线、数据序列影响可读性。
• 多序列图表不需要每个系列都重复配置markArea，在第一个数据序列中配置即可全局生效；也可以单独新增一个无数据的透明占位序列专门存放色带配置，方便后续维护。
• 不建议强行改造splitArea适配需求：该方案需要手动对齐坐标轴刻度间隔、分割数与色带边界，一旦坐标轴范围动态调整就会出现色带错位，维护成本极高。

内容的提问来源于stack exchange，提问作者fd234