【ECharts】数据太小,图表点击不到
(之前遇到的问题,现在才贴出来笔记~)
问题:
132数据太小,鼠标移入灰色不能点击,但是数据太小又不好点
解决:
尝试一:平滑函数
1、先尝试了平滑数据。就是把源数据处理成差别不大的数据,传值到value构图:
2、写完发现柱形图顶部和tooltip显示的是value数据,而不是源数据,所以给option配置了一下:
3、上面问题都弄好了,又发现y轴数据不对,因为y轴数据自适应是根据value数据显示的,显然这里不能通过value显示:
发现怎么配置都不行:(1)先用axisLabel自己去显示y轴数据但是发现不能有效对应,失败;
(2)又设置min,max让其自己算刻度尺数据,然而value是处理后的平滑数据,而不是源数据,这样也不行,失败。
搞来搞去发现怎么都不行,于是放弃了平滑函数来达到目的,换了一种思路:点击灰色区域时也执行相应的点击事件。
尝试二:扩大点击范围,既点击灰色区域时也执行相应的点击事件
缺点:性能消耗大,不适合数据多的情况,鉴于此处数据固定只有7条,所以还不会太有影响。
containPixel:API判断点击位置是否在显示图形区域。
convertFromPixel:转换像素坐标值到逻辑坐标系上的点,是convertToPixel的逆运算。比如pointInPixel是[480,120]转换后得到pointInGrid[4,9],4就是X轴坐标,5就是Y轴坐标。
获取点击位置对应序号,还可以以下方法:
在tooltip的formatter函数中,每次调用都记录需要的参数(一般取dataIndex),在回调中使用参数,其获取的序号和convertFromPixel方法获取序号结果一致。
相关参考链接:
1、echarts笔记记录API
https://blog.csdn.net/Niduang/article/details/76639528?locationNum=2&fps=1
2、完美解决echarts的柱状图和折线图的点击非图表图形元素不会触发事件
https://blog.csdn.net/smk108/article/details/78482154/
3、echarts折线图添加区域点击事件,而不用去点小圆点(扩大点击范围)
https://blog.csdn.net/lightpass/article/details/81457410
4、ECharts 点击非图表区域的点击事件不触发问题
https://www.cnblogs.com/qimeng/p/10238485.html
.....还有好多好多参考