延迟加载客流量

songhua-ui/src/views/system/spots/VisitorFlowChart.vue

@@ -5,9 +5,7 @@
 </template>
 
 <script>
-import * as echarts from 'echarts'
-import html2canvas from 'html2canvas';
-import jsPDF from 'jspdf';
+import * as echarts from 'echarts';
 import { passengerFlowList } from "@/api/system/spots";
 
 export default {
@@ -15,22 +13,23 @@ export default {
     return {
       Public1: {},
     };
-    // 可根据实际情况添加更多设备列表
   },
-  created() {
-    this.last1();
+  mounted() {
+    // 在组件挂载完成后，延迟600ms调用初始化方法刷新数据和图表
+    setTimeout(() => {
+      this.initChartDataAndEcharts();
+    }, 600);
   },
   methods: {
-    last1() {
-      passengerFlowList().then(response => {
-        this.Public1 = response.data;
-        this.$nextTick(() => {
+    initChartDataAndEcharts() {
+        passengerFlowList().then((response) => {
+          this.Public1 = response.data;
           this.initEcharts(this.Public1);
-        });
-      });
+        })
     },
     initEcharts(val) {
-      let myChart = echarts.init(document.getElementById('echarts-container'));
+      // this.$nextTick(() => {
+      let myChart  = echarts.init(document.getElementById('echarts-container'));
       // 从后端数据中获取x轴数据（月份）
       let xAxisData = val.labelData;
       // 从后端数据中获取各种客流量数据
@@ -75,7 +74,7 @@ export default {
           type: 'category',
         },
         yAxis: {
-          splitLine: {show: false},
+          splitLine: { show: false },
           axisLine: {
             lineStyle: {
               color: '#ccc'
@@ -96,32 +95,6 @@ export default {
           left: 'center',
           orient: 'horizontal'
         },
-        // "dataZoom": [{
-        //   "show": true,
-        //   "height": 8,
-        //   "xAxisIndex": [
-        //     0
-        //   ],
-        //   bottom: '8%',
-        //   "start": 10,
-        //   "end": 90,
-        //   handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
-        //   handleSize: '110%',
-        //   handleStyle: {
-        //     color: "#73C0DE",
-        //
-        //   },
-        //   textStyle: {
-        //     color: "#fff"
-        //   },
-        //   borderColor: "#90979c"
-        // }, {
-        //   "type": "inside",
-        //   "show": true,
-        //   "height": 15,
-        //   "start": 1,
-        //   "end": 35
-        // }],
         series: [
           {
             name: '船客流量',
@@ -137,8 +110,8 @@ export default {
                     color: '#131212'
                   },
                   position: "inside",
-                  formatter: function(p) {
-                    return p.value > 0 ? ("游船"+"\n"+p.value + "\n万"+"\n人次") : '';
+                  formatter: function (p) {
+                    return p.value > 0? ("游船" + "\n" + p.value + "\n万" + "\n人次") : '';
                   }
                 }
               }
@@ -158,8 +131,8 @@ export default {
                     color: '#131212'
                   },
                   position: "inside",
-                  formatter: function(p) {
-                    return p.value > 0 ? ("观光车"+"\n"+p.value + "\n万"+"\n人次") : '';
+                  formatter: function (p) {
+                    return p.value > 0? ("观光车" + "\n" + p.value + "\n万" + "\n人次") : '';
                   }
                 }
               }
@@ -179,8 +152,8 @@ export default {
                     color: '#131212'
                   },
                   position: "inside",
-                  formatter: function(p) {
-                    return p.value > 0 ? ("五虎岛"+"\n"+p.value + "\n万"+"\n人次") : '';
+                  formatter: function (p) {
+                    return p.value > 0? ("五虎岛" + "\n" + p.value + "\n万" + "\n人次") : '';
                   }
                 }
               }
@@ -200,8 +173,8 @@ export default {
                     color: '#131212'
                   },
                   position: "inside",
-                  formatter: function(p) {
-                    return p.value > 0 ? ("西海浪"+"\n"+p.value + "\n万"+"\n人次") : '';
+                  formatter: function (p) {
+                    return p.value > 0? ("西海浪" + "\n" + p.value + "\n万" + "\n人次") : '';
                   }
                 }
               }
@@ -221,8 +194,8 @@ export default {
                     color: '#131212'
                   },
                   position: "inside",
-                  formatter: function(p) {
-                    return p.value > 0 ? ("卧龙潭"+"\n"+p.value + "\n万"+"\n人次") : '';
+                  formatter: function (p) {
+                    return p.value > 0? ("卧龙潭" + "\n" + p.value + "\n万" + "\n人次") : '';
                   }
                 }
               }
@@ -247,7 +220,7 @@ export default {
                   show: true,
                   position: "top",
                   formatter: function (p) {
-                    return p.value > 0? (p.name+p.seriesName+p.value+"万人次") : '';
+                    return p.value > 0? (p.name + p.seriesName + p.value + "万人次") : '';
                   }
                 }
               }
@@ -257,17 +230,12 @@ export default {
         ],
 
       };
-      myChart.setOption(option);
+        myChart.setOption(option);
+    // });
     },
-    downloadChart() {
-      html2canvas(document.querySelector('#echarts-container')).then(canvas => {
-        let imgData = canvas.toDataURL('image/png');
-        let pdf = new jsPDF();
-        pdf.addImage(imgData, 'PNG', 0, 0);
-        pdf.save('visitor_flow_chart.jpg');
-      });
-    }
-  }
+
+
+  },
 };
 </script>