年月日切换优化

src/views/index.vue

@@ -156,28 +156,37 @@ let barChart = null, lineChart = null, pieChart = null;
 export default {
   data() {
     return {
-      // 年月日选中的样式,默认日
-      klselt: "d",
-      // 客流标题数组
-      kltdata: [],
-      // 客流值数组
-      klvdata: [],
       day_num: 0,
       week_num: 0,
       mon_num: 0,
       year_num: 0,
+
+      // 年月日选中的样式,默认日
+      klselt: "d",
+      // 绘制数据
       klqsXDatas: [],
       klqsDatas: [],
+      klqsXDataD: [],//日数据
+      klqsDataD: [],
+      klqsXDataM: [],//月数据
+      klqsDataM: [],
+      klqsXDataY: [],//年数据
+      klqsDataY: [],
+
       dataP: [],//左侧饼图
+      proportionData: [],
+      groupNameData: [],
+      proportionData_z: [],
+
+      // 各场馆实时服务人次
       ssjgNumDatas: [],
+
+      // 折线图数据
       rsqsXData: [],
       rsqsDatas: [],
-      rsqs_datas: {},
       rsqsDataName: [],
       rsqsData_z: [],
-      proportionData: [],
+
-      proportionData_z: [],
-      groupNameData: [],
       timer0: null,//年月日切换定时器
       timer1: null,//左上角定时器
       timer2: null,//左下角定时器
@@ -199,14 +208,17 @@ export default {
   mounted() {
 
     this.getStat();
+    this.btgetdata('d');
+    this.btgetdata('m');
+    this.btgetdata('y');
     this.getPieData();
     this.getInfoDatas();
     this.getGcgNumDatas();
-    this.autoTimer0();
+    
 
     setTimeout(() => {
       // 加延时器使图像绘制获取元素宽高最新的值、等待接口返回数据
-      this.home_bar();
+      this.autoTimer0();//年月日切换
       this.line_zone();
       this.index_pie1();
     }, 1000)
@@ -216,29 +228,43 @@ export default {
   methods: {
     autoTimer0(){
       let that = this;
-      this.btgetdata();
+      
+      var chartDom = document.getElementById("homebar");
+      barChart = echarts.init(chartDom);
+
+      that.klqsDatas = that.klqsDataD;
+      that.klqsXDatas = that.klqsXDataD;
+      this.home_bar();
+
       clearInterval(that.timer0);
       that.timer0 = setInterval(() => {
         if(this.klselt == 'y'){
           this.klselt = 'm';
+          that.klqsDatas = that.klqsDataM;
+          that.klqsXDatas = that.klqsXDataM;
         }else if(this.klselt == 'm'){
           this.klselt = 'd';
+          that.klqsDatas = that.klqsDataD;
+          that.klqsXDatas = that.klqsXDataD;
         }else if(this.klselt == 'd'){
           this.klselt = 'y';
+          that.klqsDatas = that.klqsDataY;
+          that.klqsXDatas = that.klqsXDataY;
         }
-        this.btgetdata();
+        this.home_bar();
       }, 5000);
     },
-    btgetdata() {
+    btgetdata(klselt) {
       //年客流、月、日
       let that = this;
       // console.log(type)
       let rqtp;
-      switch (this.klselt) {
+      switch (klselt) {
         case 'd': rqtp = "daily"; break;
         case 'm': rqtp = "monthly"; break;
         case 'y': rqtp = "yearly"; break;
       }
+      
       // allTygGroupTimeNum // /pass.passcc/allGroupTimeNum
       homeApi.allTygGroupTimeNum({granularity:rqtp}).then(res => {
         if(!res.data){
@@ -251,11 +277,21 @@ export default {
         Object.values(tmpdata).forEach((value) => {
           datas.push(value.num);
         });
+        switch (klselt) {
+          case 'd': 
+            that.klqsDataD = datas;
+            that.klqsXDataD = dkeys;
+          break;
+          case 'm': 
+            that.klqsDataM = datas;
+            that.klqsXDataM = dkeys;
+          break;
+          case 'y': 
+            that.klqsDataY = datas;
+            that.klqsXDataY = dkeys;
+          break;
+        }
 
-        that.klqsDatas = datas;
-        that.klqsXDatas = dkeys;
-
-        this.home_bar();
       });
     },
     
@@ -270,9 +306,7 @@ export default {
     // 透明背景柱状统计图--总服务人次趋势
     home_bar() {
       let that = this;
-      var chartDom = document.getElementById("homebar");
       var option;
-      barChart = echarts.init(chartDom);
       
       function run() {
         let xData = that.klqsXDatas.slice(-8,that.klqsXDatas.length);

src/views/ty/index.vue

@@ -170,8 +170,7 @@ export default {
       weekNum: 0,
       monthNum:0,
       yearNum:0,
-      // 一天的数据
+
-      daData:[],
       // 24小时的数据
       data24hX:[],
       data24h: [],