初始动画失效

[ChenWeihua123]

Help / 帮助

Replace the [ ] with [x] to check an option. / 将 [ ] 替换为 [x] 以选择对应选项。

The type of this issue / Issue 类型

• Feature request / 新特性需求
• Bug report / Bug 报告

Not introduced by ECharts / 非 ECharts 本身问题

Problems about ECharts itself are not handled in this repo. / 本 repo 不负责处理 ECharts 本身的问题。

• I've checked it's not a problem of ECharts itself. / 我已检查过，这个问题非 ECharts 本身的问题。

Details / 详情

第一次设置 option 后没有初始动画，我看了下源码，原因是 第 151，152行代码

// Make sure the chart fits the container in next UI render (after current task)
nextTick(resize);
setTimeout(resize);

当 echarts 开始做初始动画时，该处紧接着调用了图表的 resize 事件，此时图表还未运行完动画，导致图表初始入场动画失效

Vue version / Vue 版本

• Vue 3
• Vue 2

How are you importing Vue-ECharts? / 你是如何引入 Vue-ECharts 的？

• Importing vue-echarts with a bundler environment / 在 webpack 等打包工具环境下引入 vue-echarts
• Using the global variable by including <script> tags / 通过 <script> 标签引入全局变量

The version of Vue-ECharts you are using / Vue-ECharts 的版本

6.0.0-rc.3

Reproduction link / 复现链接

For bug reports, please provide the steps to reproduce and if possible a minimal demo of the problem. Please paste the link to your CodeSandbox demo below: (Vue 3 template / Vue 2 template)

**对于 Bug 报告，请在下面提供复现的步骤，最好是最小化的能够重现问题的 demo。请在下方贴入在 CodeSandbox 上 demo 的链接：（复现地址)

[g707175425]

同样有此问题

[Justineo]

Currently to handle the problem reported in #518 (charts have a chance to not fit into containers correctly), we are calling resize (twice at different time point) to ensure they perfectly fit into their containers. But calling ECharts' resize during animation will immediately end the animation and render the latest state thus we are failing to see all initial animations.

Actually I think we are in a dilemma that we can't keep both features work in all scenarios. When containers are resized during initial animation, charts with autoresize will have to call resize and stop animations (now we are missing the autoresize check and force resizing all charts, which should be fixed).

I think the potential workaround here is:

1. we only call resize in a microtask, and
2. users provide a updateOptions value of lazyUpdate: true (which only start animation in next animation frame), which can be achieved by setting a corresponding provide option from the app component

... so we'll only start animation after initial resize.

[yang-mengyue]

当前要处理＃518中报告的问题（图表有可能无法正确放入容器中），我们正在致电resize（在不同时间点两次）以确保它们完全适合其容器。但是resize在动画过程中调用ECharts'将立即结束动画并渲染最新状态，因此我们看不到所有初始动画。

实际上，我认为我们处于两难选择，即不能在所有情况下都同时使用两个功能。当在初始动画期间调整容器的大小时，带有的图表autoresize将不得不调用resize和停止动画（现在我们缺少autoresize检查并强制重新调整所有图表的大小，这应该是固定的）。

我认为这里的潜在解决方法是：

1. 我们只调用resize一个微任务，并且
2. 用户提供的updateOptions值lazyUpdate: true（仅在下一个动画帧中开始动画），可以通过provide在应用程序组件中设置相应的选项来实现

...因此，我们将仅在初始调整大小后开始动画。

我也出现了这个问题，初始动画，更新动画都没有了，缓动效果都不生效。解决办法可以具体一些点吗？或者编辑一个demo，我没太明白是什么意思。谢谢您!

[Justineo]

我晚些时候会发一个新版本，折中处理一下这个问题（同时改动也会带来一些风险）：

1. 初始时只在 microtask 里调用一次 resize——可能导致在此后在同一个 task 中 enqueue 的 microtask 中修改容器尺寸导致图表不能正常自适应尺寸；
2. 将 updateOptions.lazyUpdate 默认设置为 true——可能使同步获取图表截图的代码失效。

[Justineo]

Fixed in 6.0.0-rc.5.