如何在Apache ECharts中正确配置多矩形背景图形？

我在使用Apache ECharts给多折线图添加静态背景图形时，想用透明背景展示数据在不同时间阈值区间的分布，目前已经能添加图形，但遇到两个问题：

• 背景图形无法完全填充并适配图表grid区域的边缘；
• 当前图形是基于像素设置位置，希望能直接用y轴数值指定精确阈值。

解决思路与修改方案 #

1. 让背景图形适配grid区域边缘 #

将graphic组件的group设置bounding: 'raw'，同时让group的left/right/top/bottom参数与grid的配置完全一致，再把子元素rect的width设为'100%'，这样背景图形就能自动填充整个grid的宽度，无需硬写固定像素值。

2. 基于y轴数值定位背景区域 #

通过y轴的刻度范围（min/max）和grid的尺寸，将阈值数值转换为像素坐标。核心计算逻辑是：
假设y轴范围为[yMin, yMax]，grid的高度为gridHeight，那么某个数值val对应的y像素坐标为：
gridTop + gridHeight * (yMax - val) / (yMax - yMin)

修改后的完整代码 #

// 定义y轴阈值区间及对应颜色
const thresholdRanges = [
  { min: 0, max: 200, color: 'rgba(255, 0, 0, 0.2)' },
  { min: 200, max: 350, color: 'rgba(255, 255, 0, 0.2)' },
  { min: 350, max: 400, color: 'rgba(0, 255, 0, 0.2)' }
];

// 配置y轴范围与grid参数
const yMin = 0;
const yMax = 400;
const gridTop = 60;
const gridBottom = 60;
// 假设图表容器高度为500，若需动态适配可通过ECharts实例获取实际高度
const gridHeight = 500 - gridTop - gridBottom;

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    min: yMin,
    max: yMax
  },
  grid: {
    left: '10%',
    right: '10%',
    top: gridTop,
    bottom: gridBottom
  },
  graphic: [
    {
      type: 'group',
      left: '10%',
      right: '10%',
      top: gridTop,
      bottom: gridBottom,
      bounding: 'raw', // 让group边界严格匹配grid范围
      children: thresholdRanges.map(range => {
        // 计算阈值区间对应的像素位置与高度
        const yStart = gridTop + gridHeight * (yMax - range.max) / (yMax - yMin);
        const yEnd = gridTop + gridHeight * (yMax - range.min) / (yMax - yMin);
        return {
          type: 'rect',
          shape: {
            x: 0,
            y: yStart,
            width: '100%', // 自动填充group宽度
            height: yEnd - yStart
          },
          style: {
            fill: range.color
          }
        };
      })
    }
  ],
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
      data: [100, 225, 275, 268, 354, 287, 301],
      type: 'line'
    }
  ]
};

补充说明 #

• 若图表容器高度动态变化，可在初始化ECharts实例后，通过myChart.getDom().clientHeight获取实际高度，再重新计算gridHeight；
• bounding: 'raw'确保group的区域完全贴合grid的设置，避免图形偏移；
• 通过数值转像素的计算，实现了基于y轴阈值的精确背景区域定位，无需手动调整像素值。

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