From 6bb113e642ec947046f88401717f5c89f29f0969 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E5=A4=9A=E7=9B=8A?= <wuduoyi@baidu.com>
Date: Wed, 6 Apr 2022 13:53:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20ECharts=20=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E5=8A=A0=E8=BD=BD=E5=A4=AA=E5=BF=AB=E6=97=B6=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93=E6=8A=A5=E9=94=99=E9=97=AE=E9=A2=98=20(#3950)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 修复 ECharts 数据加载太快时渲染报错问题

* 补上 cancel
---
 src/renderers/Chart.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/renderers/Chart.tsx b/src/renderers/Chart.tsx
index 0cefe68a2..5079a2987 100644
--- a/src/renderers/Chart.tsx
+++ b/src/renderers/Chart.tsx
@@ -30,6 +30,7 @@ import {
 } from '../Schema';
 import {ActionSchema} from './Action';
 import {isAlive} from 'mobx-state-tree';
+import debounce from 'lodash/debounce';
 
 /**
  * Chart 图表渲染器。
@@ -180,6 +181,7 @@ export class Chart extends React.Component<ChartProps> {
 
     this.refFn = this.refFn.bind(this);
     this.reload = this.reload.bind(this);
+    this.reloadEcharts = debounce(this.reloadEcharts.bind(this), 300); //过于频繁更新 ECharts 会报错
     this.handleClick = this.handleClick.bind(this);
     this.mounted = true;
 
@@ -225,6 +227,7 @@ export class Chart extends React.Component<ChartProps> {
 
   componentWillUnmount() {
     this.mounted = false;
+    (this.reloadEcharts as any).cancel();
     clearTimeout(this.timer);
   }
 
@@ -435,14 +438,17 @@ export class Chart extends React.Component<ChartProps> {
         } else {
           this.echarts?.hideLoading();
         }
-
-        this.echarts?.setOption(config!, this.props.replaceChartOption);
+        this.reloadEcharts(config);
       } catch (e) {
         console.warn(e);
       }
     }
   }
 
+  reloadEcharts(config: any) {
+    this.echarts?.setOption(config!, this.props.replaceChartOption);
+  }
+
   render() {
     const {
       className,