vue 移动端的echarts点击图表外部隐藏tooltip

在Vue组件中引入Echarts，并定义一个变量来保存Echarts实例：

import echarts from 'echarts';

export default {
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart);
    // ...
  },
  // ...
};

给图表绑定一个点击事件，在事件处理函数中判断点击的位置是否在图表上。如果不在图表上，则隐藏tooltip：

mounted() {
  // 绑定点击事件
  document.addEventListener('click', this.handleChartClick);
},
beforeDestroy() {
  // 解绑点击事件
  document.removeEventListener('click', this.handleChartClick);
},
methods: {
  handleChartClick(e) {
    // 判断点击的位置是否在图表上
    const { left, top, width, height } = this.$refs.chart.getBoundingClientRect();
    const x = e.clientX;
    const y = e.clientY;
    if (x < left || x > left + width || y < top || y > top + height) {
      // 隐藏tooltip
      this.chart.dispatchAction({ type: 'hideTip' });
    }
  }
}

在Echarts的配置项中设置tooltip的触发方式为’axis’，并将showContent和hideContent属性设置为空函数，以禁止默认的tooltip行为：

mounted() {
  const option = {
    tooltip: {
      trigger: 'axis',
      showContent: () => {},
      hideContent: () => {}
    },
    // ...
  };
  this.chart.setOption(option);
}

通过以上步骤，就可以实现点击图表外部隐藏tooltip的功能了。