echarts处理区域点击

echart默认的点击事件只能通过点击图形触发，比如柱状图，只有点击柱子才会触发，如果数据相差较大，有些柱子非常小，这时候叫用户去点击柱子，体验明显是不好的，更难受的是折线图，想关联点击事件鼠标得移动到那根线上。

所以就需要处理echart的区域点击，点击对应区域就能触发点击事件。

先画个柱状图：

   function draw() {
      const myChart = echarts.init(document.getElementById('box'))
      myChart.setOption({
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['a', 'b', 'c', 'd']
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '10%']
        },
        series: [
          {
            type: 'bar',
            barWidth: '25%',
            barMinHeight: 3,
            itemStyle: {
              color: '#5EADFF'
            },
            label: {
              show: true,
              position: [5, -16],
              formatter: '{b}',
              color: '#666666'
            },
            data: [10,20,30,40]
          }
        ]
      })
    }
    draw()

效果：

image.png

默认的点击事件是这样的：

myChart.on('click', function (param) {
  console.log(param)
})

这个事件需要点击具体图形才会触发，例如我上面的图，想选择a柱子，就需要明确点击到柱体才行，明显不符合正常的预期，正常预期应该是：

image.png

点击整个a柱子对应的区域都会触发点击事件，且能对应上a柱子所代表的数据

想要实现这一效果首先要监听echarts全图的点击事件，echarts有个api，但官方文档并没有写:

echartsInstance.getZr()

这个方法获取echart实例全图
然后通过监听全图的点击事件来实现区域点击：

// echart全图点击事件
myChart.getZr().on('click', function (param) {
  // 获取 点击的 触发点像素坐标
  const pointInPixel = [param.offsetX, param.offsetY]
  // 判断给定的点是否在指定的坐标系或者系列上
  if (myChart.containPixel('grid', pointInPixel)) {
    // 获取到点击的 x轴 下标  转换为逻辑坐标
    const xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0]
    console.log(xIndex)
  }
})

这里用到了一个方法：convertFromPixel，这个方法就是将像素坐标值转化为逻辑坐标值：

image.png

通过 echartsInstance.getZr() 和 convertFromPixel就可以拿到点击区域对应的数据。

既然每个区域都可以点击，那么为了更好的体验，鼠标移动图中设置一下鼠标样式：

// echart全图移入鼠标事件
myChart.getZr().on('mousemove', function (params) {
  const pointInPixel = [params.offsetX, params.offsetY]
  if (myChart.containPixel('grid', pointInPixel)) {
    // 将此区域的 鼠标样式变为 小手
    myChart.getZr().setCursorStyle('pointer')
  }
})

上面两段代码都做了一次判断，使用containPixel判断点击位置是否在坐标系内：

image.png

grid就是常见的直角坐标系，如果不加这个判断，就会出现下图所圈区域也触发点击的情况：

image.png