Apache ECharts柱状图窗口resize动画失效问题求助

• 显式为resize方法传入动画配置
  默认调用resize()不会触发过渡动画，需要在调用时指定动画参数，和目标示例的动画配置保持一致：

this.echartsIntance.resize({
  animation: {
    duration: 300,
    easing: 'cubicOut'
  }
});

• 确保图表基础动画配置开启
  检查你的options配置，确认全局动画未被手动关闭：

options = {
  animation: true, // 默认开启，若之前手动关闭需重新打开
  // 其他图表配置项...
};

• 优化resize事件订阅逻辑
  当前的resize方法每次调用都会创建新的订阅，建议在组件初始化时订阅，并在销毁时取消，避免内存泄漏：

import { Subscription } from 'rxjs';

// 组件类内添加属性
private resizeSub: Subscription;

ngOnInit() {
  this.resizeSub = fromEvent(window, 'resize')
    .pipe(debounceTime(200))
    .subscribe(() => {
      if (this.echartsIntance) {
        this.echartsIntance.resize({
          animation: { duration: 300, easing: 'cubicOut' }
        });
      }
    });
}

ngOnDestroy() {
  this.resizeSub?.unsubscribe();
}

• 确认容器样式为响应式
  确保图表容器的CSS样式支持自适应尺寸，比如：

.demo-chart {
  width: 100%;
  height: 400px;
}

只有容器尺寸随窗口变化时，ECharts的resize操作才能正确触发动画。

内容的提问来源于stack exchange，提问作者Ole