pref:优化首页右边设备状态统计圆环图渲染方式

 <template>
 <template>
-  <a-row :gutter="16" align="middle">
-    <a-col v-for="(item, index) in seriesStatusData" :key="index" :span="8">
-      <div :id="`chartPie${item.key}`" style="width: 150px; height: 200px"></div>
+  <a-row type="flex" justify="space-between" align="middle">
+    <a-col
+      class="flex items-center"
+      v-for="(item, index) in seriesStatusData"
+      :key="index"
+      :span="8"
+    >
+      <div
+        :id="`chartPie${item.key}`"
+        style="width: 150px; height: 200px; position: relative; top: -0.7rem"
+      ></div>
     </a-col>
     </a-col>
   </a-row>
   </a-row>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
-  import { defineComponent, PropType, onMounted, toRefs } from 'vue';
+  import {
+    defineComponent,
+    PropType,
+    onMounted,
+    toRefs,
+    shallowReactive,
+    onUnmounted,
+    nextTick,
+  } from 'vue';
   import * as echarts from 'echarts';
   import * as echarts from 'echarts';
   import { seriesDataT } from './props';
   import { seriesDataT } from './props';
 
 
@@ -19,74 +35,88 @@
     },
     },
 
 
     setup(props) {
     setup(props) {
+      const chartsInstance = shallowReactive<{ [key: string]: echarts.ECharts }>({});
+
       const { seriesStatusData } = toRefs(props);
       const { seriesStatusData } = toRefs(props);
+
       const total = seriesStatusData.value
       const total = seriesStatusData.value
         .map((m) => m.value)
         .map((m) => m.value)
         .reduce((prev, cur) => prev! + cur!, 0);
         .reduce((prev, cur) => prev! + cur!, 0);
 
 
-      onMounted(() => {
-        seriesStatusData.value.forEach((item) => {
-          initEchart(item.key, item, item.value);
-        });
-      });
-
-      const initEchart = (id, item, value) => {
-        //牵引线条颜色
-        const labelLine = {
-          normal: {
-            show: true,
-            length: 20,
-            length2: 20,
-            lineStyle: {
-              color: '#808080',
-            },
-          },
-        } as any;
-        const legendKey = item.key == 'onLine' ? '在线' : item.key == 'offLine' ? '离线' : '待激活';
-        const echartInstance = echarts.init(
-          document.getElementById(`chartPie${id}`) as HTMLElement
-        );
-        echartInstance.setOption({
-          backgroundColor: '#ffffff',
-          tooltip: {
-            trigger: 'item',
-            formatter: `${legendKey}设备${((value / total!) * 100).toFixed(2)}%`,
-          },
-          graphic: [
-            {
-              type: 'text',
-              left: '42%',
-              top: '48%',
-              z: 10,
-              style: {
-                fill: '#1a1a1a',
-                text: value + '个',
-                font: '14px Microsoft YaHei',
+      nextTick(() => {
+        for (const item of seriesStatusData.value) {
+          const { key, value } = item;
+          //牵引线条颜色
+          const labelLine = {
+            normal: {
+              show: true,
+              length: 20,
+              length2: 20,
+              lineStyle: {
+                color: '#808080',
               },
               },
             },
             },
-          ],
-          series: [
-            {
-              data: [item],
-              avoidLabelOverlap: false,
-              type: 'pie',
-              radius: ['40%', '60%'],
-              label: {
-                normal: {
-                  show: true,
-                  position: 'outer',
-                  formatter: `${legendKey}${((value / total!) * 100).toFixed(2)}%`,
-                  borderWidth: 5,
-                  borderRadius: 0,
-                  padding: [90, -60],
+          } as any;
+          const legendKey = key == 'onLine' ? '在线' : key == 'offLine' ? '离线' : '待激活';
+          chartsInstance[key!] = echarts.init(
+            document.getElementById(`chartPie${key}`) as HTMLElement
+          );
+          const option = {
+            backgroundColor: '#ffffff',
+            tooltip: {
+              trigger: 'item',
+              formatter: `${legendKey}设备${((value! / total!) * 100).toFixed(2)}%`,
+            },
+            graphic: [
+              {
+                type: 'text',
+                left: '42%',
+                top: '48%',
+                z: 10,
+                style: {
+                  fill: '#1a1a1a',
+                  text: value + '个',
+                  font: '14px Microsoft YaHei',
                 },
                 },
               },
               },
-              labelLine,
-            },
-          ],
+            ],
+            series: [
+              {
+                data: [item],
+                avoidLabelOverlap: false,
+                type: 'pie',
+                radius: ['40%', '60%'],
+                label: {
+                  normal: {
+                    show: true,
+                    position: 'outer',
+                    formatter: `${legendKey}${((value! / total!) * 100).toFixed(2)}%`,
+                    borderWidth: 5,
+                    borderRadius: 0,
+                    padding: [90, -60],
+                  },
+                },
+                labelLine,
+              },
+            ],
+          };
+          chartsInstance[key!].setOption(option);
+        }
+      });
+
+      const resize = () => {
+        Object.keys(chartsInstance).forEach((key) => {
+          chartsInstance[key].resize();
         });
         });
-        window.addEventListener('resize', () => echartInstance.resize());
       };
       };
+
+      onMounted(() => {
+        window.addEventListener('resize', resize);
+      });
+
+      onUnmounted(() => {
+        window.removeEventListener('resize', resize);
+      });
     },
     },
   });
   });
 </script>
 </script>