图表正常显示

Author: M3chD09

frontend/src/components/Chart.vue

@@ -1,10 +1,9 @@
 <template>
-  <div>
-    <div id="chart" style="width: 100%; height: 600px;"></div>
+  <v-card>
+    <div id="chart" style="width: 100%; height: 500px;"></div>
     <Notice ref="notice" />
-  </div>
+  </v-card>
 </template>
-
 <script>
 import timechart from "timechart";
 import Notice from "@/components/Notice.vue";
@@ -13,9 +12,9 @@ export default {
     Notice
   },
   data: () => ({
-    el: null,
+    ws: null,
     chart: null,
-    cColors: 0,
+    iColor: 0,
     colors: [
       "#F44336",
       "#9C27B0",
@@ -26,30 +25,41 @@ export default {
       "#795548"
     ]
   }),
+  created() {
+    this.initWS();
+  },
+  destroyed() {
+    this.ws.close();
+  },
   mounted() {
-    this.el = document.getElementById("chart");
-    this.chart = new timechart(this.el, {
+    const el = document.getElementById("chart");
+    this.chart = new timechart(el, {
       baseTime: Date.now() - performance.now(),
       series: [],
       xRange: { min: 0, max: 20 * 1000 },
       realTime: true
     });
-    var ws = new WebSocket("ws://" + window.location.host + "/ws");
-    ws.onopen = function() {
+  },
+  methods: {
+    initWS() {
+      this.ws = new WebSocket("ws://" + window.location.host + "/ws");
+      this.ws.onopen = this.WSonopen;
+      this.ws.onclose = this.WSclose;
+      this.ws.onmessage = this.WSonmessage;
+      this.ws.onerror = this.WSonerror;
+    },
+    WSonopen() {
       this.$refs.notice.show("连接成功", 0);
-    };
-    ws.onclose = function() {
+    },
+    WSclose() {
       this.$refs.notice.show("连接断开", 1);
-      ws = null;
-    };
-    ws.onmessage = function(evt) {
+    },
+    WSonmessage(evt) {
       this.praseWS(evt.data);
-    };
-    ws.onerror = function(evt) {
+    },
+    WSonerror(evt) {
       console.log("ERROR: " + evt.data);
-    };
-  },
-  methods: {
+    },
     praseWS(data) {
       if (data != "") {
         const jsonWS = JSON.parse(data);
@@ -65,10 +75,10 @@ export default {
           } else {
             this.chart.options.series.push({
               name: jsonWS.DataPack[i].Name,
-              color: this.colors[this.cColors],
+              color: this.colors[this.iColor],
               data: [{ x: jsonWS.DataPack[i].Tick, y: jsonWS.DataPack[i].Data }]
             });
-            this.cColors++;
+            this.iColor++;
           }
         }
         this.chart.update();