【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

.....还有好多好多参考