Intelligent Pointer Snapping
Some interactive elements may be relatively small in charts, so sometimes it is difficult for users to click and do other operations accurately, especially on the mobile. Therefore, in Apache EChartsTM 5.4.0, we introduced the concept of "intelligent pointer snapping".
Starting from this version, by default, ECharts enables pointer snapping for mobile charts and disables it for non-mobile charts.
If it needs to be enabled for all platforms, it can be achieved by setting
truein init; set to
falseis turned off for all platforms.
When a mouse or touch event occurs, ECharts will determine whether it is intersecting with an interactive element based on the position of the mouse or touch. If it is, the element is the object to be interacted with, which is the same logic before this optimization. If not, find an element that is closest to the mouse or touch position within a certain range.
More specifically, ECharts will loop through different angles and different radii (within
opt.pointerSize) around the mouse or touch position until it finds an element that intersects it. If found, the element is considered to be the interactive object.
That is, if an element is within the
opt.pointerSize radius of the mouse or touch position, the closest intersected element is considered the interactive object.
As for the implementation, we first judge the intersection between the mouse or touch position and the AABB bounding box of all interactive elements, so as to quickly eliminate most of the elements that is not intersecting. Then, we perform an accurate path intersection judgment on the remaining elements. Therefore, from the perspective of user experience, there is hardly any perceivable performance loss.
For chart series with large-scale data (that is, bar charts, scatter charts, etc. with
large: true enabled), the snapping will not be enabled.