更新页面

src/components/Ranking/Ranking.vue

@@ -29,36 +29,40 @@
                 </el-card>
                 <el-card class="box-card" style="margin-top: 20px">
                     <el-switch
+                        @change="FreshPage(selectedValue,false)"
                         style="margin-left:75%"
                         v-model="value1"
                         active-text="月度趋势"
                         inactive-text="年度统计">
                     </el-switch>
-                    <el-row :gutter="24" style="margin-top:20px;">
 
-                        <el-col :span="20" style="margin-left:10%">
+                    <div ref="totalContent" style="margin-top:10px">
-                            <el-card shadow="always">
+                        <el-row :gutter="24" style="margin-top:20px;">
-                                <span style="font-size:30px;font-weight:600">GitHub官网数据汇总</span>
+                            <el-col :span="20" style="margin-left:10%">
-                            </el-card>
+                                <el-card shadow="always">
-                        </el-col>
+                                    <span style="font-size:30px;font-weight:600">GitHub官网数据整理</span>
-                    </el-row>
+                                </el-card>
-                    <el-table
+                            </el-col>
-                        border
+                        </el-row>
-                        class="DataForm"
+                        <el-table
-                        :data="showData"
+                            border
-                        style="margin-top:50px;width:500px;margin-left:20%"
+                            class="DataForm"
-                        :header-row-style="{height:'15px'}"  :cell-style="{padding:'1px'}">
+                            :data="showData"
-                        <el-table-column
+                            style="margin-top:50px;width:500px;margin-left:20%;"
-                            prop="name"
+                            :header-row-style="{height:'15px'}"  :cell-style="{padding:'1px'}">
-                            :label=formName[0]
+                            <el-table-column
+                                prop="name"
+                                :label=formName[0]
                             >
-                        </el-table-column>
+                            </el-table-column>
-                        <el-table-column
+                            <el-table-column
-                            prop="count"
+                                prop="count"
-                            :label=formName[1]
+                                :label=formName[1]
                             >
-                        </el-table-column>
+                            </el-table-column>
-                    </el-table>
+                        </el-table>
+                    </div>
+
                     <el-button @click="test()"></el-button>
                     <el-row :gutter="24" style="margin-top:20px;">
                         <el-col :span="20" style="margin-left:10%">
