提交

src/views/ChannelEPG/Channel.vue

@@ -71,7 +71,8 @@
         <el-table-column
           align="center"
           show-overflow-tooltip
-          prop="epg "
+          prop="epg"
+          width="300"
           label="具体节目"
           class-name="nowrap"
         />

src/views/Country/components/flowCharts.vue

@@ -27,7 +27,6 @@ echarts.use([
   VisualMapComponent,
 ]);
 
-let chart = undefined;
 export default {
   name: "countryLineChart",
   props: ["list", "keys", "xName", "subsection"],
@@ -95,79 +94,6 @@ export default {
         values,
       };
     },
-    updata() {
-      if (!chart) return;
-      //   let chartData = this.formatte(data);
-      chart.setOption(
-        {
-          tooltip: {
-            trigger: "axis",
-            axisPointer: {
-              type: "cross",
-              label: {
-                backgroundColor: "#6a7985",
-              },
-            },
-          },
-          legend: {
-            data: ["Line 1"],
-          },
-          toolbox: {
-            feature: {
-              saveAsImage: {},
-            },
-          },
-          grid: {
-            left: "3%",
-            right: "4%",
-            bottom: "3%",
-            containLabel: true,
-          },
-          xAxis: [
-            {
-              type: "category",
-              boundaryGap: false,
-              data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-            },
-          ],
-          yAxis: [
-            {
-              type: "value",
-            },
-          ],
-          series: [
-            {
-              name: "Line 1",
-              type: "line",
-              stack: "Total",
-              smooth: true,
-              lineStyle: {
-                width: 0,
-              },
-              showSymbol: false,
-              areaStyle: {
-                opacity: 0.8,
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: "rgb(128, 255, 165)",
-                  },
-                  {
-                    offset: 1,
-                    color: "rgb(1, 191, 236)",
-                  },
-                ]),
-              },
-              emphasis: {
-                focus: "series",
-              },
-              data: [140, 232, 101, 264, 90, 340, 250],
-            },
-          ],
-        },
-        true
-      );
-    },
     getTvName(tvId) {
       let li = config.channelNameList || [];
       let t = "";
@@ -181,9 +107,9 @@ export default {
     },
     createChart() {
       if (!this.$refs.countryLineChart) return;
-      chart = echarts.init(this.$refs.countryLineChart);
+      this.chart = echarts.init(this.$refs.countryLineChart);
       let chartData = this.formatte(this.list);
-      chart.resize({
+      this.chart.resize({
         height: (this.$refs.countryLineChart.offsetWidth * 6) / 16,
       });
       var option = {
@@ -261,7 +187,7 @@ export default {
         }),
       };
 
-      option && chart.setOption(option);
+      option && this.chart.setOption(option);
     },
 
     formatsubsection() {
@@ -280,12 +206,20 @@ export default {
       }
     },
   },
+
+  watch: {
+    list() {
+      if (this.chart) this.chart.dispose();
+    this.formatsubsection();
+    this.createChart();
+    },
+  },
   mounted() {
     this.formatsubsection();
     this.createChart();
   },
   beforeUnmount: function() {
-    chart.dispose();
+    this.chart.dispose();
   },
   components: {},
 };

src/views/Country/components/lineCharts.vue

@@ -147,8 +147,14 @@ export default {
       option && this.chart.setOption(option);
     },
   },
+  watch: {
+    list() {
+      if (this.chart) this.chart.dispose();
+      this.createChart();
+    },
+  },
   mounted() {
-    this.createChart();
+      this.createChart();
   },
   beforeUnmount: function() {
     this.chart.dispose();

src/views/Country/components/lineCharts1.vue

@@ -49,11 +49,11 @@ export default {
     formatte(list) {
       let values = [],
         k0 = this.keys[0],
-        keys = (list[0] || []).map(v=> v[this.xName]);
-        
+        keys = (list[0] || []).map(v => v[this.xName]);
+
       for (let o = 0; o < list.length; o++) {
         const v = list[o];
-        values.push(v.map(item => item[k0.key]))
+        values.push(v.map(item => item[k0.key]));
       }
       return {
         keys,
@@ -144,8 +144,14 @@ export default {
       option && this.chart.setOption(option);
     },
   },
+  watch: {
+    list() {
+      if (this.chart) this.chart.dispose();
+      this.createChart();
+    },
+  },
   mounted() {
-    this.createChart();
+      this.createChart();
   },
   beforeUnmount: function() {
     this.chart.dispose();

src/views/Country/components/pieCharts.vue

@@ -109,7 +109,7 @@ export default {
     },
   },
   mounted() {
-    this.createChart();
+      this.createChart();
   },
   beforeUnmount: function() {
     this.chart.dispose();