智能指针吸附
在图表中,有些可交互的元素可能会比较小,导致用户,尤其是在移动端上,难以准确地点击或进行其他操作。因此,在 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
的柱状图、散点图等)的图表系列,吸附功能不会被启用。