@@ -89,6 +93,10 @@ export default {
     components: {RightTools},
     data(){
         return{
+            // echart图：
+            manuChart:null,
+            // Echart图options：
+            MyOption:{},
             // 最后展示数据:
             showData:[],
             // 数据表格表头：
@@ -169,12 +177,13 @@ export default {
         initPage(){
             var that = this;
             that.formName=['语言种类','获得星数'];
+            this.manuChart = this.$echarts.init(this.$refs.EChart);
             // this.getNumData(2023,false);
-            // this.getRenderer();
         },
 
         FreshPage(type,index){
             var that = this;
+            this.$refs.totalContent.style.display = 'block';
             if(index == true) that.selectedValueByYear = 11;
             // console.log(that.selectedValueByYear);
             type = type[type.length-1] - 1;
@@ -182,7 +191,6 @@ export default {
             if(type == 1){
             //  按星数统计：
                 this.getNumData(year,that.value1);
-                this.getRenderer();
                 that.formName=['语言种类','获得星数']
             }else if(type == 2){
 
@@ -219,42 +227,67 @@ export default {
                 }
                 that.showData = tmp.slice(0,18);
                 that.showData = that.showData.sort(compare('count'));
+                this.getRenderer();
                 // console.log(that.showData);
             }else{
-                let quarterItems = [[],[],[],[]];
+                // 按月度统计：
-                //按月度统计：存在两种特例：
+                this.$refs.totalContent.style.display = 'none';
-                // if(year == 2012){
+                let quarterItems = [];
-                //     quarterItems = [[],[],[]];
+                for(let i=0;i<15;i++){
-                // }else if(year == 2023){
+                    // 初始化数据模板：
-                //     quarterItems = {'1':[]};
+                    let tmpName = starNum2[i].name;
-                // }else{
+                    let tmpcount = starNum2[i].count;
-                //     quarterItems = {'1':[],'2':[],'3':[],'4':[]};
+                    let Quarter = parseInt(starNum2[i]['quarter']) - 1;
-                // }
+                    //对应该四个月的数量：
-                for(let i=0;i<starNum2.length;i++){
+                    let monthCount = [0,0,0,0];
-                    // 该数据对象：
+                    // 应该存入的对应季度数组下标：quarterItems[starNum2[i]['quarter']]
-                    let tmpObj = {name:starNum2[i].name,count:starNum2[i].count};
+                    monthCount[Quarter] = tmpcount;
-                    // 应该存入的对应季度数组：quarterItems[starNum2[i]['quarter']]
+                    //创建该折线数据对象：
-                    let tmp = quarterItems[starNum2[i]['quarter']];
+                    let tmpObj = {'name':tmpName,'type':'line','data':monthCount};
-                    let findSignal = quarterItems[starNum2[i]['quarter']].findIndex(item=>item['name'] == tmpObj['name']);
+                    quarterItems.push(tmpObj);
-                    if (findSignal != -1){
+                }
-                        tmp[findSignal]['count'] = parseInt(tmp[findSignal]['count']) + parseInt(tmpObj['count']);
+                for(let j=15;j<starNum2.length;j++){
-                    }else{
+                    let tmpName = starNum2[j].name;
-                        tmp.push(tmpObj);
+                    let tmpcount = starNum2[j].count;
+                    let Quarter = parseInt(starNum2[j]['quarter']) - 1;
+                    let findSignal = quarterItems.findIndex(item=>item['name'] == tmpName);
+                    if(findSignal != -1){
+                        quarterItems[findSignal]['data'][Quarter] = tmpcount;
                     }
                 }
+                // for(let j=0;j<4;j++){
+                //     if(quarterItems[j] == undefined || quarterItems[j].length <= 0) {
+                //         quarterItems.splice(j,1);
+                //         console.log(j);
+                //     }
+                // }
+                // 删除空元素
+                // for(let j=0;j<4;j++){
+                //     if(quarterItems[j].length==0) quarterItems.splice(j,1);
+                // }
+                // let washData = [{'name':null,'data':[]}];
+                // for(let p=0;p<10;p++){
+                //     for(let q=0;q<quarterItems.length;q++){
+                //
+                //     }
+                //     washData = quarterItems[0][p]
+                // }
+                that.showData = quarterItems;
+                this.getLineChart();
+                console.log(that.showData);
             }
 
         },
+        // 横向柱状图：
         getRenderer() {
                 var that = this;
-                var manuChart = this.$echarts.init(this.$refs.EChart);
                 let name = [];
                 let value = [];
                 for(let i=0;i < that.showData.length;i++){
                     name.push(that.showData[i]['name']);
                     value.push(that.showData[i]['count']);
                 }
-                var option = {
+                that.MyOption = {
                     tooltip: {
                         trigger: "axis"
                     },
@@ -303,9 +336,51 @@ export default {
                         zoomLock:true,
                     }
                 };
-                manuChart.setOption(option);
+                that.manuChart.setOption(that.MyOption,true);
-            }
+            },
+            //折线图：
+            getLineChart(){
+                var that = this;
+                let month = ['第一季度','第二季度','第三季度','第四季度'];
+                let dic = [];
+                for (let i = 0;i<15;i++){
+                   dic.push(that.showData[i]['name']);
+                }
 
+                that.MyOption={
+                    tooltip: {
+                        trigger: 'axis'
+                    },
+                    legend: {
+                        data: dic//图例
+                    },
+                    grid: {
+                        left: '3%',
+                        right: '4%',
+                        top:'20%',
+                        containLabel: true
+                    },
+
+                    toolbox: {
+                        feature: {
+                            saveAsImage: {}
+                        }
+                    },
+                    xAxis: {//横坐标
+                        name: "季度",
+                        type: 'category',
+                        boundaryGap: false,
+                        data: month
+                    },
+                    yAxis: {
+                        name: "数量",
+                        type: 'value'
+                    },
+                    //三条折线就有三种series，可以更改type以改变是否为折线
+                    series: that.showData
+                };
+                that.manuChart.setOption(that.MyOption,true);
+            }
         },
 }
 </script>