Echarts 多个网格联动坐标轴指示器（axisPointer）

之前写过一篇文章Vue实现ECharts动态渲染多个图表，并可以联动，是绘制多个echart实例，通过实例方法connect联动。

这篇文章是绘制一个实例，通过axisPointer全局坐标指示器设置实现。

option = {
  // 全局axisPointer，通过这里联动
  axisPointer: {
    link: [{
      yAxisIndex: 'all'
    }]
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: params => {
      // 处理tooltip显示
      let html = ''
      html += `<p>${params[0].axisValue}</p>` // 标题
      params.forEach(item => {
        html += `<p>${item.marker}${item.seriesName}：${item.value}</p>`
      })
      return html
    }
  },
  legend: {},
  grid: [{
    width: '67%',
    left: '3%',
    right: 20,
    containLabel: true
  }, {
    width: '30%',
    left: '70%',
    containLabel: true
  }],
  xAxis: [{
    type: 'value',
    geoIndex: 0,
    axisLabel: { show: false }
  }, {
    type: 'value',
    gridIndex: 1,
    axisLabel: { show: false }
  }],
  yAxis: [{
    type: 'category',
    gridIndex: 0,
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'Russian', 'World']
  }, {
    type: 'category',
    gridIndex: 1,
    axisLabel: { show: false },
    axisLine: { show: false },
    axisTick: { show: false },
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'Russian', 'World']
  }],
  series: [
    {
      name: 'A',
      xAxisIndex: 0,
      yAxisIndex: 0,
      type: 'bar',
      label: {
        show: true,
        position: 'right'
      },
      data: [18203, 23489, 29034, 104970, 131744, 143215, 630230]
    },
    {
      name: 'B',
      xAxisIndex: 1,
      yAxisIndex: 1,
      type: 'bar',
      label: {
        show: true,
        position: 'right'
      },
      data: [400, 535, 313, 441, 212, 324, 434]
    }
  ]
}