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?
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',
},
});