apache / apache/echarts

Drilldown animation is stuck if chart.resize is called during the animation

Open
#16,705 4 comments 1 reaction 0 assignees View on GitHub
bug en waiting-for: community
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.3.1

### Link to Minimal Reproduction

_No response_

### Steps to Reproduce

1. Go to https://echarts.apache.org/examples/en/editor.html?c=bar-drilldown
2. Change animationDurationUpdate setting to 10 seconds (10000) (this is only so it is possible to easily reproduce the issue by manually resizing while the chart is animating).
3. At the end of the existing code, add the following

```js
const resizer = new ResizeObserver((entries) => {
console.debug('chart resized');
myChart.resize()
});
resizer.observe(document.getElementById('chart-panel'));
```
4. Now click on any bar and as the animation is happening resize the window.

### Current Behavior

The chart gets stuck with the intermediate animated positions.

### Expected Behavior

I tried this for bar racing charts also and there it doesn't seem to happen. However, that could be because there is a separate thread that is also continuously updating the chart with new data.

### Environment

```markdown
- OS:
- Browser:
- Framework:
```

### Any additional comments?

It seems like the chart.resize shouldn't be executed (or may be queued) till the animation is complete. I experimented by explicitly tracking whether the animation is going on or not (by listening to the 'finished' event) and not calling the resize and it seems to work. It would be good to have this available from this wonderful framework itself.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.