智能指针吸附

在图表中,部分可交互元素可能比较小,有时候用户不易准确地进行点击等操作,移动端尤其如此。因此,在 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 上编辑本页

Ovilia Oviliaplainheart plainheart