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(
-    document.getElementById(props.id) as HTMLDivElement
+  chart.value = markRaw(
+    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(
-    document.getElementById(props.id) as HTMLDivElement
+  chart.value = markRaw(
+    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(
-    document.getElementById(props.id) as HTMLDivElement
+  chart.value = markRaw(
+    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>