echarts柱状图区域点击事件

~~需求：点击柱状图后，相应加载页面内容~~

1. 只能点击数据不为0的区域

myChart.on('click',function(params){
    var name = params.name
    var seriesType = params.seriesType
    console.log(name+"\n"+seriesType)
    console.log(params)
  })

2. 所有区域均可点击

// getZr()方法可以监听到整个画布的点击事件
// 避免点击事件重复执行，很重要
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 xData = myChart.getOption().xAxis[0].data[xIndex]
      let yData = myChart.getOption().series[0].data[xIndex]
      console.log(xIndex, xData,  yData)
    }
  })

可点击区域手势变化：

myChart.getZr().on('mousemove',function (params) {
      var pointInPixel= [params.offsetX, params.offsetY]
      if (myChart.containPixel('grid',pointInPixel)) {
        myChart.getZr().setCursorStyle('pointer')
      }
  }),
  myChart.on('mouseout', function (params) {
      var pointInPixel= [params.offsetX, params.offsetY]
      if (!myChart.containPixel('grid',pointInPixel)) {
        myChart.getZr().setCursorStyle('default')
      }
  })