echarts两个图表tooltip 联动

完成样式

echarts 配置代码

option = {
  axisPointer: {
    link: [
      {
        xAxisIndex: [0, 1]
      }
    ]
  },
  xAxis: [
    {
      type: 'category',
      data: [
        '一',
        '二',
        '三',
        '四',
        '五',
        '六',
        '七',
        '八',
        '九',
        '十',
        '十一',
        '十二',
        '十三',
        '十四'
      ],

      gridIndex: 0
    },
    {
      type: 'category',
      data: [
        '一',
        '二',
        '三',
        '四',
        '五',
        '六',
        '七',
        '八',
        '九',
        '十',
        '十一',
        '十二',
        '十三',
        '十四'
      ],
     
      axisLabel: {
        fontSize: 14,
        color: '#333333'
      },
      gridIndex: 1
    }
  ],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      shadowStyle: {
        color: 'rgba(0, 0, 0, 0.2)'
      }
    },
   
  },
  grid: [
    {
      top: 100,
      left: 70,
      right: 150,
      bottom: 400
    },
    {
      top: 400,
      left: 70,
      right: 150,
      bottom: 50
    }
  ],
  yAxis: [
    {
      type: 'value',
      gridIndex: 0
    },
    {
      type: 'value',
      gridIndex: 1
    }
  ],
  series: [
    {
      data: [
        120, 200, 120, 200, 150, 80, 70, 110, 1130, 150, 80, 70, 110, 1130
      ],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      xAxisIndex: 0, //使用x轴的索引
      yAxisIndex: 0 //使用y轴的索引
    },
    {
      data: [
        120, 200, 150, 80, 70, 120, 200, 150, 80, 70, 110, 1130, 110, 1130
      ],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      xAxisIndex: 1, //使用x轴的索引
      yAxisIndex: 1 //使用y轴的索引
    }
  ]
};

主要代码就是
xAxisIndex
gridIndex
axisPointer: {
link: [
{
xAxisIndex: [0, 1]
}
]
},