修改bug

src/views/copilot/components/LineChartBase.vue

@@ -8,33 +8,25 @@
 <template>
   <chart-container class="line-chart-base">
     <div class="legend">
-      <span
-        v-for="item in legend"
-        :key="item.label"
-        class="legend-item"
-        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
-        >{{ item.label }}</span
-      >
+      <span v-for="item in legend" :key="item.label" class="legend-item"
+        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
     </div>
-    <div
-      ref="chart"
-      style="max-width: 50vw"
-      :style="{ height: vHeight + 'vh' }"
-    ></div>
+    <div ref="chart" :style="{ height: '100%',width: width}"></div>
   </chart-container>
 </template>
 
 <script>
 import screenfull from "screenfull";
+import { debounce } from "@/utils/debounce";
 import ChartContainer from "./ChartContainer.vue";
-import chartMixin from "@/mixins/chart.js";
+// import chartMixin from "@/mixins/chart.js";
 import * as echarts from "echarts";
 export default {
   name: "LineChartBase",
   components: {
     ChartContainer,
   },
-  mixins: [chartMixin],
+  // mixins: [chartMixin],
   props: {
     vHeight: {
       type: Number,
@@ -59,6 +51,7 @@ export default {
   },
   data() {
     return {
+      width:'100%',
       isFullscreen: false,
       actualOptions: null,
       options: {
@@ -84,11 +77,11 @@ export default {
         // legend: {
         //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
         // },
-        toolbox: {
-          feature: {
-            saveAsImage: {}
-          }
-        },
+        // toolbox: {
+        //   feature: {
+        //     saveAsImage: {}
+        //   }
+        // },
         grid: {
           left: '3%',
           right: '4%',
@@ -366,7 +359,21 @@ export default {
       },
     };
   },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
   watch: {
+    isOpen(val) {
+      if (val === true) {
+        this.width = '100%-128px'
+        this.canvasReset()
+      } else {
+        this.watch = 100 + '%'
+        this.canvasReset()
+      }
+    },
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     isFullscreen(val) {
       this.actualOptions.series.map((item) => {
@@ -375,11 +382,11 @@ export default {
       this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
       this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
       this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-      this.initOptions(this.actualOptions);
+      this.initChart(this.actualOptions);
     },
     series(val) {
       if (!val) {
-        this.initOptions(this.options);
+        this.initChart(this.options);
         return;
       }
       const actualOptions = JSON.parse(JSON.stringify(this.options));
@@ -388,19 +395,42 @@ export default {
       actualOptions.series[1].data = val?.[1]?.data || [];
       actualOptions.series[1].name = val?.[1]?.name || "";
       this.actualOptions = actualOptions;
-      this.initOptions(actualOptions);
+      this.initChart(actualOptions);
     },
   },
-  mounted() {
-    this.actualOptions = this.options;
-    this.initOptions(this.options);
 
-    if (screenfull.isEnabled) {
-      screenfull.on("change", () => {
-        this.isFullscreen = screenfull.isFullscreen;
-      });
+  mounted() {
+    // if (screenfull.isEnabled) {
+    //   screenfull.on("change", () => {
+    //     this.isFullscreen = screenfull.isFullscreen;
+    //   });
+    // }
+    this.actualOptions = this.options
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
     }
   },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(this.$refs.chart);
+      this.chart.setOption(this.actualOptions);
+    },
+  },
 };
 </script>