修改bug

src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue

@@ -1,40 +1,32 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 13:22:43
- * @LastEditTime: 2024-05-09 16:22:24
+ * @LastEditTime: 2024-05-13 16:19:17
  * @LastEditors: zhp
  * @Description:
 -->
 <template>
   <chart-container class="bar-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: 40vw"
-      :style="{ height: vHeight + 'vh' }"
-    ></div>
+    <div ref="chart" :style="{ height: '100%',width: width}"></div>
   </chart-container>
 </template>
 
 <script>
 import screenfull from "screenfull";
 import ChartContainer from "../../../../components/ChartContainer.vue";
-import chartMixin from "@/mixins/chart.js";
-
+// import chartMixin from "@/mixins/chart.js";
+import { debounce } from "@/utils/debounce";
+import * as echarts from "echarts";
 export default {
   name: "BarChartBase",
   components: {
     ChartContainer,
   },
-  mixins: [chartMixin],
+  // mixins: [chartMixin],
   props: {
     vHeight: {
       type: Number,
@@ -64,7 +56,7 @@ export default {
       options: {
         grid: {
           left: "5%",
-          right: "4%",
+          right: "0%",
           bottom: "3%",
           top: "15%",
           containLabel: true,
@@ -182,7 +174,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) => {
@@ -191,11 +197,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;
       }
       console.log(val)
@@ -205,19 +211,41 @@ 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;
-      });
+    // 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>