sea-chart 1.1.21 → 1.1.22-alpha.1

package/dist/utils/chart-utils/base-utils.js

@@ -490,16 +490,17 @@ BaseUtils.getColumn = (tables, tableId, columnKey) => {
 BaseUtils.formatEmptyName = (dataList, column_groupby_column_key, emptyName) => {
   if (!Array.isArray(dataList)) return [];
   let updatedStatistics = [];
-  dataList.forEach(item => {
-    let updated = {};
+  for (let i = 0; i < dataList.length; i++) {
+    let item = dataList[i];
+    // let updated = {};
     if (!item.name) {
-      updated.name = emptyName;
+      item.name = emptyName;
     }
     if (column_groupby_column_key && !item.group_name) {
-      updated.group_name = emptyName;
+      item.group_name = emptyName;
     }
-    updatedStatistics.push(Object.assign({}, item, updated));
-  });
+    updatedStatistics.push(item);
+  }
   return updatedStatistics;
 };
 // init

package/dist/utils/row-record-utils.js

@@ -14,7 +14,6 @@ import { getColumnByKey } from '../utils/column-utils';
 import context from '../context';
 import { xAxisMap, groupAxisMap } from '../constants';
 import { chartColumn2SqlColumn } from './sql';
-import { BaseUtils } from './chart-utils';
 export const UNSHOW_COLUMN_TYPE = [CellType.LINK, CellType.LONG_TEXT, CellType.FORMULA, CellType.LINK_FORMULA];
 export const getCellRecordWidth = column => {
   let {
@@ -609,7 +608,6 @@ export const getFilterConditions = (statisticRecord, chart, table) => {
   const filters = [];
   const columnKey = xAxisMap[type];
   const groupColumnKey = groupAxisMap[type];
-  chart.config = BaseUtils.convertConfig(config);
   const chartSQLMap = chartColumn2SqlColumn(chart, table);
   const {
     sqlColumnGroupbyColumnKey,

package/dist/view/wrapper/area.js

@@ -55,7 +55,9 @@ class Area extends ChartComponent {
       this.loadData(data);
       this.draw(data);
       isFunction(customRender) && customRender(this.chart);
-      this.chart.render();
+      requestAnimationFrame(() => {
+        this.chart.render();
+      });
     };
     this.draw = data => {
       const {
@@ -221,15 +223,17 @@ class Area extends ChartComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      var _this$chart;
       this.initChartType();
-      this.chart && this.chart.destroy();
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
       this.renderAxisLabel(prevProps.chart, prevProps.tables);
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
     super.componentWillUnmount();
   }
   render() {

package/dist/view/wrapper/bar-custom.js

@@ -42,8 +42,10 @@ class BarCustom extends ChartComponent {
       if (!Array.isArray(data)) return;
       this.loadData(data);
       this.draw(data);
-      this.chart.render();
-      this.renderAxisLabel(this.props.chart, this.props.tables);
+      requestAnimationFrame(() => {
+        this.chart.render();
+        this.renderAxisLabel(this.props.chart, this.props.tables);
+      });
     };
     this.organizeData = data => {
       const dataMap = {};
@@ -183,13 +185,15 @@ class BarCustom extends ChartComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
     window.removeEventListener('resize', this.handleResize);
   }
   render() {

package/dist/view/wrapper/bar-group.js

@@ -60,7 +60,9 @@ class BarGroup extends ChartComponent {
       }
       this.loadData(data);
       this.draw(data);
-      this.chart.render();
+      requestAnimationFrame(() => {
+        this.chart.render();
+      });
     };
     this.draw = data => {
       const {
@@ -216,14 +218,16 @@ class BarGroup extends ChartComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
       this.renderAxisLabel(prevProps.chart, prevProps.tables);
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
     window.removeEventListener('resize', this.debouncedHandleResize);
   }
   render() {

package/dist/view/wrapper/bar.js

@@ -42,8 +42,10 @@ class Bar extends ChartComponent {
       if (!Array.isArray(data)) return;
       this.loadData(data);
       this.draw(data);
-      this.chart.render();
-      this.renderAxisLabel(this.props.chart, this.props.tables);
+      requestAnimationFrame(() => {
+        this.chart.render();
+        this.renderAxisLabel(this.props.chart, this.props.tables);
+      });
     };
     this.draw = data => {
       const {
@@ -129,13 +131,16 @@ class Bar extends ChartComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    // chart doesn't have autoPadding before they were rendered
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
     window.removeEventListener('resize', this.debouncedHandleResize);
   }
   render() {

package/dist/view/wrapper/chart-component.js

@@ -18,8 +18,9 @@ export default class ChartComponent extends Component {
       };
     };
     this.handleResize = debounce(() => {
+      var _this$chart;
       if (!this.createChart || !this.drawChart) return;
-      this.chart && this.chart.destroy();
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
       if (this.needRenderAxisLabel) {
@@ -206,6 +207,7 @@ export default class ChartComponent extends Component {
       }
     };
     this.renderAxisLabel = (chart, tables) => {
+      var _this$chart2;
       if (!this.chart || !chart) return;
       let {
         table_id,
@@ -226,7 +228,9 @@ export default class ChartComponent extends Component {
         y_axis_column_key = y_axis_summary_column_key;
       }
       const table = getTableById(tables, table_id);
-      const autoPadding = this.chart.autoPadding;
+      const autoPadding = ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) || {
+        bottom: 0
+      };
       let textColor;
       this.globalTheme === THEME_NAME_MAP.DARK ? textColor = '#fff' : textColor = '#999';
       const xAxisID = "chart-x-axis-label_".concat(chart.id);

package/dist/view/wrapper/combination.js

@@ -397,10 +397,13 @@ class Combination extends ChartComponent {
       }, 100));
       isFunction(customRender) && customRender(this.chart);
       this.chart.removeInteraction('legend-filter');
-      this.chart.render();
-      this.renderAxisLabel();
+      requestAnimationFrame(() => {
+        this.chart.render();
+        this.renderAxisLabel();
+      });
     };
     this.renderAxisLabel = () => {
+      var _this$chart;
       if (!this.chart) return;
       let {
         chart,
@@ -424,7 +427,7 @@ class Combination extends ChartComponent {
         y_axis_right_summary_type
       } = config;
       const table = getTableById(tables, table_id);
-      const autoPadding = this.chart.autoPadding;
+      const autoPadding = ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) || 0;
       const textColor = '#999';
       const xAxisID = "chart-x-axis-label_".concat(chart.id);
       const chartContainer = this.chart.getCanvas().get('container');
@@ -648,13 +651,15 @@ class Combination extends ChartComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart2;
+      ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
       this.drawChart();
       this.renderAxisLabel(prevProps.chart, prevProps.tables);
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart3;
+    ((_this$chart3 = this.chart) === null || _this$chart3 === void 0 ? void 0 : _this$chart3.autoPadding) && this.chart.destroy();
   }
   render() {
     const {

package/dist/view/wrapper/compare.js

@@ -38,7 +38,9 @@ class Compare extends ChartComponent {
       if (!Array.isArray(data)) return;
       this.loadData(data);
       this.draw(data);
-      this.chart.render();
+      requestAnimationFrame(() => {
+        this.chart.render();
+      });
     };
     this.draw = data => {
       const {
@@ -335,14 +337,16 @@ class Compare extends ChartComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
       this.renderAxisLabel(this.props.chart, this.props.tables);
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
   }
   render() {
     const {

package/dist/view/wrapper/completeness.js

@@ -48,8 +48,10 @@ export default function Completeness(_ref) {
       if (!Array.isArray(currentData)) return;
       currentChart.loadData(currentData);
       draw(currentData);
-      currentChart.chart.render();
-      currentChart.renderAxisLabel(chart, tables);
+      requestAnimationFrame(() => {
+        currentChart.chart.render();
+        currentChart.renderAxisLabel(chart, tables);
+      });
     }
     function draw(data) {
       const theme = CHART_THEME_COLOR[globalTheme];

package/dist/view/wrapper/dashboard.js

@@ -157,7 +157,8 @@ class Dashboard extends Component {
   }
   componentDidUpdate(prevProps) {
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.drawChart();
     }
   }

package/dist/view/wrapper/funnel.js

@@ -178,13 +178,15 @@ class Funnel extends ChartComponent {
   }
   componentDidUpdate(prevProps) {
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {

package/dist/view/wrapper/heat-map.js

@@ -56,32 +56,44 @@ class HeatMap extends ChartComponent {
       return [];
     };
     this.generateBackgroundGridData = statData => {
-      let momentDate = dayjs(this.firstDate);
-      const year = momentDate.year();
+      let currentDate = new Date(this.firstDate);
+      const year = currentDate.getFullYear();
       const gridData = [];
-      const isLeapYear = year % 4 > 0 ? false : true;
-      let yearDayCount = 365;
-      if (isLeapYear) {
-        yearDayCount = 366;
-      }
+      const isLeapYear = year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+      const yearDayCount = isLeapYear ? 366 : 365;
+      const getISOWeek = date => {
+        const target = new Date(date.valueOf());
+        // set 0 to monday, 6 to sunday
+        const dayNumber = (date.getUTCDay() + 6) % 7;
+        // set target to Thursday of this week, daynumber is days passed this week, 3 is Thursday
+        target.setUTCDate(target.getUTCDate() - dayNumber + 3);
+        const firstThursday = target.valueOf();
+        target.setUTCMonth(0, 1);
+        // find first thursday of the year
+        // https://blog.csdn.net/theadore2017/article/details/88578753
+        if (target.getUTCDay() !== 4) {
+          target.setUTCMonth(0, 1 + (4 - target.getUTCDay() + 7) % 7);
+        }
+        return 1 + Math.ceil((firstThursday - target) / 604800000); // 604800000ms in one week
+      };
       for (let i = 0; i < yearDayCount; i++) {
-        const day = momentDate.day();
-        let week = momentDate.week() - 1;
-        const month = momentDate.month();
+        const day = currentDate.getDay();
+        let week = getISOWeek(currentDate) - 1;
+        const month = currentDate.getMonth();
         if (week === 0 && month === 11) {
           week = 52;
         }
-        const yearDate = momentDate.format('YYYY-MM-DD');
+        const yearDate = currentDate.toISOString().split('T')[0];
         const value = statData[yearDate] || 0;
         this.maxValue = Math.max(this.maxValue, value);
         gridData.push({
           date: yearDate,
-          value: statData[yearDate],
+          value,
           day,
           week,
           month
         });
-        momentDate = momentDate.add(1, 'days');
+        currentDate.setDate(currentDate.getDate() + 1);
       }
       return gridData;
     };
@@ -261,7 +273,9 @@ class HeatMap extends ChartComponent {
         items: this.getLegendItems(exampleColors)
       });
       this.chart.removeInteraction('legend-filter');
-      this.chart.render();
+      requestAnimationFrame(() => {
+        this.chart.render();
+      });
     };
     dayjs.locale('en');
     this.chart = null;
@@ -314,13 +328,15 @@ class HeatMap extends ChartComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
   }
   getLegendItemPath(x, y, r, index, textWidth) {
     // x, y represents the coordinates of the center point of the legend item marker

package/dist/view/wrapper/horizontal-bar-group.js

@@ -13,7 +13,8 @@ class HorizontalBarGroup extends HorizontalComponent {
   constructor(props) {
     super(props);
     this.handleResize = debounce(() => {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
       this.renderHorizontalLabel(this.props.chart, this.props.tables);
@@ -59,7 +60,9 @@ class HorizontalBarGroup extends HorizontalComponent {
       this.loadData(data);
       this.draw(data);
       isFunction(customRender) && customRender(this.chart);
-      this.chart.render();
+      requestAnimationFrame(() => {
+        this.chart.render();
+      });
     };
     this.draw = data => {
       const {
@@ -175,14 +178,16 @@ class HorizontalBarGroup extends HorizontalComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart2;
+      ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
       this.renderHorizontalLabel(prevProps.chart, prevProps.tables);
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart3;
+    ((_this$chart3 = this.chart) === null || _this$chart3 === void 0 ? void 0 : _this$chart3.autoPadding) && this.chart.destroy();
     window.removeEventListener('resize', this.handleResize);
   }
   render() {

package/dist/view/wrapper/horizontal-bar.js

@@ -38,8 +38,10 @@ class HorizontalBar extends HorizontalComponent {
       this.loadData(data);
       this.draw(data);
       isFunction(customRender) && customRender(this.chart);
-      this.chart.render();
-      this.renderHorizontalLabel(this.props.chart, this.props.tables);
+      requestAnimationFrame(() => {
+        this.chart.render();
+        this.renderHorizontalLabel(this.props.chart, this.props.tables);
+      });
     };
     this.draw = data => {
       const {
@@ -127,13 +129,15 @@ class HorizontalBar extends HorizontalComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
     super.componentWillUnmount();
   }
   render() {

package/dist/view/wrapper/horizontal-component.js

@@ -6,6 +6,7 @@ export default class HorizontalComponent extends ChartComponent {
   constructor() {
     super(...arguments);
     this.renderHorizontalLabel = (chart, tables) => {
+      var _this$chart;
       if (!this.chart || !chart) return;
       let {
         table_id,
@@ -18,7 +19,9 @@ export default class HorizontalComponent extends ChartComponent {
         show_horizontal_axis_label
       } = chart.config;
       const table = getTableById(tables, table_id);
-      const autoPadding = this.chart.autoPadding;
+      const autoPadding = ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) || {
+        bottom: 0
+      };
       const textColor = '#999999';
       const xAxisID = "chart-x-axis-label_".concat(chart.id);
       const chartContainer = this.chart.getCanvas().get('container');

package/dist/view/wrapper/line-group.js

@@ -42,7 +42,9 @@ class LineGroup extends ChartComponent {
       this.loadData(data);
       this.draw(data);
       isFunction(customRender) && customRender(this.chart);
-      this.chart.render();
+      requestAnimationFrame(() => {
+        this.chart.render();
+      });
     };
     this.draw = data => {
       const {
@@ -159,14 +161,16 @@ class LineGroup extends ChartComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
       this.renderAxisLabel(prevProps.chart, prevProps.tables);
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
     super.componentWillUnmount();
   }
   render() {

package/dist/view/wrapper/line.js

@@ -40,7 +40,9 @@ class Line extends ChartComponent {
       this.draw(data);
       this.autoAdjustDataOptions(chart, data, summaryColumn);
       isFunction(customRender) && customRender(this.chart);
-      this.chart.render();
+      requestAnimationFrame(() => {
+        this.chart.render();
+      });
     };
     this.draw = data => {
       const {
@@ -162,14 +164,16 @@ class Line extends ChartComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
       this.renderAxisLabel(prevProps.chart, prevProps.tables);
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
     super.componentWillUnmount();
   }
   render() {

package/dist/view/wrapper/mirror.js

@@ -179,13 +179,15 @@ class Mirror extends ChartComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {

package/dist/view/wrapper/pie.js

@@ -128,7 +128,9 @@ class Pie extends ChartComponent {
         summaryMethod: summary_method
       }));
       isFunction(customRender) && customRender(this.chart);
-      this.chart.render();
+      requestAnimationFrame(() => {
+        this.chart.render();
+      });
     };
     this.onEnterElement = (evt, _ref) => {
       let {

package/dist/view/wrapper/ring.js

@@ -153,7 +153,9 @@ class Ring extends ChartComponent {
       }));
       this.chart.interaction('element-highlight');
       isFunction(customRender) && customRender(this.chart);
-      this.chart.render();
+      requestAnimationFrame(() => {
+        this.chart.render();
+      });
     };
     this.getLabel = (value, percent) => {
       const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "1.1.21",
+  "version": "1.1.22-alpha.1",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",