Confirmation

[X] I can confirm this problem is not reproducible with ECharts itself.

How are you introducing Vue-ECharts into your project?

ES Module imports

Versions

Also tested on latest 6.6.9

Details

Issue

I've placed the v-chart element in a flex element inside a resizable container then I resize the element without resizing the entire window.

Expected behaviors

The element should correctly resize

Current behavior

It only resizes horizontally and only on vertical expansion BUT if I shrink the resizable element the chart overflows.

Additional info

Your doc states the following about the "autoresize" prop:

Whether the chart should be resized automatically whenever its root is resized. Use the options object to specify a custom throttle delay (in milliseconds) and/or an extra resize callback function.

Focus on the "whenever its root is resized". While looking at the source code I've found the next line instead:

useAutoresize(chart, autoresize, inner);

And noticed that this line has been changed from:

useAutoresize(chart, autoresize, root);

Commit sha: 82a098c4165398f0944a2df436d9f11ab993329a

Tests

I've cloned the repo and tried to only revert that line back to using "root" instead of "inner" and it started working back again.

I've then create a reproduction repository in which I've simulated the resizable element, then I've added a flex wrapper and in the end I've added the chart component. You can see that after increasing the height once you try to decrease it the chart doesn't resize as expected. But if you remove the flex element it works fine.

Unfortunally in my app I have different layers of flex divs and cards and removing them is not something I would like to do...

A simple workaround that I've found is to manually resize the chart every time the root element resizes.

Conclusion

I'm not sure if that's a bug or something that is expected to work like that... What's your thought? Should you expose a way to change the observed element to properly resize the chart? How should we deal with that issue?

Reproduction

https://codesandbox.io/s/billowing-star-9djj2s?file=/src/App.vue

ecomfe / vue-echarts

autoresize prop doesn't work as expected from 6.6.1 #777