ApexCharts双轴配置问题：同组两系列仅一个可见

核心问题 #

你的代码大概率是未给serie2设置与serie1相同的y轴索引，或者数据格式存在异常，导致ApexCharts无法正确渲染serie2。

修复代码示例 #

针对Angular环境下的ApexCharts配置，调整如下：

1. 配置双y轴：

yaxis: [
  {
    title: { text: 'Serie 1 & 2' }
  },
  {
    title: { text: 'Serie 3' },
    opposite: true // 右侧显示独立y轴，区分共用轴
  }
]

2. 绑定系列到对应y轴：

series: [
  {
    name: 'serie 1',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
    yAxisIndex: 0 // 绑定到第一个y轴
  },
  {
    name: 'serie 2',
    data: [28, 38, 33, 48, 47, 58, 68, 89, 123],
    yAxisIndex: 0 // 关键：和serie1共用同一y轴索引
  },
  {
    name: 'serie 3',
    data: [1000, 1200, 900, 1500, 1400, 1600, 1800, 2000, 2200],
    yAxisIndex: 1 // 绑定到第二个独立y轴
  }
]

3. 数据格式校验：确保所有data数组都是纯数字类型，无字符串、空值或格式错误。

额外排查点 #

如果调整后仍不显示，检查：

• 图表高度是否足够，避免系列被遮挡；
• 图例是否开启，确认serie2未被手动隐藏；
• 升级ApexCharts到最新稳定版，避免版本兼容问题。

内容的提问来源于stack exchange，提问作者Q.Rey