From 01c523e21a3f3d5838a8dbc479a348b27665727d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Tue, 3 Sep 2024 14:48:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/Chart.vue | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/board/Chart.vue b/src/components/board/Chart.vue
index c27ccfd..a729166 100644
--- a/src/components/board/Chart.vue
+++ b/src/components/board/Chart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 100%;height: 100%"/>
+  <div style="width: 100%;height: 100%" ref="chart" @resize="resize"/>
 </template>
 
 <script>
@@ -10,9 +10,20 @@ export default {
   data() {
     return {
       chart: null,
+      resizeTime:true
     }
   },
   mounted() {
+    this.$nextTick(() => {
+      const resizeObserver = new ResizeObserver(entries => {
+        for (let entry of entries) {
+          this.resize()
+        }
+      });
+
+      resizeObserver.observe(this.$refs.chart);
+    });
+    window.addEventListener('resize', this.resize)
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -20,16 +31,29 @@ export default {
     }
     this.chart.dispose()
     this.chart = null
+    window.removeEventListener('resize', this.resize)
   },
   methods: {
     setData(option) {
       this.initChart(option)
     },
     initChart(option) {
-      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart = echarts.init(this.$refs.chart, 'macarons')
 
       this.chart.setOption(option)
-    }
+    },
+    resize() {
+      if (this.resizeTime) {
+        this.resizeTime = false
+        if (this.chart) {
+
+          this.chart.resize()
+        }
+        setTimeout(() => {
+          this.resizeTime = true
+        }, 16)
+      }
+    },
   }
 }
 </script>