pref: 图表宽高为0 时不显示，宽高变化时resize()

packages/base-components/BasicChart/package.json

@@ -32,6 +32,7 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.9"
+    "@babel/runtime": "^7.17.9",
+    "rc-resize-observer": "1.4.0"
   }
 }

packages/base-components/BasicChart/src/ECharts.js

-import React, { memo, useMemo } from 'react';
+/*
+ * @Title:
+ * @Author: hongmye
+ * @Date: 2023-09-27 11:51:16
+ */
 import { ConfigProvider } from 'antd';
 import classNames from 'classnames';
 import ReactEcharts from 'echarts-for-react';
 import { omit } from 'lodash';
+import ResizeObserver from 'rc-resize-observer';
+import React, { memo, useMemo, useState } from 'react';
 import buildOption from './utils';
 
 const ECharts = memo(
   React.forwardRef((props, ref) => {
     const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
     const prefixCls = getPrefixCls('basic-chart');
-
+    const [isShow, setIsShow] = useState('hidden');
     const chartProps = omit(props, ['className', 'option']);
+
     const option = useMemo(() => {
       return buildOption(props.option);
     }, [props.option]);
-
-    // const chartProps = pick(props, ['option', 'notMerge', 'lazyUpdate', 'style', 'className', 'theme', 'onChartReady', 'loadingOption', 'showLoading', 'onEvents', 'opts']);
     if (ref && ref.current && ref.current.getEchartsInstance) {
       ref.current.getEchartsInstance().clear();
       ref.current.getEchartsInstance().setOption(option);
       ref.current.getEchartsInstance().resize();
     }
+
+    const onResize = ({ width, height }) => {
+      if (width && height) {
+        setIsShow('visible');
+        ref?.current?.getEchartsInstance && ref.current.getEchartsInstance().resize();
+      } else {
+        setIsShow('hidden');
+      }
+    };
     return (
-      <ReactEcharts
-        ref={ref}
-        className={classNames(prefixCls, props.className)}
-        option={option}
-        style={{ width: '100%', height: '100%' }}
-        {...chartProps}
-      />
+      <ResizeObserver onResize={onResize}>
+        <div style={{ width: '100%', height: '100%', visibility: isShow }}>
+          <ReactEcharts
+            ref={ref}
+            className={classNames(prefixCls, props.className)}
+            style={{ width: '100%', height: '100%' }}
+            option={option}
+            {...chartProps}
+          />
+        </div>
+      </ResizeObserver>
     );
   }),
 );