echarts点击事件那点事

前言

在柱状图、折线图、堆叠图、象形图等等，有xy轴的图表中设置点击事件myChart.on('click')去做一些交互操作时，通常都是由刻度的标题去区分点击内容

在实际添加事件中，都需要具体点击到折线图、柱状图…的图形才可触发事件，在一些差值较大的情况下很小的值图形甚至与都不展示或点击不到，还可以通过添加label的形式点击label也可触发，但也局限简单单一的图表

期望的时点击刻度范围内就去触发点击事件完成一些交互

这里就通过echarts实例api-convertFromPixel，设置myChart.getZr().on('click')转换像素坐标值到逻辑坐标系上的点。

具体代码

option = {
   xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
   },
   title: {
      text: '点击折线区间看看',
      right: 'center',
      top: '20',
      textStyle: {
         color: 'red'
      }
   },
   yAxis: [
      {
         type: 'value'
      },
      {
         type: 'value',
         max: 1,
         show: false
      }
   ],
   tooltip: {
      trigger: 'axis'
   },
   series: [
      {
         data: [820, 932, 901, 934, 1290, 1330, 1320],
         type: 'bar',
         smooth: true,
         triggerLineEvent: true,
      },
   ]
};
//! 事件
//! 点击刻度区间内触发
myChart.getZr().on('click', (e) => {
   let xy = [e.offsetX, e.offsetY];
   let IndexTem = myChart.convertFromPixel({ gridIndex: 0 }, xy);

   let xindex = IndexTem[0];
   let yindex = IndexTem[1];
   myChart.setOption({
      title: {
         text: "点击了x-index:" + xindex,
         subtext: 'y-index:' + yindex
      }
   })
})

复制代码到echarts官方编辑器中替换代码查看