Apexcharts中Tooltip Y轴格式化失效及X表头不显示问题

问题1：Tooltip Y值格式化无效且仅触发最大值打印 #

当设置shared: false时，单独的y.formatter可能无法遍历所有数据点，ApexCharts会默认聚合显示最大值，导致你的格式化逻辑只触发一次。改用custom回调函数可以完全控制tooltip的内容，确保每个数据点都被处理。

问题2：Tooltip X轴标签不显示 #

即使设置tooltip.x.show: true，如果没有显式指定x轴标签的来源，或者x轴categories配置缺失，标签也不会显示。需要在x的配置里添加formatter，从全局标签中获取对应值。

修改后的完整Tooltip配置 #

tooltip: {
  shared: false,
  intersect: true,
  x: {
    show: true,
    // 显式获取x轴类别标签
    formatter: ({ dataPointIndex, w }) => w.globals.labels[dataPointIndex]
  },
  // 自定义Tooltip内容，确保每个数据点都触发格式化
  custom: ({ series, seriesIndex, dataPointIndex, w }) => {
    const rawY = series[seriesIndex][dataPointIndex];
    // 用Intl.NumberFormat实现标准货币格式化（含千分位）
    const formattedY = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD'
    }).format(rawY);
    const xLabel = w.globals.labels[dataPointIndex];
    // 手动构建Tooltip HTML结构，和默认样式保持一致
    return `
      <div class="apexcharts-tooltip-title">${xLabel}</div>
      <div class="apexcharts-tooltip-series">
        <span class="apexcharts-tooltip-marker" style="background-color: ${w.globals.colors[seriesIndex]}"></span>
        ${formattedY}
      </div>
    `;
  }
}

额外检查项 #

• 确保图表的xaxis.categories已正确配置，比如：

  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
  }
  

• Vue组件中确保图表options是响应式的，用ref或reactive包裹，避免配置不生效。

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