主页饼图无感更新数据

src/views/index.vue

@@ -2,7 +2,7 @@
 import { PageContainer } from 'antdv-pro-layout';
 import { ColumnsType } from 'ant-design-vue/lib/table';
 import { message } from 'ant-design-vue/lib';
-import { reactive, toRaw, ref, onMounted, onBeforeUnmount } from 'vue';
+import { reactive, toRaw, ref, onMounted, onBeforeUnmount, markRaw } from 'vue';
 import { listMain } from '@/api/index';
 import useI18n from '@/hooks/useI18n';
 import { TooltipComponent } from 'echarts/components';
@@ -30,6 +30,12 @@ echarts.use([
   LabelLayout,
 ]);
 
+/**图DOM节点实例对象 */
+const statusBar = ref<HTMLElement | undefined>(undefined);
+
+/**图实例对象 */
+const statusBarChart = ref<any>(null);
+
 /**网元状态字典数据 */
 let indexColor = ref<DictType[]>([
   { label: 'Normal', value: 'normal', elTagType: '', elTagClass: '#91cc75' },
@@ -74,7 +80,7 @@ let tableColumns: ColumnsType = [
     dataIndex: 'serialNum',
     align: 'center',
   },
-    {
+  {
     title: t('views.index.expiryDate'),
     dataIndex: 'expiryDate',
     align: 'center',
@@ -178,17 +184,7 @@ function fnGetList(one: boolean) {
       }
     }
 
-    var chartDom: any = document.getElementById('echarts-records');
-    var existingChart = echarts.getInstanceByDom(chartDom);
-    var myChart: any;
-    if (existingChart) {
-      myChart = existingChart;
-      myChart.clear(); // 清空图表，重新设置数据
-    } else {
-      myChart = echarts.init(chartDom);
-    }
-
-    var option = {
+    const optionData: any = {
       title: {
         text: '',
         subtext: '',
@@ -225,14 +221,28 @@ function fnGetList(one: boolean) {
       ],
     };
 
-    option && myChart.setOption(option);
-    window.onresize = function () {
-      // echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
-      myChart.resize();
-    };
+    fnDesign(statusBar.value, optionData);
   });
 }
 
+function fnDesign(container: HTMLElement | undefined, option: any) {
+  if (!container) return;
+
+  if (!statusBarChart.value) {
+    statusBarChart.value = markRaw(echarts.init(container, 'light'));
+  }
+  option && statusBarChart.value.setOption(option);
+
+  // 创建 ResizeObserver 实例
+  var observer = new ResizeObserver(entries => {
+    if (statusBarChart.value) {
+      statusBarChart.value.resize();
+    }
+  });
+  // 监听元素大小变化
+  observer.observe(container);
+}
+
 /**抽屉 网元详细信息 */
 const visible = ref(false);
 const closeDrawer = () => {
@@ -257,9 +267,10 @@ function rowClick(record: any, index: any) {
         const sysMemUsageInKB = pronData.memUsage?.sysMemUsage;
 
         // 将KB转换为MB
-        const totalMemInMB = Math.round(totalMemInKB / 1024*100)/100;
-        const nfUsedMemInMB = Math.round(nfUsedMemInKB / 1024*100)/100;
-        const sysMemUsageInMB = Math.round(sysMemUsageInKB / 1024*100)/100;
+        const totalMemInMB = Math.round((totalMemInKB / 1024) * 100) / 100;
+        const nfUsedMemInMB = Math.round((nfUsedMemInKB / 1024) * 100) / 100;
+        const sysMemUsageInMB =
+          Math.round((sysMemUsageInKB / 1024) * 100) / 100;
 
         //渲染详细信息
         pronInfo = {
@@ -400,8 +411,8 @@ onBeforeUnmount(() => {
       <a-col :lg="10" :md="8" :xs="24">
         <a-card :title="t('views.index.runStatus')" style="margin-bottom: 16px">
           <div
-            id="echarts-records"
             style="width: 100%; min-height: 200px"
+            ref="statusBar"
           ></div>
         </a-card>
         <a-card :title="t('views.index.mark')" style="margin-top: 16px">