| (window.webpackJsonp=window.webpackJsonp||[]).push([[133],{431:function(n,t,e){"use strict";e.r(t),t.default='# 智能指针吸附\n\n在图表中，部分可交互元素可能比较小，有时候用户不易准确地进行点击等操作，移动端尤其如此。因此，在 Apache ECharts<sup>TM</sup> 5.4.0 中，我们引入了“智能指针吸附”的概念。\n\n从该版本起，在默认情况下，ECharts 对移动端的图表开启指针吸附，对非移动端的图表关闭。\n\n> 如果需要对所有平台都开启，则可以通过在 [init](${mainSitePath}api.html#echarts.init) 的时候将 `opt.useCoarsePointer` 设置为 `true` 来实现；设为 `false` 则对所有平台都关闭。\n\n## 吸附原理\n\n在鼠标或触摸事件发生时，ECharts 会根据鼠标或触摸的位置，判断是否和某个可交互元素相交。如果是，则认为该元素是交互对象（与优化前的逻辑一致）；如果不是，则在一定范围内找到最接近鼠标或触摸位置的一个元素。\n\n> 默认的范围是 44px（参见 [W3C 标准](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)），开发者可在 [init](${mainSitePath}api.html#echarts.init) 的时候，通过 `opt.pointerSize` 设置该值。\n\n更具体地说，ECharts 会在鼠标或触摸位置的周围，依次循环不同角度和不同半径（在 `opt.pointerSize` 范围内），直到找到一个元素与其相交。如果找到了，则认为该元素是交互对象。\n\n<img width="100%" height="100%" style="max-width: 441px"\nsrc="images/how-to/coarse-pointer-zh.gif">\n</img>\n\n也就是说，如果有元素在鼠标或触摸位置的 `opt.pointerSize` 半径范围内，则最靠近的可交互元素会被认为是交互对象。\n\n## 性能分析\n\n在实际算法实现的时候，我们首先将鼠标或触摸位置与所有可交互元素的 AABB 包围盒判断相交性，从而快速剔除了大部分不相交的元素。然后，我们再对剩余的元素进行精确的路径相交判断。因此，从用户体验角度，不会带来可感知的性能损耗。\n\n对于大规模数据的图表系列（也就是开启了 `large: true` 的柱状图、散点图等），不会开启吸附功能。\n'}}]); |