同一ECharts实例多series下dispatchAction的showTip失效问题求助

同一ECharts实例中，使用dispatchAction触发其他Series的showTip无效，核心原因有两点：

• ECharts默认会自动触发当前hover元素的Tooltip，会覆盖手动触发的动作；
• 仪表盘（gauge）系列的Tooltip触发逻辑特殊，需要明确指定定位信息，否则无法正确挂载到目标Series上。

解决方案 #

1. 为每个Series配置独立的Tooltip，设置triggerOn: 'none'禁用自动触发，完全由手动动作控制；
2. 调用showTip时，通过position参数指定Tooltip显示的位置（对应目标仪表盘的中心坐标）；
3. 在触发目标Tooltip前，先隐藏当前可能显示的Tooltip，避免冲突。

修改后的完整代码 #

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
</head>

<div class="chart"></div>

<style>
    .chart {
        width: 100%;
        height: 100vh;
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const chartUse = echarts.init(document.getElementsByClassName("chart")[0]);
        const option = {
            // 为每个Series配置独立Tooltip，禁用自动触发
            tooltip: [
                {show: true, triggerOn: 'none'},
                {show: true, triggerOn: 'none'}
            ],
            series: [
                {
                    type: "gauge",
                    center: ["30%", "50%"],
                    data: [{value: 40}]
                },
                {
                    type: "gauge",
                    center: ["70%", "50%"],
                    data: [{value: 80, itemStyle: {color: "#f00"}}]
                }
            ]
        };
        chartUse.setOption(option);

        // 鼠标悬浮第一个仪表盘时，触发第二个的Tooltip
        chartUse.on("mouseover", {seriesIndex: 0, dataIndex: 0}, function() {
            // 先隐藏当前可能存在的Tooltip
            chartUse.dispatchAction({type: "hideTip"});
            // 触发第二个Series的Tooltip，指定位置到其中心
            chartUse.dispatchAction({
                type: "showTip",
                seriesIndex: 1,
                dataIndex: 0,
                // 定位到第二个仪表盘的中心位置
                position: ['70%', '50%']
            });
        });

        // 鼠标移出时隐藏第二个仪表盘的Tooltip
        chartUse.on("mouseout", {seriesIndex: 0, dataIndex: 0}, function() {
            chartUse.dispatchAction({
                type: "hideTip",
                seriesIndex: 1,
                dataIndex: 0
            });
        });
    });
</script>

补充说明 #

• 如果不需要完全禁用第一个Series的自动Tooltip，可以在mouseover时先获取当前Tooltip实例并隐藏，再触发目标的；
• position参数可以根据实际需求调整，比如设置为函数动态计算位置，确保Tooltip显示在更合适的区域。

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