智能指针吸附
在图表中,部分可交互元素可能比较小,有时候用户不易准确地进行点击等操作,移动端尤其如此。因此,在 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
的柱状图、散点图等),不会开启吸附功能。