更新页面

src/components/Ranking/Ranking.vue

@@ -13,10 +13,10 @@
             <div class="PageContent" style="display: flex;flex-direction: column;flex-wrap: nowrap">
                 <el-card class="box-card">
                     <div style="display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between">
-                        <el-cascader @change="FreshPage(selectedValue)" v-model="selectedValue" :options="options" placeholder="选择分类"
+                        <el-cascader @change="FreshPage(selectedValue,true)" v-model="selectedValue" :options="options" placeholder="选择分类"
                                      :show-all-levels="false" style="width: 10vw"></el-cascader>
                         <el-image fit="fill" :src="require('@/assets/svg/logo-tiobe.svg')" style="width:8vw;height: 4vh;display: flex;flex-direction: row;justify-content: flex-end"></el-image>
-                        <el-select @change="FreshPage(selectedValue)" placeholder="选择年份" v-model="selectedValueByYear" style="width: 7vw">
+                        <el-select @change="FreshPage(selectedValue,false)" placeholder="选择年份" v-model="selectedValueByYear" style="width: 7vw">
                             <el-option
                                 v-for="(n,index) in 12"
                                 :key="index"
@@ -34,6 +34,14 @@
                         active-text="月度趋势"
                         inactive-text="年度统计">
                     </el-switch>
+                    <el-row :gutter="24" style="margin-top:20px;">
+
+                        <el-col :span="20" style="margin-left:10%">
+                            <el-card shadow="always">
+                                <span style="font-size:30px;font-weight:600">GitHub官网数据汇总</span>
+                            </el-card>
+                        </el-col>
+                    </el-row>
                     <el-table
                         border
                         class="DataForm"
@@ -52,8 +60,14 @@
                         </el-table-column>
                     </el-table>
                     <el-button @click="test()"></el-button>
-
+                    <el-row :gutter="24" style="margin-top:20px;">
-                    <div ref="EChart" style="width: 700px; height: 700px;"></div>
+                        <el-col :span="20" style="margin-left:10%">
+                            <el-card shadow="always">
+                                <span style="font-size:30px;font-weight:600">GitHub官网数据统计图</span>
+                            </el-card>
+                        </el-col>
+                    </el-row>
+                    <div ref="EChart" style="width: 700px;height:700px;margin-top:20px"></div>
                 </el-card>
             </div>
         </div>
@@ -127,7 +141,7 @@ export default {
             value1: false,
             // 默认用户选择的分类
             selectedValue:['1','2'],
-            selectedValueByYear:2023,
+            selectedValueByYear:null,
         }
     },
     updated(){
@@ -142,7 +156,6 @@ export default {
     },
     mounted() {
             this.initPage();
-            window.open('/', '_self');
             console.log(this.showData);
     },
     methods: {
@@ -156,14 +169,13 @@ export default {
         initPage(){
             var that = this;
             that.formName=['语言种类','获得星数'];
-            this.getNumData(2023,false);
+            // this.getNumData(2023,false);
-            setTimeout(()=>{
+            // this.getRenderer();
-                this.getRenderer();
-            },1000);
         },
 
-        FreshPage(type){
+        FreshPage(type,index){
             var that = this;
+            if(index == true) that.selectedValueByYear = 11;
             // console.log(that.selectedValueByYear);
             type = type[type.length-1] - 1;
             let year = that.selectedValueByYear + 2012;
@@ -193,8 +205,9 @@ export default {
             var that = this;
             that.showData = [];
             let starNum2 = that.starNum.filter(item => item['year'] == year);
-            let tmp = [];
             if(index == false){
+                let tmp = [];
+                // 按年度统计：
                 for(let i=0;i<starNum2.length;i++){
                     let tmpObj = {name:starNum2[i].name,count:starNum2[i].count};
                     let findSignal = tmp.findIndex(item=>item['name'] == tmpObj['name']);
@@ -204,10 +217,31 @@ export default {
                         tmp.push(tmpObj);
                     }
                 }
-                that.showData = tmp.slice(0,20);
+                that.showData = tmp.slice(0,18);
                 that.showData = that.showData.sort(compare('count'));
                 // console.log(that.showData);
             }else{
+                let quarterItems = [[],[],[],[]];
+                //按月度统计：存在两种特例：
+                // if(year == 2012){
+                //     quarterItems = [[],[],[]];
+                // }else if(year == 2023){
+                //     quarterItems = {'1':[]};
+                // }else{
+                //     quarterItems = {'1':[],'2':[],'3':[],'4':[]};
+                // }
+                for(let i=0;i<starNum2.length;i++){
+                    // 该数据对象：
+                    let tmpObj = {name:starNum2[i].name,count:starNum2[i].count};
+                    // 应该存入的对应季度数组：quarterItems[starNum2[i]['quarter']]
+                    let tmp = quarterItems[starNum2[i]['quarter']];
+                    let findSignal = quarterItems[starNum2[i]['quarter']].findIndex(item=>item['name'] == tmpObj['name']);
+                    if (findSignal != -1){
+                        tmp[findSignal]['count'] = parseInt(tmp[findSignal]['count']) + parseInt(tmpObj['count']);
+                    }else{
+                        tmp.push(tmpObj);
+                    }
+                }
             }
 
         },
@@ -256,7 +290,7 @@ export default {
                         }
                     }],
                     grid: {
-                        x: '10%',
+                        x: '18%',
                         y: 0,
                         x2: '10%',
                         y2: 0