ECharts 5.4.2 tooltip添加可点击超链接失效问题求助

核心问题原因 #

ECharts的Tooltip组件默认会拦截鼠标事件（比如点击）来实现自动隐藏等交互逻辑，导致内部的<a>标签点击事件无法正常触发。

解决方案 #

方法1：给链接添加点击事件并阻止事件冒泡 #

修改tooltip的formatter函数，直接给<a>标签绑定onclick事件，同时阻止事件冒泡，避免Tooltip被提前关闭，示例代码：

tooltip: {
  appendToBody: true,
  hideDelay: 3000,
  formatter: function (o) {
    // 阻止事件冒泡+打开链接
    return '<a href="javascript:void(0)" onclick="event.stopPropagation(); window.open(\'http://google.com\')">test</a>';
  }
}

方法2：调整Tooltip触发方式 #

将Tooltip的触发方式改为点击触发，这样再次点击链接时不会触发Tooltip的隐藏逻辑，示例代码：

tooltip: {
  appendToBody: true,
  hideDelay: 3000,
  triggerOn: 'click', // 仅点击图表元素时显示Tooltip
  formatter: function (o) {
    return '<a href="http://google.com" target="_blank">test</a>';
  }
}

方法3：监听Tooltip显示事件手动处理链接 #

通过ECharts的tooltipShow事件，在Tooltip显示后给内部链接绑定独立的点击事件，示例代码：

const myChart = echarts.init(document.getElementById('main'));

// 监听Tooltip显示事件
myChart.on('tooltipShow', function() {
  const tooltipDom = document.querySelector('.echarts-tooltip');
  if (!tooltipDom) return;
  
  // 给所有链接绑定点击事件并阻止冒泡
  tooltipDom.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', function(e) {
      e.stopPropagation();
      window.open(this.getAttribute('href'));
    });
  });
});

// 图表配置
myChart.setOption({
  // ...其他图表配置
  tooltip: {
    appendToBody: true,
    hideDelay: 3000,
    formatter: function (o) {
      return '<a href="http://google.com">test</a>';
    }
  }
});

注意事项 #

• 以上方法均兼容ECharts 5.4.2版本。
• 使用window.open时需注意浏览器弹窗拦截设置，可能需要用户手动允许弹窗。

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