Apache ECharts 双轴柱状图配置技巧：解决多系列数据展示问题

在使用 Apache ECharts 进行数据可视化时，双轴柱状图是常见的展示形式。当我们需要同时展示量级差异较大的数据系列（如产量和良率）时，正确的坐标轴配置尤为关键。

问题现象

开发者在配置双轴柱状图时遇到一个典型问题：两个数据系列（产量和良率）虽然都配置了独立的X轴，但良率系列（数值范围0-100）在产量系列（数值范围百万级）的坐标轴上几乎不可见。

核心原理

ECharts 的多轴配置需要明确指定系列与坐标轴的对应关系。默认情况下，所有系列会使用第一个坐标轴（index=0），这就是导致良率数据显示异常的根本原因。

解决方案

通过为每个系列明确指定 xAxisIndex 属性，可以精确控制数据系列与坐标轴的绑定关系：

series: [
  {
    name: '产量',
    type: 'bar',
    data: productDataArray  // 默认使用第一个X轴（index=0）
  },
  {
    name: '良率',
    type: 'bar',
    xAxisIndex: 1,  // 显式指定使用第二个X轴
    data: productRateDataArray
  }
]

最佳实践

1. 多轴配置原则：当使用多个X轴或Y轴时，必须为每个系列明确指定坐标轴索引
2. 数值范围优化：为不同量级的数据配置独立的坐标轴，确保所有数据都能清晰展示
3. 标签格式化：对于百分数等特殊格式，可通过axisLabel.formatter进行定制化显示

扩展应用

这种多轴配置方法同样适用于：

• 混合图表（柱状图+折线图）
• 多单位数据展示（如金额+百分比）
• 不同量纲数据对比（如温度+湿度）

通过掌握这些配置技巧，可以充分发挥 ECharts 在多维度数据可视化方面的强大能力。