e-chart实现上下图表使用一个tooltip移入事件

有的需求需要一次移入事件展示多个图标的tooltip方便用户查看，效果如下
效果一：

链接如下 ： e-chart
主要配置是

 tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false
    }
  },
  axisPointer: {
    link: [
      {
        xAxisIndex: 'all'
      }
    ]
  },

完整option代码

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false
    }
  },
  axisPointer: {
    link: [
      {
        xAxisIndex: 'all'
      }
    ]
  },
  title: [],
  grid: [
    {
      top: 50,
      width: '100%',
      bottom: '45%',
      left: 10,
      containLabel: true
    },
    {
      top: '55%',
      width: '100%',
      bottom: 0,
      left: 10,
      containLabel: true
    }
  ],
  yAxis: [
    {
      type: 'value',
      splitLine: {
        show: false
      }
    },
    {
      type: 'value',
      gridIndex: 1,
      splitLine: {
        show: false
      }
    }
  ],
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLabel: {
        interval: 0,
        rotate: 30
      },
      splitLine: {
        show: false
      }
    },
    {
      gridIndex: 1,
      type: 'category',
      data: ['Mon1', 'Tue1', 'Wed1', 'Thu1', 'Fri1', 'Sat1', 'Sun1'],
      axisLabel: {
        interval: 0,
        rotate: 30
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      type: 'bar',
      stack: 'chart',
      z: 3,
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    },
    {
      type: 'bar',
      stack: 'component',
      xAxisIndex: 1,
      yAxisIndex: 1,
      z: 3,
      data: [80, 92, 91, 34, 120, 130, 130]
    }
  ]
};

 效果二：

 

                const myChart1 = this.chart; // 图表1
                const myChart2 = this.TwoExcelChartDom; // 图表2
                myChart1.getZr().on('mousemove', (params) => {
                    const pointInPixel = [params.offsetX, params.offsetY];
                    // 判断当前鼠标移动的位置是否在图表中
                    if (myChart1.containPixel('grid', pointInPixel)) {
                        const pointInGrid = myChart1.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
                        if(pointInGrid){
                            const xIndex = pointInGrid[0];
                            const op = myChart1.getOption();
                            const xDate = op.xAxis[0].data[xIndex];
                            let xAxisArray = myChart2.getOption().xAxis[0].data
                            const dataIndex = xAxisArray.findIndex(x => x === xDate);
                            myChart2.dispatchAction({
                                type: 'showTip',
                                seriesIndex: 0,
                                dataIndex
                            });
                        }
                    }
                })
                myChart2.getZr().on('mousemove', (params) => {
                    const pointInPixel = [params.offsetX, params.offsetY];
                    // 判断当前鼠标移动的位置是否在图表中
                    if (myChart2.containPixel('grid', pointInPixel)) {
                    const pointInGrid = myChart2.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
                        if(pointInGrid){
                            const xIndex = pointInGrid[0];
                            const op = myChart2.getOption();
                            const xDate = op.xAxis[0].data[xIndex];
                            let xAxisArray = myChart1.getOption().xAxis[0].data
                            const dataIndex = xAxisArray.findIndex(x => x === xDate);
                            myChart1.dispatchAction({
                                type: 'showTip',
                                seriesIndex: 0,
                                dataIndex
                            });
                        }
                    }
                })