echarts区域的点击事件

通常在使用Echarts画图之后会碰到一个需求，通过点击生成后图形具体某一项来传递相应的参数然后来进行新的操作，如下图，需求是点击图一某一点时，得到数据生成图二的图标（电力行业的相位图）

当我遇到这个需求第一就想到了echarts的点击事件，然后就在代码上进行尝试

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

于是就发现了下面的问题，只有点击圆点的地方才会触发click事件（爱是一道光，绿的让人发慌。）这种方法当然不适用我的需求。

接下来从网上找到第二种方法

myChart.getZr().on("click", function(params) {
		const pointInPixel = [params.offsetX, params.offsetY];
		  if (myChart.containPixel('grid',pointInPixel)) {
			 let index = myChart.convertFromPixel({seriesIndex:0},pointInPixel)[0];
			 ...你的代码...
		}
	});

上面代码是对整个图表的点击事件进行监听，通过点的坐标来找到数组下标，果然好用，这次点击图表中的任何地方都可以触发事件了，但是这种情况貌似只适合xAxis的type是category的，我的图表xAxis的type是time，得到的index是个时间戳，紧接着我将时间戳转化为date，而且时间精确程度太高，就是说那么大一片区域，我想点固定的12:00:00那一刻，可能我会点到12:00:00:259。这样就会产生点好几次才会点中一次的问题，使用效果很不好。

重点来了
这时候我有了新的思路，就是图中的tooltip，每次都去找鼠标前和或鼠标后的地方，我要是能给这个tooltip加上onclick，我的事情不就解决了吗，于是我试了一下。可以在这里体验一下 链接： https://gallery.echartsjs.com/editor.html?c=x-qhA_u9yY

 tooltip: {
        trigger: 'axis',
        label: {
            show: true
        }
    },
    改为下面
     tooltip: {
        trigger: 'axis',
        formatter: function(e) {
            console.log(e);
        },
        triggerOn: 'click'

    },

这时候点哪里都可以，也可以查到值，终于解决了我的问题。最后附一张完成图