智能指针吸附
在图表中,一些交互元素可能相对较小,因此有时用户难以准确点击并进行其他操作,尤其是在移动设备上。因此,在 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
的柱状图、散点图等),将不会启用吸附。