工厂驾驶舱样式

src/views/copilot/factoryData/components/Store.vue

@@ -1,15 +1,11 @@
 <template>
-  <div
-    ref="chart"
-    style="width: 100%"
-    :style="{ height: vHeight + 'vh' }"
-  ></div>
+  <div id="factoryStoreChart" style="width: 100%; height: 100%"></div>
 </template>
 <script>
-import chartMixin from "@/mixins/chart.js";
+import { debounce } from "@/utils/debounce";
+import * as echarts from "echarts";
 export default {
   name: "Store",
-  mixins: [chartMixin],
   props: {
     vHeight: {
       type: Number,
@@ -28,6 +24,7 @@ export default {
     return {
       isFullscreen: false,
       actualOptions: null,
+      chart: "",
       options: {
         grid: {
           left: "3%",
@@ -134,18 +131,39 @@ export default {
     },
   },
   mounted() {
-    console.log("store");
-    const actualOptions = JSON.parse(JSON.stringify(this.options));
-    actualOptions.series[0].data = this.series[0].data;
-    actualOptions.series[0].name = this.series[0].name;
-    this.actualOptions = actualOptions;
-    this.initOptions(actualOptions);
-
     // if (screenfull.isEnabled) {
     //   screenfull.on("change", () => {
     //     this.isFullscreen = screenfull.isFullscreen;
     //   });
     // }
+    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(document.getElementById("factoryStoreChart"));
+      const actualOptions = JSON.parse(JSON.stringify(this.options));
+      actualOptions.series[0].data = this.series[0].data;
+      actualOptions.series[0].name = this.series[0].name;
+      this.actualOptions = actualOptions;
+      this.chart.setOption(actualOptions);
+    },
   },
 };
 </script>