浏览代码

Merge remote-tracking branch 'origin/master'

# Conflicts:
#	songhua-ui/src/views/index/index.vue
qinhouyu 1 年之前
父节点
当前提交
a9eddd2850
共有 2 个文件被更改,包括 82 次插入34 次删除
  1. 7 1
      songhua-ui/src/api/ship/diqiu.js
  2. 75 33
      songhua-ui/src/views/index/index.vue

+ 7 - 1
songhua-ui/src/api/ship/diqiu.js

@@ -3271,6 +3271,9 @@ export function getMap() {
         { start: 1, end: 9, label: '1-9人' },
         { start: 0, end: 0, label: '0人' }
       ],
+      textStyle: {
+        color: '#fff' // 标题文字颜色
+      },
       color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea']
     },
 
@@ -3283,7 +3286,10 @@ export function getMap() {
         roam: true,
         label: {
           normal: {
-            show: true //省份名称
+            show: true, //省份名称
+            textStyle: {
+              color: '#fff' // 标题文字颜色
+            },
           },
           emphasis: {
             show: false

+ 75 - 33
songhua-ui/src/views/index/index.vue

@@ -117,19 +117,19 @@
               <div class="wholeCountry">
                 <h4>当日平台总成交额 </h4>
                 <div class="money">
-                  <span>1</span>
-                  <span>5</span>
-                  <span>3</span>
-                  <span>8</span>
-                  <span>9</span>
-                  <span>7</span>
-                  <span>4</span>
-                  <span>5</span>
+                  <span>{{getFirstDigit(0)}}</span>
+                  <span>{{getFirstDigit(1)}}</span>
+                  <span>{{getFirstDigit(2)}}</span>
+                  <span>{{getFirstDigit(3)}}</span>
+                  <span>{{getFirstDigit(4)}}</span>
+                  <span>{{getFirstDigit(5)}}</span>
+                  <span>{{getFirstDigit(6)}}</span>
+                  <span>{{getFirstDigit(7)}}</span>
                 </div>
-                <div class="_count">当日累计总游客数<ins>234856</ins>人</div>
+                <div class="_count">当日累计总游客数<ins>{{ peopleNum }}</ins>人</div>
               </div>
               <div class="map bor">
-                <div id="mapByPerson" style="width: 740px;height: 570px"></div>
+                <div id="mapByPerson" style="width: 740px;height: 426px"></div>
               </div>
 
             </div>
@@ -251,25 +251,32 @@ export default {
       moreMeunSmalLeft_3:false,
       regionInShowOne:false,
       regionInShowTwo:true,
+      money:15389740,
+      peopleNum:234856,
     }
   },
   mounted() {
     //近一个月排行
-    this.chartRankOneMonthGet()
+    this.chartRankOneMonthGet();
     //近一年销售
-    this.chartRankOneSaleGet()
+    this.chartRankOneSaleGet();
     //客源地省份
-    this.chartRankOneCityGet()
+    this.chartRankOneCityGet();
     //游客年龄
-    this.chartRankOneAgeGet()
+    this.chartRankOneAgeGet();
     //支付方式与购买渠道
-    this.chartRankOnePayGet()
+    this.chartRankOnePayGet();
     //停车场
-    this.chartRankOneParkGet()
+    this.chartRankOneParkGet();
     //人流量排行
-    this.chartRankOneMbsGet()
+    this.chartRankOneMbsGet();
     //地图
-    setTimeout(this.getMapByPerson(),100)
+    this.getMapByPerson();
+    let _this = this;
+    setInterval(function(){
+      _this.money += Math.round(Math.random()*100);
+      _this.peopleNum += Math.round(Math.random()*100);
+    },3000)
   },
   methods: {
     selectByMonth(val){
@@ -677,7 +684,7 @@ export default {
       let option = {
         grid: {
           left: "2%",
-          right: "12%",
+          right: "2%",
           bottom: "2%",
           top: "2%",
           containLabel: true,
@@ -687,8 +694,24 @@ export default {
           axisPointer: {
             type: "shadow",
           },
+          confine: true,
+          textStyle: {
+            fontSize: 13,
+            color: "rgba(255, 255, 255, 0.8)",
+          },
           formatter: function (params) {
-            return params[0].axisValueLabel + ": "+params[0].value + '%'
+            return (
+              params[0].name +
+              "<br/>" +
+              "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background:linear-gradient(90deg, #388CFF 0% ,#6CFEFF 100%)'></span>" +
+              params[0].seriesName +
+              " : " +
+              params[0].value
+                .toLocaleString()
+                .toString()
+                .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,") +
+              " 辆/天"
+            );
           },
         },
         xAxis: {
@@ -697,14 +720,33 @@ export default {
         },
         yAxis: [
           {
-            show:false,
             type: "category",
+            inverse: true,
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 20,
+                color: "rgba(255, 255, 255, 0.8)",
+              },
+              formatter: function (name) {
+                return name + ": ";
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
             data: [
-              "成人票",
-              "儿童票",
-              "船票",
-              "免费票",
-              "亲子票",
+              "香榭丽",
+              "拉斯维",
+              "格林",
+              "密歇根",
+              "格拉西",
             ],
           },
           {
@@ -726,16 +768,15 @@ export default {
                   .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,");
               },
             },
-            data: [5, 5, 10, 30, 50],
+            data: [50000, 22000, 10000, 5000, 2000],
           },
         ],
         series: [
           {
-            name: "人流量占比",
+            name: "车辆",
             type: "bar",
             zlevel: 1, //通过 zlevel 设置层级
             barWidth: 10,
-            inverse: true,
             itemStyle: {
               normal: {
                 barBorderRadius: 10,
@@ -754,15 +795,14 @@ export default {
                 ]),
               },
             },
-            // data: [60, 30, 10, 5, 5],
-            data: [5, 5, 10, 30, 50],
+            data: [50000, 22000, 10000, 5000, 2000],
           },
           {
             name: "背景",
             type: "bar",
             barWidth: 10,
             barGap: "-100%", //两条柱状图重合
-            data: [100, 100, 100, 100, 100],
+            data: [50000, 50000, 50000, 50000, 50000],
             itemStyle: {
               normal: {
                 color: "rgba(108, 254, 255, 0.3)",
@@ -790,7 +830,9 @@ export default {
         this.getMapByPerson()
       }
     },
-
+    getFirstDigit(num) {
+      return Number(String(this.money).charAt(num));
+    }
   },
 
 }