src/views/copilot/components/BarChartBase.vue

@@ -8,33 +8,25 @@
 <template>
   <chart-container class="bar-chart-base">
     <div class="legend">
-      <span
+      <span v-for="item in legend" :key="item.label" class="legend-item"
-        v-for="item in legend"
+        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
-        :key="item.label"
-        class="legend-item"
-        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
-        >{{ item.label }}</span
-      >
     </div>
-    <div
+    <div ref="chart" :style="{ height: '95%',width: width}"></div>
-      ref="chart"
-      style="max-width: 40vw"
-      :style="{ height: vHeight + 'vh' }"
-    ></div>
   </chart-container>
 </template>
 
 <script>
 import screenfull from "screenfull";
 import ChartContainer from "./ChartContainer.vue";
-import chartMixin from "@/mixins/chart.js";
+import { debounce } from "@/utils/debounce";
-
+// import chartMixin from "@/mixins/chart.js";
+import * as echarts from "echarts";
 export default {
   name: "BarChartBase",
   components: {
     ChartContainer,
   },
-  mixins: [chartMixin],
+  // mixins: [chartMixin],
   props: {
     vHeight: {
       type: Number,
@@ -59,6 +51,7 @@ export default {
   },
   data() {
     return {
+      width: '',
       isFullscreen: false,
       actualOptions: null,
       options: {
@@ -182,8 +175,26 @@ export default {
       },
     };
   },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
   watch: {
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    isOpen(val) {
+      // console.log(val)
+      if (val === true) {
+        console.log('ztl')
+        this.width = 95 + '%'
+        this.canvasReset()
+
+        console.log(this.width)
+      } else {
+        this.watch = 100 + '%'
+        this.canvasReset()
+      }
+    },
     isFullscreen(val) {
       this.actualOptions.series.map((item) => {
         item.barWidth = val ? 18 : 12;
@@ -191,11 +202,26 @@ 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);
+      if (val === false && this.isOpen === true) {
+        console.log(val)
+        this.width = 97 + '%'
+        this.canvasReset()
+      } else if (val === false && this.isOpen === false) {
+        this.watch = 100 + '%'
+        this.canvasReset()
+      }
+      // this.actualOptions.series.map((item) => {
+      //   item.barWidth = val ? 18 : 12;
+      // });
+      // 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.initChart(this.actualOptions);
     },
     series(val) {
       if (!val) {
-        this.initOptions(this.options);
+        this.initChart(this.options);
         return;
       }
       const actualOptions = JSON.parse(JSON.stringify(this.options));
@@ -205,18 +231,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;
       });
     }
+    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>