优化组件加载逻辑

src/views/dashboard/AnalyticsCpu.vue

@@ -112,6 +112,8 @@ async function getCpuUsage() {
   try {
     // 请求数据
     current.value = (await api.get('dashboard/cpu')) ?? 0
+    // 使用nextTick确保DOM更新完成后再更新图表数据
+    await nextTick()
     // 添加到序列
     series.value[0].data.push(current.value)
     // 序列超过30条记录时，清掉前面的
@@ -122,10 +124,13 @@ async function getCpuUsage() {
 }
 
 onMounted(() => {
-  getCpuUsage() // 启动定时器
-  refreshTimer = setInterval(() => {
+  // 延迟启动，确保组件完全挂载
+  nextTick(() => {
     getCpuUsage()
-  }, 2000)
+    refreshTimer = setInterval(() => {
+      getCpuUsage()
+    }, 2000)
+  })
 })
 
 // 组件卸载时停止定时器
@@ -137,7 +142,9 @@ onUnmounted(() => {
 })
 
 onActivated(() => {
-  chartKey.value += 1
+  nextTick(() => {
+    chartKey.value += 1
+  })
 })
 </script>
 

src/views/dashboard/AnalyticsMemory.vue

@@ -118,6 +118,8 @@ async function getMemorgUsage() {
   try {
     // 请求数据
     ;[usedMemory.value, memoryUsage.value] = await api.get('dashboard/memory')
+    // 使用nextTick确保DOM更新完成后再更新图表数据
+    await nextTick()
     series.value[0].data.push(memoryUsage.value)
     // 序列超过30条记录时，清掉前面的
     if (series.value[0].data.length > 30) series.value[0].data.shift()
@@ -127,11 +129,14 @@ async function getMemorgUsage() {
 }
 
 onMounted(() => {
-  getMemorgUsage()
-  // 启动定时器
-  refreshTimer = setInterval(() => {
+  // 延迟启动，确保组件完全挂载
+  nextTick(() => {
     getMemorgUsage()
-  }, 3000)
+    // 启动定时器
+    refreshTimer = setInterval(() => {
+      getMemorgUsage()
+    }, 3000)
+  })
 })
 
 // 组件卸载时停止定时器
@@ -143,7 +148,10 @@ onUnmounted(() => {
 })
 
 onActivated(() => {
-  chartKey.value += 1
+  // 使用nextTick确保DOM准备完成后再更新chartKey
+  nextTick(() => {
+    chartKey.value += 1
+  })
 })
 </script>
 

src/views/dashboard/AnalyticsWeeklyOverview.vue

@@ -107,7 +107,8 @@ const totalCount = computed(() => series.value[0].data.reduce((a, b) => a + b, 0
 async function getWeeklyData() {
   try {
     const res: number[] = await api.get('dashboard/transfer')
-
+    // 使用nextTick确保DOM更新完成后再更新图表数据
+    await nextTick()
     series.value = [{ data: res }]
   } catch (e) {
     console.log(e)
@@ -115,11 +116,17 @@ async function getWeeklyData() {
 }
 
 onMounted(() => {
-  getWeeklyData()
+  // 延迟启动，确保组件完全挂载
+  nextTick(() => {
+    getWeeklyData()
+  })
 })
 
 onActivated(() => {
-  getWeeklyData()
+  // 使用nextTick确保DOM准备完成后再获取数据
+  nextTick(() => {
+    getWeeklyData()
+  })
 })
 </script>