From 972622d96ddb691eaeb2755d48c2fb2811710a15 Mon Sep 17 00:00:00 2001
From: hxr <1490493387@qq.com>
Date: Thu, 15 Feb 2024 09:32:14 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E4=BF=AE=E5=A4=8Dechart?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E5=9C=A8keep-alive=E7=BC=93=E5=AD=98?=
 =?UTF-8?q?=E4=B8=8B=E5=88=87=E6=8D=A2=E5=85=B6=E4=BB=96=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=BC=A9=E6=94=BE=E5=90=8E=E5=86=8D=E8=BF=94=E5=9B=9E=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E4=B8=8D=E8=83=BD=E8=87=AA=E9=80=82=E5=BA=94=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/components/BarChart.vue   |  35 +++--
 .../dashboard/components/FunnelChart.vue      |  17 ++-
 src/views/dashboard/components/PieChart.vue   |  18 ++-
 src/views/dashboard/components/RadarChart.vue |  17 ++-
 src/views/dashboard/index.vue                 | 124 +++++++++---------
 5 files changed, 124 insertions(+), 87 deletions(-)

diff --git a/src/views/dashboard/components/BarChart.vue b/src/views/dashboard/components/BarChart.vue
index dc089b1c..bdf43cd7 100644
--- a/src/views/dashboard/components/BarChart.vue
+++ b/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 {
diff --git a/src/views/dashboard/components/FunnelChart.vue b/src/views/dashboard/components/FunnelChart.vue
index 30fedb97..d29293ca 100644
--- a/src/views/dashboard/components/FunnelChart.vue
+++ b/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>
diff --git a/src/views/dashboard/components/PieChart.vue b/src/views/dashboard/components/PieChart.vue
index e8dd6702..ac011fb9 100644
--- a/src/views/dashboard/components/PieChart.vue
+++ b/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>
diff --git a/src/views/dashboard/components/RadarChart.vue b/src/views/dashboard/components/RadarChart.vue
index 2081bf24..aca9ac8b 100644
--- a/src/views/dashboard/components/RadarChart.vue
+++ b/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>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fbb43625..93e43336 100644
--- a/src/views/dashboard/index.vue
+++ b/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;