echarts给柱状图和x轴文字及整个柱状图（包括没有数据的柱状图）添加点击事件

来源

点击柱状图，这个等级下的标签显示在右侧等级中，当柱状图高度很低不方便点到，这时就衍生出了需求

需求

解决这个问题，有两个解决办法

方式一：给x轴文字添加点击事件 （图中绿色框框区域）
方式二：给柱状图整条柱状区域添加点击事件（图中蓝色框框区域）

方式一实现（给x轴文字添加点击事件 ）

1. 将xAxis的属性triggerEvent 置为 true;

	xAxis: [
	  {
	      type: "category",
	      triggerEvent: true,
	    },
	  ],

2. 添加点击事件（myChart是柱状图表）

myChart.on("click", (params) => {
  if (params.name) {
      //点击柱状图
      console.log(params.name)
    } else {
      //点击x轴文字
      console.log(params.value)
    }
  });

方式二实现（给柱状图整条柱状区域添加点击事件）

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]
	  console.log(xIndex,this.barDataPro[xIndex].levelName)
	}
});

其中，getZr()方法可以监听到整个画布的点击事件，xIndex是被点击的柱形的index

若要实现获取id的效果，则需要拿到series的数组，再通过index拿到对应的数据对象