Data Transition Animations not working in 1.2.0

[robertgz]

Description

Thank you for developing React Echarts.

I think there is an issue with the Transition Animations not working correctly starting in version 1.2.0.

When the data updates I expect to chart to transition from the old data to the new in a smooth way. However the chart changes to show the new data without a transition.

Link to Reproduction

https://stackblitz.com/edit/stackblitz-starters-dvhap9?file=package.json,app%2Fpage.tsx

Steps to reproduce

View the chart without transitions working for a pie chart with version 1.2.0

1. Go to the link above
2. Wait for the setup to finish and the preview to load and observe chart change every few seconds.

To verify that the transitions were working in version 1.1.0 either use the link further down or:

3. In Stackblitz switch to the package.json file.
4. Change the version on line 12 from "1.2.0" to"1.1.0".
5. In the Stackblitz terminal at the bottom stop the running command with crtl + c.
6. Restart the previous command in the terminal which was npm install && npx next dev

View the smooth transitions working with version 1.1.0

1. Go to https://stackblitz.com/edit/stackblitz-starters-5bpwrw?file=package.json,app%2Fpage.tsx
2. Wait for the setup to finish and the preview to load.

JS Framework

Next.js 13 (TS)

Version

1.2.0

Browser

Google Chrome 126

Operating System

• [ ] macOS
• [X] Windows
• [ ] Linux

Additional Information

I first noticed this issue when updating to version 1.2.0 and using a bar chart with data that updates multiple times. The transitions were working correctly in version 1.1.0

[hugocxl]

@robertgz it seems like you forgot to add the animation={true} prop in order for that to work as you expect. I checked it on your example and transitions properly.

[robertgz]

@hugocxl Thank you for the response and for looking into this. I can confirm that adding animation={true} to the Stackblitz that was using version 1.2.0 does show the transitions correctly.

I transferred the Stackblitz code to my project and was able to get it to show the transitions correctly also. However a bar chart in my project did not show the transitions correctly when adding animation={true}, so I did some more testing.

What I observe is that the transition animations work for pie charts but not bar or line charts in version 1.2.0. They do work in 1.1.0.

I derived two more Stackblitz's from the others where I have a bar, line, and pie chart in the same place.

For the Stackblitz using version 1.2.0 I set animation={true}. https://stackblitz.com/edit/stackblitz-starters-b4kico?file=package.json,app%2Fpage.tsx What I see is that only the pie chart shows the transition animations but not the bar or line.

For the Stackblitz using version 1.1.0 I set animation={false}, to see if it had any effect. https://stackblitz.com/edit/stackblitz-starters-rswpjq?file=package.json,app%2Fpage.tsx What I see is that the bar, line, and pie charts all show the transition animations even when animation is set to false.

Is there an additional setting that I need to add for the transition animations to work for bar charts when using 1.2.0?

[hugocxl]

@robertgz you just need to pass down:

animation={true}
animationDurationUpdate={200}

In v1.1.0 and previous versions some default values where causing other issues while transitioning animations. For v1.2.0 the default duration update is undefined (as well as any other non declared prop), you need to explicitly specify that in the config.

Hope that help!

[282159468]

i think set default values, same as echarts is set default values.

[robertgz]

Thank you @hugocxl, setting the animationDurationUpdate causes the transition animations in bar charts to work for me in v1.2.0!