Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] Resizing cancels option transitions #17092

Open
MaJaHa95 opened this issue May 24, 2022 · 3 comments
Open

[Bug] Resizing cancels option transitions #17092

MaJaHa95 opened this issue May 24, 2022 · 3 comments
Labels
bug en This issue is in English pending We are not sure about whether this is a bug/new feature. stale Inactive for a long time. Will be closed in 7 days. waiting-for: community

Comments

@MaJaHa95
Copy link

MaJaHa95 commented May 24, 2022

Version

5.3.2

Link to Minimal Reproduction

https://jsfiddle.net/rt7xpbzj/

Steps to Reproduce

  1. Create a chart using any options.
  2. Call setOption and pass new options which include a transition period.
  3. Before the transition completes, call resize against the chart.

Current Behavior

The transition stops in its tracks, leaving items misshapen.

Here's a screenshot of the finished state from my jsfiddle:

image

Expected Behavior

Ideally, I'd like to be able to see these operations animate together. But anything where the chart isn't left in a corrupt state would work!

Environment

- Browser: Edge 101.0.1210.32

Any additional comments?

I'm working in a project where a particular chart needs to be able to transition between horizontal bar and pie types. And during that transition, the size of the element also needs to change: the horizontal bar chart should only be as tall as it needs to be to comfortably fit fixed-width bars, and the pie chart should have a constant size.

Because I happen to be using Angular for the project, I don't have good control over the order in which changes get detected. I'm resizing the chart element dynamically based on the type of chart being shown, and effectively responding to those changes in size using a ResizeObserver that calls chart.resize() (I'm using auto sizing, despite my attached repro passing values in), but as I was working to introduce animated transitions, I found charts were left incomplete.

So far, I've come up with a somewhat-viable workaround that listens any time the container element resizes, and only calls chart.resize() after the finished event has been triggered. I think it's okay--it seems to work--but it feels pretty hacky, and it looks much choppier than if the transitions could occur simultaneously.

@MaJaHa95 MaJaHa95 added the bug label May 24, 2022
@echarts-bot echarts-bot bot added en This issue is in English pending We are not sure about whether this is a bug/new feature. waiting-for: community labels May 24, 2022
@MaJaHa95
Copy link
Author

MaJaHa95 commented May 24, 2022

This seems a bit related to #14846, but I'm not getting an error, and that was fixed anyway.

@kitee0325
Copy link

it seems to be expected,resize will reset all state, maybe you can try to disable any animations caused by action during resize

Copy link
Contributor

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 github-actions bot added the stale Inactive for a long time. Will be closed in 7 days. label May 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug en This issue is in English pending We are not sure about whether this is a bug/new feature. stale Inactive for a long time. Will be closed in 7 days. waiting-for: community
Projects
None yet
Development

No branches or pull requests

2 participants