如何让echarts-for-react中多Y轴的零点位置保持一致？

核心配置方法 #

要让双Y轴（折线、柱状各对应一个Y轴）的零点处于同一位置，关键是统一两个Y轴的数值范围基准，具体有两种常用方案：

方案1：强制双Y轴以0为最小值（适用于非负数据） #

如果数据均为非负数，直接给两个Y轴设置min: 0，即可让零点对齐到图表底部：

option = {
  yAxis: [
    {
      type: 'value',
      min: 0, // 柱状图对应的Y轴强制最小为0
      // 其他样式配置
    },
    {
      type: 'value',
      min: 0, // 折线图对应的Y轴强制最小为0
      // 其他样式配置
    }
  ],
  series: [
    { type: 'bar', yAxisIndex: 0 }, // 绑定第一个Y轴
    { type: 'line', yAxisIndex: 1 } // 绑定第二个Y轴
  ]
};

方案2：按比例匹配正负区间（适用于含负数的数据） #

如果数据包含正负值，需要让两个Y轴的正负区间比例一致，确保零点在同一水平线。比如先计算两个系列数据的极值，再统一负区间与正区间的长度比例：

// 假设已获取两个系列的极值
const barDataExtent = [-50, 150];
const lineDataExtent = [-20, 40];

// 计算各自的负区间/正区间比例
const barRatio = Math.abs(barDataExtent[0]) / barDataExtent[1];
const lineRatio = Math.abs(lineDataExtent[0]) / lineDataExtent[1];
const targetRatio = Math.max(barRatio, lineRatio);

// 调整双Y轴的min和max，统一比例
option = {
  yAxis: [
    {
      type: 'value',
      min: -barDataExtent[1] * targetRatio,
      max: barDataExtent[1],
      scale: true
    },
    {
      type: 'value',
      min: -lineDataExtent[1] * targetRatio,
      max: lineDataExtent[1],
      scale: true
    }
  ],
  // series配置...
};

将图表原点设置在Y轴零点 #

只需将Y轴的min设置为0，同时让X轴根据数据自动计算最小值（或手动设置为数据起始值），此时图表左下角的坐标系原点就会对应Y轴零点位置。

注意事项 #

使用echarts-for-react时，配置逻辑与原生ECharts完全一致，只需将上述配置项传入组件的option属性即可。

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