在React中使用Apex Chart时如何自定义折线图的tooltip展示内容？

你可以通过ApexChart内置的tooltip.custom配置项重写Tooltip渲染逻辑，实现你需要的格式，完整配置参考如下：

const chartOptions = {
  // 其余原有配置（chart类型、坐标轴配置等）保持不变
  tooltip: {
    custom: function({ series, dataPointIndex, w }) {
      // 方案1：手动指定四个标签名，和你的序列顺序一一对应
      const customLabels = ["first-label", "second-label", "third-label", "forth-label"];
      let tooltipContent = '<div style="padding: 10px;">';

      customLabels.forEach((label, idx) => {
        // 取当前悬浮点对应序列的数值
        const currentValue = series[idx][dataPointIndex];
        tooltipContent += `<p style="margin: 6px 0;">${label} : ${currentValue}</p>`;
      });
      tooltipContent += '</div>';
      return tooltipContent;

      // 方案2：如果标签名是序列name固定加后缀，无需手动维护标签数组，可以替换上面的逻辑：
      /*
      let tooltipContent = '<div style="padding: 10px;">';
      w.config.series.forEach((item, idx) => {
        const label = `${item.name}-label`;
        const currentValue = series[idx][dataPointIndex];
        tooltipContent += `<p style="margin: 6px 0;">${label} : ${currentValue}</p>`;
      });
      tooltipContent += '</div>';
      return tooltipContent;
      */
    }
  },
  // 你的原有序列配置
  series: [
    {
      name: "first",
      data: [28, 29, 33, 36, 32, 32, 33]
    },
    {
      name: "second",
      data: [12, 11, 14, 18, 17, 13, 13]
    },
    {
      name: "third",
      data: [48, 29, 33, 16, 32, 62, 3]
    },
    {
      name: "forth",
      data: [22, 11, 54, 18, 27, 53, 13]
    }
  ]
}

以上逻辑对原生JS、Vue、React等不同环境的ApexChart封装组件通用，只需要把上述tooltip配置写入你的图表配置项即可。 #

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