echarts中柱状图和折线图点击事件处理

  • this.chart.on('click') 这样的处理事件方法，只有点击到X坐标轴和 对应的item才会触发，当柱状图很小的时候点击很不好捕捉；
  • 采用了 this.chart.getZr().on('click'）来实现，可以满足点击坐标轴、图形、和hover shadow 区域都可以准备的触发捕捉；
  • 参考代码： ```javascript // 点击 图表对外 触发事件(对外告诉点击的是第几个)

this.chartKey.getZr().off(‘click’) this.chartKey.getZr().on(‘click’, params => { const { topTarget, offsetX, offsetY } = params // 点击 x 轴 if (topTarget && topTarget.anid && topTarget.anid !== ‘ticksundefined’) { const arr = topTarget.anid.split(‘‘) const labelIndex = arr[1] this.$emit(‘clickBarItem’, Number(labelIndex)) }

// 点击 图形 const pointInPixel = [offsetX, offsetY] if (this.chartKey.containPixel(‘grid’, pointInPixel)) { let labelIndex = this.chartKey.convertFromPixel({ seriesIndex: 0 }, [offsetX, offsetY])[0] this.$emit(‘clickBarItem’, labelIndex) } }) ```