智能指针吸附

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

贡献者 在 GitHub 上编辑此页

Oviliaplainheart