Apache ECharts bar animation?

Question

Trying to get resize bar animation working on for the Apache ECharts demo (Link) .

This is the Stackblitz - The chart code is in the hello component..

The chart instance is obtained from a call to this method.

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

The chartInit event emitter on the chart triggers it.

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

And the window resize events are observed via RxJS fromEvent. The resize() method is called in the constructor:

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

When the window resizes the chart bars should animate however the animation does not occur. Any ideas?

Answer 1

On the chart markup itself we have to add.

[autoResize]="false"

And the resize method must be configured. Here's an example:

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

This is a new working stackblitz.