阿帕奇ECharts吧动画？

Question

试图使调整大小的条形动画为Apache ECharts演示(链接)工作。

这是Stackblitz -图表代码在hello组件中。。

图表实例是从对此方法的调用中获得的。

  onChartInit(echarts) {
    this.echartsIntance = echarts;
  }

图表上的chartInit事件发射器触发它。

<div
  echarts
  (chartInit)="onChartInit($event)"
  [options]="options"
  class="demo-chart"
></div>

并通过RxJS fromEvent观察窗口调整大小的事件。在构造函数中调用resize()方法：

  resize() {
    fromEvent(window, 'resize')
      .pipe(debounceTime(200))
      .subscribe((e) => {
        console.log('RESIZE');
        if (this.echartsIntance) {
          this.echartsIntance.resize();
        }
      });
  }

当窗口调整大小时，图表条应该是有动画的，但是动画不会发生。有什么想法吗？

Answer 1

在图表标记本身，我们必须添加。

[autoResize]="false"

必须配置resize方法。下面是一个例子：

this.echartsIntance.resize({
  animation: {
     duration: 1500,
     easing: 'elasticOut',
   },
});

这是一个新的工作堆栈闪电战。。