修改数据

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>