fix: 🐛 修复echart图表在keep-alive缓存下切换其他页面缩放后再返回页面不能自适应问题

src/views/dashboard/components/BarChart.vue

@@ -138,20 +138,7 @@ const options = {
     },
   ],
 };
-const chart = ref<any>("");
-onMounted(() => {
-  // 图表初始化
-  chart.value = markRaw(
-    echarts.init(document.getElementById(props.id) as HTMLDivElement)
-  );
 
-  chart.value.setOption(options);
-
-  // 大小自适应
-  window.addEventListener("resize", () => {
-    chart.value.resize();
-  });
-});
 const downloadEchart = () => {
   // 获取画布图表地址信息
   const img = new Image();
@@ -177,6 +164,28 @@ const downloadEchart = () => {
     }
   };
 };
+
+const chart = ref<any>("");
+onMounted(() => {
+  // 图表初始化
+  chart.value = markRaw(
+    echarts.init(document.getElementById(props.id) as HTMLDivElement)
+  );
+
+  chart.value.setOption(options);
+
+  // 大小自适应
+  window.addEventListener("resize", () => {
+    console.log("自适应事件触发");
+    chart.value.resize();
+  });
+});
+
+onActivated(() => {
+  if (chart.value) {
+    chart.value.resize();
+  }
+});
 </script>
 <style lang="scss" scoped>
 .title {

src/views/dashboard/components/FunnelChart.vue

@@ -93,14 +93,23 @@ const options = {
   ],
 };
 
+const chart = ref<any>("");
+
 onMounted(() => {
-  const chart = echarts.init(
+  chart.value = markRaw(
-    document.getElementById(props.id) as HTMLDivElement
+    echarts.init(document.getElementById(props.id) as HTMLDivElement)
   );
-  chart.setOption(options);
+
+  chart.value.setOption(options);
 
   window.addEventListener("resize", () => {
-    chart.resize();
+    chart.value.resize();
   });
 });
+
+onActivated(() => {
+  if (chart.value) {
+    chart.value.resize();
+  }
+});
 </script>

src/views/dashboard/components/PieChart.vue

@@ -67,13 +67,23 @@ const options = {
   ],
 };
 
+const chart = ref<any>("");
+
 onMounted(() => {
-  const chart = echarts.init(
+  chart.value = markRaw(
-    document.getElementById(props.id) as HTMLDivElement
+    echarts.init(document.getElementById(props.id) as HTMLDivElement)
   );
-  chart.setOption(options);
+
+  chart.value.setOption(options);
+
   window.addEventListener("resize", () => {
-    chart.resize();
+    chart.value.resize();
   });
 });
+
+onActivated(() => {
+  if (chart.value) {
+    chart.value.resize();
+  }
+});
 </script>

src/views/dashboard/components/RadarChart.vue

@@ -87,14 +87,23 @@ const options = {
   ],
 };
 
+const chart = ref<any>("");
+
 onMounted(() => {
-  const chart = echarts.init(
+  chart.value = markRaw(
-    document.getElementById(props.id) as HTMLDivElement
+    echarts.init(document.getElementById(props.id) as HTMLDivElement)
   );
-  chart.setOption(options);
+
+  chart.value.setOption(options);
 
   window.addEventListener("resize", () => {
-    chart.resize();
+    chart.value.resize();
   });
 });
+
+onActivated(() => {
+  if (chart.value) {
+    chart.value.resize();
+  }
+});
 </script>

src/views/dashboard/index.vue

@@ -1,65 +1,3 @@
-<script setup lang="ts">
-defineOptions({
-  name: "Dashboard",
-  inheritAttrs: false,
-});
-
-import { useUserStore } from "@/store/modules/user";
-import { useTransition, TransitionPresets } from "@vueuse/core";
-
-const userStore = useUserStore();
-const date: Date = new Date();
-
-const greetings = computed(() => {
-  const hours = date.getHours();
-  if (hours >= 6 && hours < 8) {
-    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
-  } else if (hours >= 8 && hours < 12) {
-    return "上午好，" + useUserStore().user.nickname + "！";
-  } else if (hours >= 12 && hours < 18) {
-    return "下午好，" + useUserStore().user.nickname + "！";
-  } else if (hours >= 18 && hours < 24) {
-    return "晚上好，" + useUserStore().user.nickname + "！";
-  } else if (hours >= 0 && hours < 6) {
-    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
-  }
-});
-
-const duration = 5000;
-
-// 销售额
-const amount = ref(0);
-const amountOutput = useTransition(amount, {
-  duration: duration,
-  transition: TransitionPresets.easeOutExpo,
-});
-amount.value = 2000;
-
-// 访客数
-const visitCount = ref(0);
-const visitCountOutput = useTransition(visitCount, {
-  duration: duration,
-  transition: TransitionPresets.easeOutExpo,
-});
-visitCount.value = 2000;
-
-// IP数
-const dauCount = ref(0);
-const dauCountOutput = useTransition(dauCount, {
-  duration: duration,
-  transition: TransitionPresets.easeOutExpo,
-});
-dauCount.value = 2000;
-
-// 订单量
-const orderCount = ref(0);
-const orderCountOutput = useTransition(orderCount, {
-  duration: duration,
-  transition: TransitionPresets.easeOutExpo,
-});
-orderCount.value = 2000;
-</script>
-
 <template>
   <div class="dashboard-container">
     <!-- github角标 -->
@@ -254,6 +192,68 @@ orderCount.value = 2000;
   </div>
 </template>
 
+<script setup lang="ts">
+defineOptions({
+  name: "Dashboard",
+  inheritAttrs: false,
+});
+
+import { useUserStore } from "@/store/modules/user";
+import { useTransition, TransitionPresets } from "@vueuse/core";
+
+const userStore = useUserStore();
+const date: Date = new Date();
+
+const greetings = computed(() => {
+  const hours = date.getHours();
+  if (hours >= 6 && hours < 8) {
+    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
+  } else if (hours >= 8 && hours < 12) {
+    return "上午好，" + useUserStore().user.nickname + "！";
+  } else if (hours >= 12 && hours < 18) {
+    return "下午好，" + useUserStore().user.nickname + "！";
+  } else if (hours >= 18 && hours < 24) {
+    return "晚上好，" + useUserStore().user.nickname + "！";
+  } else if (hours >= 0 && hours < 6) {
+    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
+  }
+});
+
+const duration = 5000;
+
+// 销售额
+const amount = ref(0);
+const amountOutput = useTransition(amount, {
+  duration: duration,
+  transition: TransitionPresets.easeOutExpo,
+});
+amount.value = 2000;
+
+// 访客数
+const visitCount = ref(0);
+const visitCountOutput = useTransition(visitCount, {
+  duration: duration,
+  transition: TransitionPresets.easeOutExpo,
+});
+visitCount.value = 2000;
+
+// IP数
+const dauCount = ref(0);
+const dauCountOutput = useTransition(dauCount, {
+  duration: duration,
+  transition: TransitionPresets.easeOutExpo,
+});
+dauCount.value = 2000;
+
+// 订单量
+const orderCount = ref(0);
+const orderCountOutput = useTransition(orderCount, {
+  duration: duration,
+  transition: TransitionPresets.easeOutExpo,
+});
+orderCount.value = 2000;
+</script>
+
 <style lang="scss" scoped>
 .dashboard-container {
   position: relative;