echarts 实现多图联动显示tooltip

1、需求描述：有时候工作中会使用到图一移动时同时控制图二中的tooltip进行显示；

2、所用配置项：tooltip.triggerOn : "none",然后手动触发tooltip； 以下是以官方示例为例的demo，代码如下：

a:vue文件代码：

<template>
  <div class="echart-container">
    <div id="chart1"></div>
    <div id="chart2"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";

const option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line",
    },
  ],
};
export default {
  data: () => ({
    options1: {},
    options2: {},
    chart1: null,
    chart2: null,
  }),
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.chart1 = echarts.init(document.getElementById("chart1"));
      this.chart2 = echarts.init(document.getElementById("chart2"));
      this.refreshChart1();
      this.refreshChart2();
    },
    refreshChart1() {
      const opt = {
        ...option,
        tooltip: {
          trigger: "axis",
          formatter: (data) => {
            const { dataIndex } = data[0];
            console.log(data, dataIndex);
            this.chart2.dispatchAction({
              type: "showTip",
              dataIndex,
              seriesIndex: 0,
            });
            return data[0].value;
          },
        },
      };
      this.chart1.setOption(opt);
    },
    refreshChart2() {
      const opt = {
        ...option,
        color: ["green"],
        tooltip: {
          trigger: "axis",
          triggerOn: "none",
        },
      };
      this.chart2.setOption(opt);
    },
  },
};
</script>
<style lang="less">
#chart1,
#chart2 {
  width: 100%;
  height: 350px;
  margin: 10px;
  border: 1px solid #dedede;
}
</style>