给Echarts添加点击事件

给Echarts添加点击事件

需求： 给Echarts添加点击事件让柱状图和x轴标签添加点击事件
项目用到了echarts图进行数据展示，但是echarts图只有展示，不够完整，所以需求就要我们添加点击事件

首先加载echarts图，我们已经获取到了图的对象mychart，对此对象进行获取点击事件，这样写：
echarts点击事件里面默认是有一个返回值的，它是一个json对象，里面有很多参数：

myChart.on('click', function (params) {
    console.log(params);
    console.log(params.dataIndex);   //获取点击柱状图的第几个柱子 是从0开始的哦
});

这样就点击柱状图就可以了，但是需求又提出要点击x轴的文本标签事件也需要；那只好再继续添加，最终寻找到一种解决方案：是在xAxis这个集合里面添加参数（triggerEvent）：

xAxis : [{
    type : 'category',
    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
    triggerEvent:true   //让x轴可以点击
}],

这样x轴就可以点击了，但是我们是做功能，所以我们得需要一个参数来帮助我们获取对应得信息，但是echarts这里没有提供存储id参数得位置，只能在外边添加一个数组：（为什么添加一个数组就可以呢，因为我点击柱子和文本的时候是可以获取第一个，进而把第几个演变为数组的下标就可以找到对应的id了呀，因为都是从0开始的，如果从1开始的也不怕是吧！！！）

var ids = [55,66,85,86,55,544,5,6,8,4,88,89];
//这样就可以获取到点击柱子或者文本标签对应的id了
myChart.on('click', function (params) {
    if(params.componentType =="xAxis"){ 
        alert("单击了"+params.value+"x轴标签, 你点击的是第"+(Number(params.event.target.anid.split("_")[1])+1)+"个X标签；当前对应的id为："+ids[params.event.target.anid.split("_")[1]]);
    }else{ 
        alert("单击了"+params.name+"柱状图, 你点击的是第"+(params.dataIndex+1)+"个柱状图；当前对应的id为："+ids[params.dataIndex]);   //数组下标是从0开始的哦，图也是从0开始的
    } 
}); 

转发连接：https://zhuanlan.zhihu.com/p/33050579