调整页面的数据显示异常

src/views/HomeView.vue

@@ -15,7 +15,7 @@
     <div class="numbox">
       <span class="numicon"><img src="../assets/img/icon01.png" /></span>
       <div class="numdiv">
-        <p class="ndtitle">{{ day_num }}</p>
+        <p class="ndtitle" ref="dynum">{{ day_num }}</p>
         <p class="nddesc">今日进馆总人数</p>
       </div>
     </div>
@@ -54,18 +54,18 @@
       <div class="cglist cgleft">
         <ul>
           <li>
-            <span>体育场</span>
-            <span>20%</span>
+            <span>{{ tycra.name }}</span>
+            <span>{{ tycra.value }}</span>
             <span><img src="../assets/img/tyc_icon.png" /></span>
           </li>
           <li>
-            <span>体育馆</span>
-            <span>12%</span>
+            <span>{{tygra.name}}</span>
+            <span>{{ tygra.value }}</span>
             <span><img src="../assets/img/tyg_icon.png" /></span>
           </li>
           <li>
-            <span>游泳场馆</span>
-            <span>12%</span>
+            <span>{{yygra.name}}</span>
+            <span>{{ yygra.value }}</span>
             <span><img src="../assets/img/yyg_icon.png" /></span>
           </li>
         </ul>
@@ -87,8 +87,8 @@
           </li>
           <li>
             <span><img src="../assets/img/bwg_icon.png" /></span>
-            <span>12%</span>
-            <span>博物馆</span>
+            <span>{{bwgra.value}}</span>
+            <span>{{bwgra.name}}</span>
           </li>
         </ul>
       </div>
@@ -114,37 +114,6 @@
           :class="[{ pcrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90 }, { pcrate3: parseInt(item.proportion) >= 90 }]">{{
             item.proportion }}</span>
       </div>
-
-      <!-- <div class="pcg_item">
-        <span class="pcpos">图书馆</span>
-        <p class="pcval">23,456</p>
-        <span class="pcrate">40%</span>
-      </div>
-
-      <div class="pcg_item">
-        <span class="pcpos">体育馆</span>
-        <p class="pcval">23,456</p>
-        <span class="pcrate">40%</span>
-      </div>
-
-      <div class="pcg_item">
-        <span class="pcpos">文化馆</span>
-        <p class="pcval">23,456</p>
-        <span class="pcrate">40%</span>
-      </div>
-
-      <div class="pcg_item">
-        <span class="pcpos">游泳场馆</span>
-        <p class="pcval">23,456</p>
-        <span class="pcrate">40%</span>
-      </div>
-
-      <div class="pcg_item">
-        <span class="pcpos">博物馆</span>
-        <p class="pcval">23,456</p>
-        <span class="pcrate">40%</span>
-      </div> -->
-
     </div>
 
 
@@ -155,6 +124,9 @@
 import * as echarts from 'echarts';
 import * as btApi from '../api/home'
 
+// 数字变化效果
+import { numGrow,ecMaxVal } from '@/utils/comm';
+
 // 引入api
 import * as homeApi from '@/api/home'
 
