客流量

songhua-system/src/main/resources/mapper/system/ShhTouristFlowOfScenicSpotsMapper.xml

@@ -100,5 +100,20 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             shh_tourist_flow_of_scenic_spots
         GROUP BY
             `month`
+        ORDER BY
+            CASE `month`
+                WHEN '1月' THEN 1
+                WHEN '2月' THEN 2
+                WHEN '3月' THEN 3
+                WHEN '4月' THEN 4
+                WHEN '5月' THEN 5
+                WHEN '6月' THEN 6
+                WHEN '7月' THEN 7
+                WHEN '8月' THEN 8
+                WHEN '9月' THEN 9
+                WHEN '10月' THEN 10
+                WHEN '11月' THEN 11
+                WHEN '12月' THEN 12
+                END;
     </select>
 </mapper>

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

@@ -1,15 +1,15 @@
 <template>
-  <div style=" height: 100vh; display: grid; place-content: center;">
-    <div style="width: 1000px; " id="echarts-container"></div>
+  <div>
+    <div id="echarts-container"></div>
   </div>
 </template>
 
 <script>
-// import echarts from 'echarts';
 import * as echarts from 'echarts'
 import html2canvas from 'html2canvas';
 import jsPDF from 'jspdf';
-import { passengerFlowList} from "@/api/system/spots";
+import { passengerFlowList } from "@/api/system/spots";
+
 export default {
   data() {
     return {
@@ -17,7 +17,7 @@ export default {
     };
     // 可根据实际情况添加更多设备列表
   },
- created() {
+  created() {
     this.last1();
   },
   methods: {
@@ -45,7 +45,7 @@ export default {
       // 配置Echarts选项
       let option = {
         title: {
-          text: '2024年松花湖景区客流量矢量图',
+          text: '松花湖景区客流量矢量图',
           left: 'center',
           textStyle: {
             fontSize: 30, // 设置字体大小，可根据需要调整数值
@@ -82,11 +82,46 @@ export default {
             }
           }
         },
+        toolbox: {
+          feature: {
+            dataView: { show: true, readOnly: false },
+            magicType: { show: true, type: ['line', 'bar'] },
+            restore: { show: true },
+            saveAsImage: { show: true }
+          },
+          right: '15%' // 将toolbox设置为距离右侧10%的位置，你可以根据实际需求调整这个值
+        },
         legend: {
-          top: '95%',
+          top: '10%',
           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: '船客流量',
@@ -95,15 +130,15 @@ export default {
             data: shipGuestData,
             itemStyle: {
               normal: {
-                color: "red",
+                color: "#5470C6",
                 label: {
                   show: true,
                   textStyle: {
-                    color: '#ccc'
+                    color: '#131212'
                   },
                   position: "inside",
                   formatter: function(p) {
-                    return p.value > 0 ? (p.value) : '';
+                    return p.value > 0 ? ("游船"+"\n"+p.value + "\n万"+"\n人次") : '';
                   }
                 }
               }
@@ -116,15 +151,15 @@ export default {
             data: sightseeingCarGuestData,
             itemStyle: {
               normal: {
-                color: 'yellow',
+                color: '#EE6666',
                 label: {
                   show: true,
                   textStyle: {
-                    color: '#ccc'
+                    color: '#131212'
                   },
                   position: "inside",
                   formatter: function(p) {
-                    return p.value > 0 ? (p.value) : '';
+                    return p.value > 0 ? ("观光车"+"\n"+p.value + "\n万"+"\n人次") : '';
                   }
                 }
               }
@@ -137,15 +172,15 @@ export default {
             data: wuhuIslandGuestData,
             itemStyle: {
               normal: {
-                color: "green",
+                color: '#91CC75',
                 label: {
                   show: true,
                   textStyle: {
-                    color: '#ccc'
+                    color: '#131212'
                   },
                   position: "inside",
                   formatter: function(p) {
-                    return p.value > 0 ? (p.value) : '';
+                    return p.value > 0 ? ("五虎岛"+"\n"+p.value + "\n万"+"\n人次") : '';
                   }
                 }
               }
@@ -158,15 +193,15 @@ export default {
             data: seaWaveGuestData,
             itemStyle: {
               normal: {
-                color: "blue",
+                color: '#FAC858',
                 label: {
                   show: true,
                   textStyle: {
-                    color: '#ccc'
+                    color: '#131212'
                   },
                   position: "inside",
                   formatter: function(p) {
-                    return p.value > 0 ? (p.value) : '';
+                    return p.value > 0 ? ("西海浪"+"\n"+p.value + "\n万"+"\n人次") : '';
                   }
                 }
               }
@@ -179,21 +214,20 @@ export default {
             data: wolongLakeGuestData,
             itemStyle: {
               normal: {
-                color: "purple",
+                color: '#73C0DE',
                 label: {
                   show: true,
                   textStyle: {
-                    color: '#ccc'
+                    color: '#131212'
                   },
                   position: "inside",
                   formatter: function(p) {
-                    return p.value > 0 ? (p.value) : '';
+                    return p.value > 0 ? ("卧龙潭"+"\n"+p.value + "\n万"+"\n人次") : '';
                   }
                 }
               }
             },
           },
-
           {
             name: "总客流量",
             type: "line",
@@ -206,22 +240,22 @@ export default {
                   color: '#0000ff'
                 }, {
                   offset: 1,
-                  color: '#00ffff'
+                  color: '#0000ff'
                 }]),
                 barBorderRadius: 0,
                 label: {
                   show: true,
                   position: "top",
                   formatter: function (p) {
-                    console.log("======================",p)
-                    return p.value > 0 ? (p.name+p.seriesName+p.value+"万人次") : '';
+                    return p.value > 0? (p.name+p.seriesName+p.value+"万人次") : '';
                   }
                 }
               }
             },
             data: scenicSpotGuestData
           },
-        ]
+        ],
+
       };
       myChart.setOption(option);
     },
@@ -239,7 +273,10 @@ export default {
 
 <style>
 #echarts-container {
-  width: 100%;
-  height: 400px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 150px;
+  bottom: 50px;
 }
 </style>