fix: 修复echarts闪烁问题

src/components/DashBoard/baseCard.tsx

@@ -4,7 +4,7 @@ import type { EchartsProps } from './echarts';
 import Echarts from './echarts';
 import Style from './index.less';
 import classNames from 'classnames';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 
 interface BaseCardProps extends HeaderProps, EchartsProps {
   height: number;
@@ -15,6 +15,12 @@ interface BaseCardProps extends HeaderProps, EchartsProps {
 export default forwardRef((props: BaseCardProps, ref) => {
   const { height, className, options, ...formProps } = props;
 
+  const [myOptions, setMyOptions] = useState(options);
+
+  useEffect(() => {
+    console.log('myOptions-change');
+    setMyOptions(options);
+  }, [options]);
   return (
     <div
       className={classNames(Style['dash-board'], className)}
@@ -24,7 +30,7 @@ export default forwardRef((props: BaseCardProps, ref) => {
     >
       <Header ref={ref} {...formProps} />
       <div className={Style['echarts-content']}>
-        <Echarts options={options} className={Style['echarts']} />
+        <Echarts options={myOptions} className={Style['echarts']} />
         {props.echartsAfter}
       </div>
     </div>

src/components/DashBoard/echarts.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import * as echarts from 'echarts/core';
 import type { ECharts, EChartsOption } from 'echarts';
 import {
@@ -57,6 +57,8 @@ export { echarts };
 
 export default (props: EchartsProps) => {
   const chartsRef = useRef<any>(null);
+  const chartsDom = useRef<any>(null);
+  const [loading, setLoading] = useState(false);
 
   const initEcharts = (dom: HTMLDivElement) => {
     chartsRef.current = chartsRef.current || echarts.init(dom);
@@ -94,16 +96,19 @@ export default (props: EchartsProps) => {
     }
   }, [props.options, chartsRef.current]);
 
-  return (
-    <div
-      className={classNames(Style['content'], props.className)}
-      ref={(ref) => {
-        if (ref) {
-          setTimeout(() => {
-            initEcharts(ref);
-          }, 100);
-        }
-      }}
-    />
-  );
+  useEffect(() => {
+    if (loading) {
+      setTimeout(() => {
+        initEcharts(chartsDom.current);
+      }, 100);
+    }
+  }, [loading]);
+
+  useEffect(() => {
+    if (chartsDom.current) {
+      setLoading(true);
+    }
+  }, [chartsDom.current]);
+
+  return <div className={classNames(Style['content'], props.className)} ref={chartsDom} />;
 };

src/pages/link/DashBoard/index.tsx

@@ -60,6 +60,9 @@ const TopEchartsItemNode = (props: TopEchartsItemNodeType) => {
           width: 30,
           padding: [6, -4, 0, -4],
           formatter: (value: number) => {
+            if (value === 0) {
+              formatterCount = 0;
+            }
             formatterCount += 1;
             if ([1, 3, 6, 9, 11].includes(formatterCount)) {
               return value + (props.formatter || '%');