@@ -168,6 +140,18 @@ export default {
       kltdata: [],
       // 客流值数组
       klvdata: [],
+      //  环图数据
+      kcdata:[],
+      // 环形的比例值
+      // tyc
+      tycra:[],
+      //tyg
+      tygra:[],
+      //yyg
+      yygra:[],
+      // bwg
+      bwgra:[],
+
       day_num: 0,
       week_num: 0,
       mon_num: 0,
@@ -182,9 +166,13 @@ export default {
   //   });
   // },
   mounted() {
-    this.showorders()
-    this.cgrs_line()
-    this.cgchart()
+      // 客流趋势
+      this.getDataIn()
+
+
+    // this.showorders()
+    // this.cgrs_line()
+    // this.cgchart()
 
     this.getStat();
     this.getHomeBarData();
@@ -197,15 +185,20 @@ export default {
   methods: {
     // 获取对应的参数
     btgetdata(type) {
-      console.log(type)
-      let rqtp;
+      let nrq;
       switch (type) {
-        case 'd': rqtp = "daily"; break;
-        case 'm': rqtp = "monthly"; break;
-        case 'y': rqtp = "yearly"; break;
+        case 'd': nrq = "daily"; break;
+        case 'm': nrq = "monthly"; break;
+        case 'y': nrq = "yearly"; break;
       }
+      return nrq;
+    },
+    
+    // 获取不同时期的数据
+    getDataIn(){
+      const reqType = this.btgetdata(this.klselt);
       //
-      btApi.allGroupTimeNum({ 'granularity': rqtp }).then(res => {
+      btApi.allGroupTimeNum({ 'granularity': reqType }).then(res => {
         const kldata = res.data.data.allTimeData
         // 对应的键名
         let kltd = new Array;
@@ -215,14 +208,48 @@ export default {
           kltd.push(item)
           tmpkvd.push(kldata[item].num)
         })
+
+        // 赋值
         this.kltdata = kltd
         this.klvdata = tmpkvd
+        // 圆柱
+        this.showorders()
+        // 环图数据
+        const ccdata = res.data.data.groupsData
+        let tcdata =new Array;
+        ccdata.forEach(function(item,idx){
+          // idx
+          tcdata.push({
+            // value: item.proportion,
+            value: item.noRepeatInNum,
+            name: item.groupName
+          })
+        });
+        //
+        let tcidata = new Array;
+        ccdata.forEach(item=>{
+          // crcle infomation 
+          tcidata.push({
+            name:item.groupName,
+            rate:item.proportion
+          });
+        });
+        // console.log(tcidata)
+        this.kcdata = tcdata
+        // 环形图
+        this.cgchart()
+        // this.kcrate = tcidata
+        this.tycra = tcidata[0]
+        this.tygra = tcidata[1]
+        this.yygra = tcidata[2]
+        this.bwgra = tcidata[3]
+
       });
     },
+
     //选择年月日中的某个
     selitem(type) {
       this.klselt = type;
-      this.btgetdata(type)
     },
     // 圆柱图
     showorders() {
@@ -232,8 +259,10 @@ export default {
       // 指定图表的配置项和数据
       var option;
 
-      var data = [100, 200, 100, 200, 100, 200, 250, 50, 30, 130, 150, 110, 120]
-      // var data = this.klvdata
+      //var cdata = [100, 200, 100, 200, 100, 200, 250, 50, 30, 130, 150, 110, 120]
+       var cdata = this.klvdata
+       // y轴的最大值
+       var ytop = myChart.
       // var data = [Math.random() * 300]
       option = {
         // backgroundColor: '#031245',
@@ -290,8 +319,7 @@ export default {
             },
             show: true,
           },
-          // data: this.kltdata,
-          data: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '20:00', '21:00', '22:00'],
+          data: this.kltdata,
           type: 'category',
         },
         yAxis: {
@@ -326,7 +354,7 @@ export default {
         },
         series: [
           {
-            data: data,
+            data: cdata,
             type: 'bar',
             barMaxWidth: 'auto',
             barWidth: 15,
@@ -362,7 +390,7 @@ export default {
             color: '#fff',
           },
           {
-            data: data,
+            data: cdata,
             type: 'pictorialBar',
             barMaxWidth: '15',
             symbolPosition: 'end',
@@ -371,8 +399,10 @@ export default {
             symbolSize: [15, 7],
             zlevel: 2,
           },
+          // 背景柱子的数值
           {
-            data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
+            data: ecMaxVal(cdata),
+            //data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
             type: 'bar',
             barMaxWidth: 'auto',
             barWidth: 15,
@@ -408,21 +438,6 @@ export default {
             }
           },
         ],
-        tooltip: {
-          show: "true",
-          trigger: 'item',
-          backgroundColor: 'rgba(0,0,0,0.7)', // 背景
-          padding: [8, 10], //内边距
-          textStyle: {
-            color: '#fff'
-          },
-          extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
-          formatter: function (params) {
-            if (params.seriesName != "") {
-              return params.name + ' : 有 ' + params.value + ' 人';
-            }
-          },
-        },
 
       };
 
@@ -466,14 +481,7 @@ export default {
             labelLine: {
               show: false
             },
-            data: [
-              { value: 348, name: 'Search Engine' },
-              { value: 335, name: 'Direct' },
-              { value: 480, name: 'Email' },
-              { value: 384, name: 'Union Ads' },
-              { value: 600, name: 'Video Ads' },
-              { value: 700, name: 'Video Adss' }
-            ]
+            data: this.kcdata
           }
         ]
       };
@@ -632,15 +640,18 @@ export default {
 
     getStat() {
       let that = this
-      console.log(that);
+      console.log("stat");
       homeApi.allGroupNum().then(res => {
         // get allTimeData
         const tmpdata = res.data.returnData
         console.log(tmpdata);
-        this.day_num = tmpdata.day.noRepeatInNum
-        this.week_num_num = tmpdata.week.noRepeatInNum
-        this.mon_num = tmpdata.month.noRepeatInNum
-        this.year_num = tmpdata.year.noRepeatInNum
+        that.day_num = tmpdata.day.noRepeatInNum
+        that.week_num = tmpdata.week.noRepeatInNum
+        that.mon_num = tmpdata.month.noRepeatInNum
+        that.year_num = tmpdata.year.noRepeatInNum
+
+        // 增加数字动画效果
+        numGrow(that.$refs.dynum,tmpdata.day.noRepeatInNum)
 
         // let btdata = new Array();
         // let bvdata = new Array();