设置echarts图表(饼图，折线图，柱状图)点击事件

一. 概述

vue+echarts 开发环境，echarts API提供默认了点击事件，但是有一些需求，要求我们改良一下点击事件。

比如：柱状图，默认事件只有点击图表柱子，才可以触发点击事件。有时候数据比较小，柱子不容易点击，但是我们还想看点击后的效果，只能扩大触发点击区域的方法。

 this.line = this.$echarts.init(document.getElementById(this.lineId), null, 'svg')
 this.line.getZr().on('click', (params) => {
     let pointInPixel = [params.offsetX, params.offsetY]
     if (this.line.containPixel('grid', pointInPixel)) {
         let pointInGrid = this.line.convertFromPixel({ seriesIndex: 0 }, pointInPixel)
         let xIndex = pointInGrid[[0]]
         let op = this.line.getOption()
         let xValue = op.xAxis[0].data[xIndex]
         this.$emit('onDetail', xValue)
     }
 })