Apex Charts自定义tooltip不生效 仅显示默认提示框问题求助

你在后端将包含custom函数的图表配置通过JSON.stringify序列化时，JSON格式本身不支持对函数类型的序列化，会直接丢弃tooltip.custom字段，前端解析后的配置中不存在该自定义函数，因此始终使用默认tooltip逻辑，自然不会触发自定义函数内的console打印。

1. 后端调整：移除配置中tooltip下的custom函数定义，仅保留可序列化的纯数据配置项即可。
2. 前端调整：将自定义tooltip的逻辑迁移到前端代码中，在解析完后端传递的配置后手动追加custom函数。

前端渲染代码修改 #

<div id="chart"></div>
<script>
    const defaultOptions = {}
    const options = JSON.parse(`{{options}}`.replace(/&quot;/g, '"'));
    // 手动追加自定义tooltip逻辑
    options.tooltip = options.tooltip || {}
    options.tooltip.custom = function({series, seriesIndex, dataPointIndex, w}) {
        const data = w.globals.initialSeries[seriesIndex].data[dataPointIndex];
        console.log("tooltip",series,seriesIndex,dataPointIndex,w)
        // 原y字段为时间戳数组，可转成可读的时间格式展示
        return '<ul>' +
        '<li><b>设备编号</b>: ' + data.x + '</li>' +
        '<li><b>开始时间</b>: ' + new Date(data.y[0]).toLocaleTimeString() + '</li>' +
        '<li><b>结束时间</b>: ' + new Date(data.y[1]).toLocaleTimeString() + '</li>' +
        '</ul>';
    }
    const chart = new ApexCharts(document.getElementById("chart"), { ...defaultOptions, ...options });
    chart.render();
</script>

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