archive-gh-me/echarts-for-react
1
0
Fork 0
mirror of https://github.com/hustcc/echarts-for-react.git synced 2025-12-08 20:16:09 +00:00
Code Issues Projects Releases Wiki Activity

Fix animations being cancelled by initial render resize (#458)

Browse Source 
This change fixes the issue where echarts animations are cancelled because there is a resize() call that occurs directly after the initial render.
This commit is contained in:
Mo Beigi 2021-10-28 13:28:51 +11:00 committed by GitHub
parent e261fd8ecb
commit 4748dda3c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/core.tsx
View File

@ -15,6 +15,11 @@ export default class EChartsReactCore extends PureComponent<EChartsReactProps> {
*/
public ele: HTMLElement;
/**
* if this is the first time we are resizing
*/
private isInitialResize: boolean;
/**
* echarts library entry
*/
@ -25,6 +30,7 @@ export default class EChartsReactCore extends PureComponent<EChartsReactProps> {
this.echarts = props.echarts;
this.ele = null;
this.isInitialResize = true;
}
componentDidMount() {
@ -63,16 +69,12 @@ export default class EChartsReactCore extends PureComponent<EChartsReactProps> {
return;
}
const echartsInstance = this.updateEChartsOption();
this.updateEChartsOption();
/**
* when style or class name updated, change size.
*/
if (!isEqual(prevProps.style, this.props.style) || !isEqual(prevProps.className, this.props.className)) {
try {
echartsInstance.resize();
} catch (e) {
console.warn(e);
}
this.resize();
}
}
@ -122,11 +124,7 @@ export default class EChartsReactCore extends PureComponent<EChartsReactProps> {
// 4. on resize
if (this.ele) {
bind(this.ele, () => {
try {
echartsInstance.resize();
} catch (e) {
console.warn(e);
}
this.resize();
});
}
}
@ -167,6 +165,27 @@ export default class EChartsReactCore extends PureComponent<EChartsReactProps> {
return echartInstance;
}
/**
* resize wrapper
*/
private resize() {
// 1. get the echarts object
const echartsInstance = this.getEchartsInstance();
// 2. call echarts instance resize if not the initial resize
// resize should not happen on first render as it will cancel initial echarts animations
if (!this.isInitialResize) {
try {
echartsInstance.resize();
} catch (e) {
console.warn(e);
}
}
// 3. update variable for future calls
this.isInitialResize = false;
}
render(): JSX.Element {
const { style, className = '' } = this.props;
// default height = 300