danieltian opened a new issue #11865: Add an event to tell when an axis pointer has changed on a line chart URL: https://github.com/apache/incubator-echarts/issues/11865 ### What problem does this feature solve? In GitLab UI, we are using a line chart with a padding and a custom tooltip instead of the one built into ECharts: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-sparkline-chart--default Because there's no event that tells us when the axis pointer has changed, we are doing the following as a workaround in order to show our custom tooltip: 1. Show the custom tooltip on `mouseenter` when the mouse enters the EChart. 2. Hide the custom tooltip on `mouseleave` when the mouse leaves the EChart. We need to do this because there's currently no way to tell when the axis pointer is no longer visible. 3. Use `xAxis.axisPointer.label.formatter` to detect when the axis pointer has changed in order to update the tooltip contents. Because the formatter is called each time the axis pointer changes, we are using it to format and position our custom tooltip, even though this is not its intended purpose. However, the formatter function is only called when the axis pointer is first displayed or changed, but not when it's removed, so we need to use #2 in order to hide our tooltip. This leads to a problem which I've documented in this GitLab UI merge request (with videos showing the behavior): https://gitlab.com/gitlab-org/gitlab-ui/merge_requests/959 In short, because the chart uses padding, there's a small gap in between when the `mouseenter` fires because it's entered the chart, but it's not close enough to the line for the axis pointer to display. This is causing an empty tooltip to display, as well as other issues related to tooltip positioning (please refer to the videos). In the MR, we fix the issue by showing the tooltip in `xAxis.axisPointer.label.formatter` instead of `mouseenter`, but this is also a workaround for not having the ability to directly tell when an axis pointer is visible. Internally in ECharts, there's an `updateAxisPointer event: https://github.com/apache/incubator-echarts/blob/fcf80fef1727101947b49a5f722fd4f494f6212b/src/component/axisPointer.js#L59-L63 But this event is undocumented and will fire on `mousemove`, which can cause performance issues if we hook into it because it will fire for every mouse movement, even if the axis pointer did not change. We'd like to propose adding an `axisPointerChange` event that will directly inform us when the axis pointer has changed so that we don't have to use workarounds to infer it. ### What does the proposed API look like? ``` chartInstance.on('axisPointerChange', (e) => { if (e.data) { showCustomTooltip(e.data); } else { hideCustomTooltip(); } }) ``` where `e == { data: [xVal, yVal] }` when the axis pointer is visible or has changed to another point, and `e == { data: undefined }` when the axis pointer is no longer visible. <!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE --> <!-- This issue is in English. DO NOT REMOVE -->
---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] With regards, Apache Git Services --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
