ApexCharts添加自定义Tooltip后第二个Y轴不显示问题求助

从对象集合适配双Y轴的核心配置细节入手，逐一排查：

1. 确认series的data映射是否精准 #

对象集合必须明确指定每个系列的x和y字段，且x值格式要与x轴类型完全匹配：

• 若x轴为时间类型，x值必须是合法ISO字符串、时间戳，不能用非标准字符串；
• 若x轴为类目类型，x值要和x轴categories数组的元素完全一致。

正确配置示例：

series: [
  {
    name: '销量',
    type: 'column',
    yaxis: 0,
    data: [{x: '2024-05-01', y: 320}, {x: '2024-05-02', y: 450}]
  },
  {
    name: '利润率',
    type: 'line',
    yaxis: 1,
    data: [{x: '2024-05-01', y: 12.5}, {x: '2024-05-02', y: 14.2}]
  }
]

2. 检查Y轴ID与series的绑定是否一致 #

每个Y轴必须设置唯一id，且series的yaxis属性值要与对应轴的id类型完全匹配（数字/字符串不能混用）：

yaxis: [
  {
    id: 0,
    title: { text: '销量' }
  },
  {
    id: 1,
    opposite: true,
    title: { text: '利润率(%)' }
  }
]

比如Y轴id设为字符串'right-axis'，series里的yaxis也必须写'right-axis'，不能写成数字。

3. 验证两个系列的x轴数据完全对齐 #

两个系列的对象集合必须保证x值一一对应，若某系列缺失某个x值，会导致图表只渲染数据完整的系列。缺失值可补为{x: 'xxx', y: null}或{x: 'xxx', y: 0}（根据业务需求）。

4. 确认系列类型配置无冲突 #

如果是混合类型图表（如柱状+折线），必须给每个series单独指定type，不能仅依赖全局chart.type配置——全局类型仅对未指定type的系列生效，可能导致第二个系列渲染异常。

5. 排查隐藏或样式问题 #

• 检查配置中是否给某个Y轴设置了visible: false；
• 打开浏览器开发者工具，查看Y轴DOM元素是否存在，是否被自定义CSS隐藏。

若以上排查后仍未解决，可贴出完整的series和yaxis配置代码，进一步定位细节问题。

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