echarts折线图如何点击区域取到对应数据的一个想法

说点题外话，当初选用绘图工具，在echarts和highcharts直接犹豫了很久，最后echarts的颜值诱惑了我~

 

echarts和highcharts最大的区别可能就是，echarts很多方法都是自身提供的，添加新的方法不是很方便。

 

就在几天之前，产品提出一个需求项目需要绘制一个折线图，当用户点击折线图具体某一象的时候，根据所得key绘制当前项更详细数据的拼图，说直白写就是根据折线图某个点绘制下一个图，当时接到这个需求时，第一想法是这需求简单，直接使用

myChart.on("click", eConsole);不就搞定了吗？

 

用户点击

到这一步的时候发现一个坑，

只有用户点击到点的时候才能拿到返回数据！

只有用户点击到点的时候才能拿到返回数据！

只有用户点击到点的时候才能拿到返回数据！

 

重要的事情说三遍。。这个交互真的是反人类

 

 点击遮罩层区域是不会触发ehcart的click，好了原因就说道这里 说说解决办法

 

 

假设echarts有个容器 就暂叫 chartsBox

 如果我们把click事件加在chartsBox 就可以抓捕到用户行为，在用户点击到对应图表位置时，会触发echarts自带的

tooltip，那我们是不是可以使用tooltip中的formatter：fuc(params){}把需要的key值吐出去

 

我这里是存进了sessionStorage，在需要的时候通过getItem获取。

 

好了本文就到这里~