智能指针吸附
在图表中,一些交互元素可能会相对较小,因此用户有时很难精确地进行点击等操作,特别是在移动端。因此,在 Apache EChartsTM 5.4.0 中,我们引入了“智能指针吸附”的概念。
从该版本开始,ECharts 默认在移动端图表中启用指针吸附,在非移动端图表中禁用该功能。
如果需要在所有平台上启用,可以通过在 init 中将
opt.useCoarsePointer设置为true来实现;设置为false则在所有平台上关闭。
吸附算法
当发生鼠标或触摸事件时,ECharts 会根据鼠标或触摸的位置判断其是否与某个交互元素相交。如果是,则该元素即为交互对象,这与优化前的逻辑相同。如果不是,则在一定范围内寻找距离鼠标或触摸位置最近的元素。
默认范围为 44px(参见 W3C 标准),开发者可以在 init 时通过
opt.pointerSize来设置该值。
具体来说,ECharts 会围绕鼠标或触摸位置,在不同的角度和不同的半径(在 opt.pointerSize 范围内)内进行循环检测,直到找到与之相交的元素。如果找到,该元素就被认为是交互对象。

也就是说,如果一个元素处于鼠标或触摸位置的 opt.pointerSize 半径范围内,那么最近的相交元素将被视为交互对象。
性能
在具体实现上,我们首先会判断鼠标或触摸位置与所有交互元素的 AABB 包围盒的相交情况,从而快速排除大部分不相交的元素。然后,我们对剩余的元素进行精确的路径相交判定。因此,从用户体验的角度来看,几乎感觉不到任何性能损失。
对于拥有大规模数据的图表系列(即启用了 large: true 的柱状图、散点图等),将不会启用吸附功能。