echarts icon indicating copy to clipboard operation
echarts copied to clipboard

[Bug] 在动画过程中无法获取endLabel的坐标位置[急,急,急]

Open liubin595338764 opened this issue 2 years ago • 10 comments
trafficstars

Version

5.4.2

Link to Minimal Reproduction

https://www.pionex.com/static/media/grid_zhtw.b27dae30.gif

Steps to Reproduce

null

Current Behavior

如图,动画效果我设置了endLabel的圆点,但是动画过程中我无法获取到endLabel的实时位置; 因为我需要根据endLabel的坐标算出横线的位置;

着急,麻烦指点下;

image

Expected Behavior

期望能在endLabel.formatter中能获取到当前的坐标位置;

或者animation动画的每一帧回调上能获取到endLabel的位置也可以。

myChart.getZr().animation.on("frame", function (...arg) {
    console.log(arg);
  });

感谢。

Environment

- OS: mac
- Browser:chrome
- Framework: vue@3

Any additional comments?

No response

liubin595338764 avatar Jun 11 '23 14:06 liubin595338764

@liubin595338764 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

[Bug] The coordinate position of endLabel cannot be obtained during the animation process [urgent, urgent, urgent]

BODY

Version

5.4.2

Link to Minimal Reproduction

https://www.pionex.com/static/media/grid_zhtw.b27dae30.gif

Steps to Reproduce

null

Current Behavior

As shown in the figure, I set the dot of endLabel in the animation effect, but I can't get the real-time position of endLabel during the animation; Because I need to calculate the position of the horizontal line based on the coordinates of endLabel;

Anxious, troublesome pointers;

image ### Expected Behavior

It is expected to get the current coordinate position in endLabel.formatter;

Or the position of endLabel can be obtained on each frame of the animation callback.

myChart.getZr().animation.on("frame", function (... arg) {
    console.log(arg);
  });

Thank.

Environment

- OS: mac
- Browser:chrome
- Framework: vue@3

Any additional comments?

No response

echarts-bot[bot] avatar Jun 11 '23 14:06 echarts-bot[bot]

similar (and maybe duplicate of) #18742

helgasoft avatar Jun 11 '23 17:06 helgasoft

@liubin595338764 你好,我也有类似需求,请问能够提供一下你gif的这个demo参考学习一下吗,感谢

minghangben avatar Jun 12 '23 01:06 minghangben

@helgasoft 还是有些不一样,他是通过scatter来实现的,也没有获取到动画过程中最后一个数据的坐标

liubin595338764 avatar Jun 12 '23 11:06 liubin595338764

@minghangben 这是一个gif,还没有demo

liubin595338764 avatar Jun 12 '23 16:06 liubin595338764

It's not recommended to do things like .getZr().animation.on because this is non-public API and breaks the encapsulation of ECharts. If you wish do make the effect, it's recommended to use a custom series.

Ovilia avatar Jun 13 '23 11:06 Ovilia

@Ovilia请教下有这种例子吗,最好是能在动画过程中获得当前点的坐标数据以及像素位置。需求越来约个性化了

liubin595338764 avatar Jun 13 '23 14:06 liubin595338764

固定不变的话 Lottie就行,每次数据都变的话 要么能动态算lottie 要么。。。你搜一下lineAnimationDiff 这个方法自己试试魔改一下

adoin avatar Jun 14 '23 02:06 adoin

@Ovilia请教下有这种例子吗,最好是能在动画过程中获得当前点的坐标数据以及像素位置。需求越来约个性化了

现在应该没有这个能力,如果你愿意贡献 PR 的话,可以尝试在 https://echarts.apache.org/en/option.html#series-line.endLabel.formatter 的参数中返回位置信息

Ovilia avatar Jun 16 '23 08:06 Ovilia

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

github-actions[bot] avatar Jun 15 '25 21:06 github-actions[bot]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!

github-actions[bot] avatar Jun 23 '25 21:06 github-actions[bot]