vue3 echarts的tooltip添加点击事件

在Vue3中，可以通过在ECharts的options中设置tooltip.trigger为'axis'，然后在tooltip.formatter中使用回调函数来实现tooltip的点击事件。具体步骤如下：

1. 在Vue3中安装ECharts，并在组件中引入ECharts：

import * as echarts from 'echarts';

2. 在组件中定义ECharts的options，并设置tooltip的trigger为'axis'，并在formatter中使用回调函数来实现tooltip的点击事件：

options: {
  tooltip: {
    trigger: 'axis',
    formatter: (params) => {
      let htmlStr = '';
      // 遍历params，生成html字符串
      // ...
      // 在html字符串中添加点击事件
      htmlStr += `<div onclick="handleClick()">点击事件</div>`;
      return htmlStr;
    }
  },
  // 其他配置项
}

3. 在组件中定义handleClick方法来处理点击事件：

methods: {
  handleClick() {
    // 处理点击事件
    // ...
  }
}

4. 在组件中挂载ECharts，并在mounted钩子函数中添加鼠标移出事件，清除联动高亮：

mounted() {
  // 挂载ECharts
  this.chart = echarts.init(this.$refs.chart);
  // 设置options
  this.chart.setOption(this.options);
  // 添加鼠标移出事件
  this.chart.on("mouseout", (params) => {
    if (params.seriesType == "effectScatter") {
      this.seriesData = [];
      this.chart.setOption({
        series: [{}, { data: this.seriesData }]
      });
    }
  });
}