Echarts设置点击事件

通常在使用Echarts画图之后会碰到一个需求，通过点击生成后图形具体某一项来传递相应的参数然后进行一个页面的跳转，当我遇到这个需求第一就想到了用on绑定点击事件的方法，然后就在代码上进行尝试，果然可以实现这个功能，我在这块展示的是一个柱状图，通过点击事件输出一下获取的参数可以得到什么结果呢？
代码如下：

myChart.on('click',function(params){
	console.log(params);
});

我们通过点击柱状图的每一项可以看到输出了如下对应项的详细信息：

在这块我点击了8月份降水量，可以看到这块输出了，这一栏所对应的信息，包括名称seriesName：降水量，以及data值182.2，还以一些其他的信息，同样点击其他的也可以输出对应信息，这样我们就可以进行点击跳转并且传递对应的参数就ok了，这也是我首先想到的方法。

---

但是这个方法有一个不友好的地方就是只有用户点击到柱状图上它才会触发到这个点击事件，比如图中的一月份对应的数值就特别小，点击那一列的其他位置是没有作用的，只有点击阴影部分才触发，只一点对于用户来说就非常不友好，因此我找到了另外一种方法实现这个需求，通过点击所在值的这一列就会触发，实现代码如下：

myChart.getZr().on('click',function(params){
	let point=[params.offsetX,params.offsetY];
	if(myChart.containPixel('gird',point)){
		let xIndex=myChart.convertFromPixel({seriesIndex:0},
              point)[0];
	    let op=myChart.getOption();
	    let name=op.xAxis[0].data[xIndex];
	}
})

这部分的代码可以实现点击某一列就能触发这个事件，主要的信息集中在op这个变量中，name变量是点击某一列对应的名称，使用时可以将这个变量打印出来然后选择所需要传递的参数，其实这个代码是通过鼠标点击图形的坐标来进行判断点击的位置属于哪一列，从而实现这个需求，在这块我在写的时候碰到一个问题，有一个图形点击一次总是触发两次这个函数，如果你也出现了这个问题可以通过在绑定事件之前加上一句代码。

myChart.getZr().off('click');