echarts 监听点击柱状图

echart监听柱状图（包含阴影部分）

html代码

 <div class="box-echart" style="height:35vh;width:100%;">
   <v-chart
       v-if="isShowChart"
       class="echart"
       style="height:35vh;width:100%"
       :autoresize="true"
       :loading="echartloading"
       :option="echartOption"
       ref="echartsRef" />
</div>

js部分代码

 var colorList =  ['rgba(46, 199, 201, 1)', 'rgba(182, 162, 222, 1)',
  '#5ab1ef', '#769fcd', '#f08a5d','#66c6ba','#f38181'];
mounted(){
    //给柱状图添加点击事件\
    this.$nextTick(() =>{
      setTimeout(()=>{
        let echartDom = document.querySelector(".box-container"+ ' .box-echart'+ " .echart");
        let myChart = echarts.getInstanceByDom(echartDom);
        myChart.getZr().off('click'); //触发点击事件前先关闭点击事件 防止多次触发点击事件
        myChart.getZr().on('click',(params) =>{
          //点击整条柱状图都能触发点击事件，包含非数据部分
          let pointInPixel = [params.offsetX, params.offsetY];
          if (myChart.containPixel('grid', pointInPixel)) {
            // 获取柱状图的下标,以柱状图数据
            let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0];
            let data = this.echartOption.series[0].data[xIndex];
          }
        });

      },1000);

    });

  },
 echartOption: {
     title: {
         text: 'title',
         left: 'center', //标题的位置 默认是left，其余还有center、right属性
     },
     tooltip: {
       trigger: 'axis',
       axisPointer:{
        type: 'shadow',
        },
       formatter: params => {
            var relVal = ''
            for (var i = 0, l = params.length; i < l; i++) {
              relVal += params[i].marker + params[0].name + ' : ' + params[i].value + '条'
            }
            return relVal
          }
        },
    grid: {
       left: '5%',
       top: '15%',
       right: '5%',
       bottom: '22%',
       containLabel: true
        },
   dataZoom: [
      {
        type: 'slider',
        show: true,
        startValue:0, //数据窗口范围的起始数值
        endValue:10, //数据窗口范围的结束数值。
     },

     ],
   toolbox: {
     feature: {
            saveAsImage: {}
      }
      },
   xAxis: {
      type: 'category',
      data: []
     },
   yAxis: {
      type: 'value',
     },
   series: [{
      data: [],
      // barWidth: 50,
      barMaxWidth: '50',
      type: 'bar',
      itemStyle: {
         normal: {
         color: function(params) {
                //循环调用
                return colorList[params.dataIndex%colorList.length]
              },
            }
          },
        }
        ]
      },