提交

src/views/Country/components/flowCharts.vue

@@ -26,7 +26,7 @@ echarts.use([
   DataZoomComponent,
   VisualMapComponent,
 ]);
-
+let lineTypeTwoCharts = undefined;
 export default {
   name: "countryLineChart",
   props: ["list", "keys", "xName", "subsection"],
@@ -34,7 +34,6 @@ export default {
     return {
       leftList: [],
       rightList: [],
-      chart: undefined,
       xText: {},
     };
   },
@@ -73,20 +72,22 @@ export default {
       let values = [],
         keys = [];
       for (let o = 0; o < list.length; o++) {
-        const v = list[o], key = v[this.xName];
+        const v = list[o],
+          key = v[this.xName];
         keys.push(key);
-        let k = 0, b = 0;
+        let k = 0,
+          b = 0;
         for (let i = 0; i < this.subsection.length; i++) {
-            const put = this.subsection[i];
-            if(put.start_x - 0 <= key && put.end_x - 0 >= key){
-                k = put.k;
-                b = put.b;
-                break
-            }
+          const put = this.subsection[i];
+          if (put.start_x - 0 <= key && put.end_x - 0 >= key) {
+            k = put.k;
+            b = put.b;
+            break;
+          }
         }
         for (let i = 0; i < this.keys.length; i++) {
           if (!values[i]) values[i] = [];
-          values[i][o] = (k * key + b)*100;
+          values[i][o] = (k * key + b) * 100;
         }
       }
       return {
@@ -107,9 +108,9 @@ export default {
     },
     createChart() {
       if (!this.$refs.countryLineChart) return;
-      this.chart = echarts.init(this.$refs.countryLineChart);
+      lineTypeTwoCharts = echarts.init(this.$refs.countryLineChart);
       let chartData = this.formatte(this.list);
-      this.chart.resize({
+      lineTypeTwoCharts.resize({
         height: (this.$refs.countryLineChart.offsetWidth * 6) / 16,
       });
       var option = {
@@ -137,14 +138,20 @@ export default {
             let t = "<table class='tool'>",
               inli = o.input || [],
               outli = o.output || [];
-            t += "<tr><td>流入</td><td></td><td>" + (o.in * 100).toFixed(2) + "% </td></tr>";
+            t +=
+              "<tr><td>流入</td><td></td><td>" +
+              (o.in * 100).toFixed(2) +
+              "% </td></tr>";
             for (let i = 0; i < inli.length; i++) {
               const v = inli[i];
               t += `<tr><td>${v.channel}</td><td>${v.epg_name || ""}</td><td>${(
                 v.value * 100
               ).toFixed(2)}%</td> </tr>`;
             }
-            t += "<tr><td>流出</td><td></td><td>" + (o.out * 100).toFixed(2) + "% </td></tr>";
+            t +=
+              "<tr><td>流出</td><td></td><td>" +
+              (o.out * 100).toFixed(2) +
+              "% </td></tr>";
             for (let i = 0; i < outli.length; i++) {
               const v = outli[i];
               t += `<tr><td>${v.channel}</td>  <td>${v.epg_name ||
@@ -187,20 +194,20 @@ export default {
         }),
       };
 
-      option && this.chart.setOption(option);
+      option && lineTypeTwoCharts.setOption(option);
     },
 
     formatsubsection() {
-        let bei = 100;
+      let bei = 100;
       for (let i = 0; i < this.subsection.length; i++) {
         const v = this.subsection[i];
         let sx = v.start_x,
           sy = v.start_y,
           ex = v.end_x,
           ey = v.end_y;
-        let k = ((ey*bei - sy*bei) / bei / (ex - sx)).toFixed(8) - 0;
+        let k = ((ey * bei - sy * bei) / bei / (ex - sx)).toFixed(8) - 0;
         let b = sy - k * sx;
-        if(k === 0) k = 0;
+        if (k === 0) k = 0;
         v.k = k;
         v.b = b;
       }
@@ -209,17 +216,18 @@ export default {
 
   watch: {
     list() {
-      if (this.chart) this.chart.dispose();
-    this.formatsubsection();
-    this.createChart();
+      if (lineTypeTwoCharts) lineTypeTwoCharts.dispose();
+      this.formatsubsection();
+      this.createChart();
     },
   },
   mounted() {
+    if (lineTypeTwoCharts) lineTypeTwoCharts.dispose();
     this.formatsubsection();
     this.createChart();
   },
   beforeUnmount: function() {
-    this.chart.dispose();
+    if (lineTypeTwoCharts) lineTypeTwoCharts.dispose();
   },
   components: {},
 };

src/views/Country/components/lineCharts.vue

@@ -25,9 +25,12 @@ echarts.use([
   DataZoomComponent,
 ]);
 
+let lineTypeOneCharts = undefined;
+
 export default {
   name: "countryLineChart",
   props: ["list", "keys", "xName"],
+  c: 12,
   data: function() {
     return {
       leftList: [],
@@ -76,9 +79,9 @@ export default {
     },
     createChart() {
       if (!this.$refs.countryLineChart) return;
-      this.chart = echarts.init(this.$refs.countryLineChart);
+      lineTypeOneCharts = echarts.init(this.$refs.countryLineChart);
       let chartData = this.formatte(this.list);
-      this.chart.resize({
+      lineTypeOneCharts.resize({
         height: (this.$refs.countryLineChart.offsetWidth * 6) / 16,
       });
       var option = {
@@ -144,20 +147,21 @@ export default {
         }),
       };
 
-      option && this.chart.setOption(option);
+      option && lineTypeOneCharts.setOption(option);
     },
   },
   watch: {
     list() {
-      if (this.chart) this.chart.dispose();
+      if (lineTypeOneCharts) lineTypeOneCharts.dispose();
       this.createChart();
     },
   },
   mounted() {
+      if (lineTypeOneCharts) lineTypeOneCharts.dispose();
       this.createChart();
   },
   beforeUnmount: function() {
-    this.chart.dispose();
+    lineTypeOneCharts && lineTypeOneCharts.dispose();
   },
   components: {},
 };

src/views/Country/components/lineCharts1.vue

@@ -24,7 +24,7 @@ echarts.use([
   LegendComponent,
   DataZoomComponent,
 ]);
-
+let lineTypeThreeCharts = undefined;
 export default {
   name: "countryLineChart",
   props: ["list", "keys", "xName"],
@@ -32,7 +32,6 @@ export default {
     return {
       leftList: [],
       rightList: [],
-      chart: undefined,
     };
   },
   filters: {},
@@ -73,9 +72,9 @@ export default {
     },
     createChart() {
       if (!this.$refs.countryLineChart) return;
-      this.chart = echarts.init(this.$refs.countryLineChart);
+      lineTypeThreeCharts = echarts.init(this.$refs.countryLineChart);
       let chartData = this.formatte(this.list);
-      this.chart.resize({
+      lineTypeThreeCharts.resize({
         height: (this.$refs.countryLineChart.offsetWidth * 6) / 16,
       });
       var option = {
@@ -141,20 +140,21 @@ export default {
         }),
       };
 
-      option && this.chart.setOption(option);
+      option && lineTypeThreeCharts.setOption(option);
     },
   },
   watch: {
     list() {
-      if (this.chart) this.chart.dispose();
+      if (lineTypeThreeCharts) lineTypeThreeCharts.dispose();
       this.createChart();
     },
   },
   mounted() {
-      this.createChart();
+    lineTypeThreeCharts && lineTypeThreeCharts.dispose();
+    this.createChart();
   },
   beforeUnmount: function() {
-    this.chart.dispose();
+    lineTypeThreeCharts && lineTypeThreeCharts.dispose();
   },
   components: {},
 };

src/views/Country/components/pieCharts.vue

@@ -10,7 +10,7 @@ import { GaugeChart } from "echarts/charts";
 import { TooltipComponent } from "echarts/components";
 import { CanvasRenderer } from "echarts/renderers";
 echarts.use([CanvasRenderer, TooltipComponent, GaugeChart]);
-
+let pieTypeOneCharts = undefined;
 export default {
   name: "countryLineChart",
   props: ["list"],
@@ -24,15 +24,16 @@ export default {
   filters: {},
   watch: {
     list() {
+      pieTypeOneCharts && pieTypeOneCharts.dispose();
       this.createChart();
     },
   },
   methods: {
     createChart() {
       if (!this.$refs.countryLineChart) return;
-      if (!this.chart) {
-        this.chart = echarts.init(this.$refs.countryLineChart);
-        this.chart.resize({
+      if (!pieTypeOneCharts) {
+        pieTypeOneCharts = echarts.init(this.$refs.countryLineChart);
+        pieTypeOneCharts.resize({
           height: (this.$refs.countryLineChart.offsetWidth * 6) / 16,
         });
       }
@@ -40,7 +41,7 @@ export default {
         series: this.list.map((v, i) => {
           let y = i < 5 ? 25 : 75;
           return {
-              color: '#00bed0',
+            color: "#00bed0",
             type: "gauge",
             startAngle: 90,
             endAngle: -270,
@@ -82,7 +83,7 @@ export default {
                 title: {
                   offsetCenter: ["0%", "-15%"],
                   width: 100,
-                   overflow: 'truncate'
+                  overflow: "truncate",
                 },
                 detail: {
                   valueAnimation: true,
@@ -105,14 +106,15 @@ export default {
         }),
       };
 
-      option && this.chart.setOption(option);
+      option && pieTypeOneCharts.setOption(option);
     },
   },
   mounted() {
-      this.createChart();
+    pieTypeOneCharts && pieTypeOneCharts.dispose();
+    this.createChart();
   },
   beforeUnmount: function() {
-    this.chart.dispose();
+    pieTypeOneCharts && pieTypeOneCharts.dispose();
   },
   components: {},
 };