fix: chart resize

src/components/echarts/chart.tsx

@@ -1,4 +1,4 @@
-import { throttle } from 'echarts/core';
+import { throttle } from 'lodash';
 import { useCallback, useEffect, useRef } from 'react';
 import echarts, { ECOption } from '.';
 
@@ -9,6 +9,8 @@ const Chart: React.FC<{
 }> = ({ options, width, height }) => {
   const container = useRef<HTMLDivElement>(null);
   const chart = useRef<echarts.EChartsType>();
+  const resizeable = useRef(false);
+  const resizeObserver = useRef<ResizeObserver>();
 
   const init = useCallback(() => {
     if (container.current) {
@@ -30,27 +32,48 @@ const Chart: React.FC<{
   }, []);
 
   useEffect(() => {
-    init();
+    if (container.current) {
+      init();
+    }
     return () => {
       chart.current?.dispose();
     };
   }, [init]);
 
   useEffect(() => {
+    resizeable.current = false;
     resize();
     setOption(options);
   }, [options]);
 
-  // resize on window resize
+  useEffect(() => {
+    let timer: any = null;
+    timer = setTimeout(() => {
+      resizeable.current = true;
+    }, 300);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+
   useEffect(() => {
     const handleResize = throttle(() => {
-      resize();
+      if (resizeable.current) {
+        chart.current?.resize();
+      }
     }, 100);
-    window.addEventListener('resize', handleResize);
+
+    if (container.current) {
+      resizeObserver.current = new ResizeObserver(handleResize);
+
+      resizeObserver.current.observe(container.current);
+    }
     return () => {
-      window.removeEventListener('resize', handleResize);
+      if (container.current) {
+        resizeObserver.current?.unobserve(container.current);
+      }
     };
-  }, [resize]);
+  }, []);
 
   return <div ref={container} style={{ width: width, height }}></div>;
 };

src/components/echarts/index.ts

@@ -1,5 +1,4 @@
 import type {
-  // 系列类型的定义后缀都为 SeriesOption
   BarSeriesOption,
   GaugeSeriesOption,
   LineSeriesOption
@@ -8,18 +7,16 @@ import { BarChart, GaugeChart, LineChart } from 'echarts/charts';
 import type {
   DatasetComponentOption,
   GridComponentOption,
-  // 组件类型的定义后缀都为 ComponentOption
   TitleComponentOption,
   TooltipComponentOption
 } from 'echarts/components';
 import {
-  // 数据集组件
   DatasetComponent,
   GridComponent,
   LegendComponent,
   TitleComponent,
   TooltipComponent,
-  // 内置数据转换器组件 (filter, sort)
+  // (filter, sort)
   TransformComponent
 } from 'echarts/components';
 import type { ComposeOption } from 'echarts/core';
@@ -27,7 +24,6 @@ import * as echarts from 'echarts/core';
 import { LabelLayout, UniversalTransition } from 'echarts/features';
 import { CanvasRenderer } from 'echarts/renderers';
 
-// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
 type ECOption = ComposeOption<
   | BarSeriesOption
   | LineSeriesOption
@@ -38,7 +34,7 @@ type ECOption = ComposeOption<
   | GaugeSeriesOption
 >;
 
-// 注册必须的组件
+// register components and charts
 echarts.use([
   LegendComponent,
   TitleComponent,