更新页面

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,true)" v-model="selectedValue" :options="options" placeholder="选择分类"
+                        <el-cascader @change="FreshPage(selectedValue,1)" 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,false)" placeholder="选择年份" v-model="selectedValueByYear" style="width: 7vw">
+                        <el-select @change="FreshPage(selectedValue,2)" placeholder="选择年份"  v-model="selectedValueByYear" style="width: 7vw" :disabled="ban">
                             <el-option
                                 v-for="(n,index) in 12"
                                 :key="index"
@@ -29,11 +29,12 @@
                 </el-card>
                 <el-card class="box-card" style="margin-top: 20px">
                     <el-switch
-                        @change="FreshPage(selectedValue,false)"
+                        ref="switch"
+                        @change="FreshPage(selectedValue,0)"
                         style="margin-left:75%"
                         v-model="value1"
-                        active-text="月度趋势"
+                        :active-text=activeWord
-                        inactive-text="年度统计">
+                        :inactive-text=inactiveWord>
                     </el-switch>
 
                     <div ref="totalContent" style="margin-top:10px">
@@ -62,8 +63,7 @@
                             </el-table-column>
                         </el-table>
                     </div>
-
+<!--                    <el-button @click="test()"></el-button>-->
-                    <el-button @click="test()"></el-button>
                     <el-row :gutter="24" style="margin-top:20px;">
                         <el-col :span="20" style="margin-left:10%">
                             <el-card shadow="always">
@@ -71,7 +71,7 @@
                             </el-card>
                         </el-col>
                     </el-row>
-                    <div ref="EChart" style="width: 700px;height:700px;margin-top:20px"></div>
+                    <div ref="EChart" style="margin-left:20px;width: 700px;height:700px;margin-top:20px"></div>
                 </el-card>
             </div>
         </div>
@@ -93,6 +93,11 @@ export default {
     components: {RightTools},
     data(){
         return{
+            // 开关文本：
+            activeWord:'月度趋势',
+            inactiveWord:'年度统计',
+            // 禁用年份选择：
+            ban:false,
             // echart图：
             manuChart:null,
             // Echart图options：
@@ -103,28 +108,12 @@ export default {
             formName:[],
             // 星数数据：
             starNum:[],
-            // 星数数据按年份：
-            starNumByYear:[],
-            // 星数数据按季度趋势：
-            starNumByMon:[],
             // 项目拉取数：
-            // pullNum:[],
+            pullNum:[],
-            // 星数数据按年份：
-            pullNumByYear:[],
-            // 星数数据按季度趋势：
-            pullNumByMon:[],
             // 推送项目数：
             pushNum:[],
-            // 星数数据按年份：
-            pushNumByYear:[],
-            // 星数数据按季度趋势：
-            pushNumByMon:[],
             // 协议数：
             licensesNum:[],
-            // 星数数据按年份：
-            licensesNumByYear:[],
-            // 星数数据按季度趋势：
-            licensesNumByMon:[],
             // 榜单分类目录：
             options:[{
                 value: '1',
@@ -161,6 +150,15 @@ export default {
         this.$axios.get("/gh-star-event.json").then(res => {
             that.starNum = res.data;
         })
+        this.$axios.get("/gh-push-event.json").then(res => {
+            that.pushNum = res.data;
+        })
+        this.$axios.get("/gh-pull-request.json").then(res => {
+            that.pullNum = res.data;
+        })
+        this.$axios.get("/github-licenses.json").then(res => {
+            that.licensesNum = res.data;
+        })
     },
     mounted() {
             this.initPage();
@@ -177,32 +175,66 @@ export default {
         initPage(){
             var that = this;
             that.formName=['语言种类','获得星数'];
+            that.activeWord='月度趋势';
+            that.inactiveWord='年度统计';
+            that.ban=false;
+            that.showData = [];
             this.manuChart = this.$echarts.init(this.$refs.EChart);
             // this.getNumData(2023,false);
         },
 
         FreshPage(type,index){
             var that = this;
+            that.ban=false;
+            if(index == 1) {
+                that.selectedValueByYear = 11;
+                that.value1 = false;
                 this.$refs.totalContent.style.display = 'block';
-            if(index == true) that.selectedValueByYear = 11;
+            }
-            // console.log(that.selectedValueByYear);
+            if(index == 1 || index == 2 || index == 0 && that.selectedValueByYear != null){
+                if(that.value1 == false && index == 0)  this.$refs.totalContent.style.display = 'block';
                 type = type[type.length-1] - 1;
                 let year = that.selectedValueByYear + 2012;
                 if(type == 1){
                     //  按星数统计：
-                this.getNumData(year,that.value1);
+                    this.getNumData(year,that.value1,that.starNum);
                     that.formName=['语言种类','获得星数']
+                    that.activeWord='月度趋势';
+                    that.inactiveWord='年度统计';
                 }else if(type == 2){
-
+                    this.getNumData(year,that.value1,that.pushNum);
+                    that.formName=['语言种类','推送项目数']
+                    that.activeWord='月度趋势';
+                    that.inactiveWord='年度统计';
                 }else if(type == 3){
-
+                    this.getNumData(year,that.value1,that.pullNum);
+                    that.formName=['语言种类','用户拉取项目数']
+                    that.activeWord='月度趋势';
+                    that.inactiveWord='年度统计';
                 }else if(type == 4){
-
+                    this.getLiscenseData(that.value1);
+                    that.formName=['协议种类','项目数']
+                    that.activeWord='各协议占比';
+                    that.inactiveWord='数据总览';
+                    that.ban=true;
                 }
-            // console.log(type);
+            }
+            if(index == 0 && that.selectedValueByYear == null){
+                    this.$message({
+                        message: '请先选择年份！',
+                        type: 'warning',
+                        offset:100,
+                        duration:500,
+                    });
+                    // 不让修改：
+                    if(that.value1 == false) that.value1 = true;
+                    if(that.value1 == true) that.value1 = false;
+            }
+            // console.log(that.selectedValueByYear);
+
         },
-        // 星数分类的数据：
+        // 语言分类的数据：
-        getNumData(year,index){
+        getNumData(year,index,Mydata){
             function compare(property) {
                 return function (a, b) {
                     var value1 = a[property];
@@ -212,7 +244,7 @@ export default {
             }
             var that = this;
             that.showData = [];
-            let starNum2 = that.starNum.filter(item => item['year'] == year);
+            let starNum2 = Mydata.filter(item => item['year'] == year);
             if(index == false){
                 let tmp = [];
                 // 按年度统计：
@@ -241,44 +273,153 @@ export default {
                     //对应该四个月的数量：
                     let monthCount = [0,0,0,0];
                     // 应该存入的对应季度数组下标：quarterItems[starNum2[i]['quarter']]
+                    if(that.selectedValueByYear == 11){
+                        monthCount = monthCount.fill(tmpcount);
+                    }else{
                         monthCount[Quarter] = tmpcount;
+                    }
                     //创建该折线数据对象：
                     let tmpObj = {'name':tmpName,'type':'line','data':monthCount};
                     quarterItems.push(tmpObj);
                 }
                 for(let j=15;j<starNum2.length;j++){
+                    if(that.selectedValueByYear == 2023) break;
                     let tmpName = starNum2[j].name;
                     let tmpcount = starNum2[j].count;
                     let Quarter = parseInt(starNum2[j]['quarter']) - 1;
+                    let LastQ = parseInt(Quarter) - 1;
                     let findSignal = quarterItems.findIndex(item=>item['name'] == tmpName);
                     if(findSignal != -1){
-                        quarterItems[findSignal]['data'][Quarter] = tmpcount;
+                        let p =  parseInt(quarterItems[findSignal]['data'][parseInt(LastQ)]);
+                        quarterItems[findSignal]['data'][Quarter] = p + parseInt(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);
             }
 
         },
-        // 横向柱状图：
+        getLiscenseData(index){
+            var that = this;
+            that.showData = that.licensesNum;
+            that.showData = JSON.parse(JSON.stringify(that.showData).replace(/license/g,"name"));
+            that.showData = JSON.parse(JSON.stringify(that.showData).replace(/count/g,"count"))
+            if(index == false){
+                this.getRendererLiscense();
+            }else{
+                this.$refs.totalContent.style.display = 'none';
+                this.getPie();
+            }
+        },
+        // 饼图：
+        getPie(){
+            var that = this;
+            // let name = [];
+            // let value = [];
+            // for(let i=0;i < that.showData.length;i++){
+            //     name.push(that.showData[i]['license']);
+            //     value.push(that.showData[i]['count']);
+            // }
+
+            that.MyOption = {
+                tooltip: {
+                    trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
+                    axisPointer: {
+                        // 坐标轴指示器，坐标轴触发有效
+                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                    formatter: '{a} <br/>{b} 协议项目 : {c} 个 <br/>百分比 : {d}%' //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
+                },
+                series: [{
+                    type: 'pie',
+                    data: that.showData,
+                    label: {//饼图文字的显示
+                        show: true, //默认  显示文字
+                        formatter: function (arg) {
+                            console.log(arg);
+                            return arg.name + ' 项目 ' + arg.value + " 个 " +'\n'+ arg.percent + "%"
+                        }
+                    },
+                    radius: 220 //饼图的半径
+                }],
+                grid: {
+                    x: '18%',
+                    y: 0,
+                    x2: '10%',
+                    y2: 0
+                },
+                dataZoom: {
+                    yAxisIndex: [0],
+                    type:'inside',
+                    start: 0,
+                    end: 100,
+                    zoomLock:true,
+                }
+            };
+            that.manuChart.setOption(that.MyOption,true);
+        },
+        // 横向柱状图(协议种类)：
+        getRendererLiscense() {
+            var that = this;
+            let name = [];
+            let value = [];
+            for(let i=0;i < that.showData.length;i++){
+                name.push(that.showData[i]['license']);
+                value.push(that.showData[i]['count']);
+            }
+            that.MyOption = {
+                tooltip: {
+                    trigger: "axis"
+                },
+                xAxis: {
+                    type: 'value',
+                    min: 0,
+                    axisLabel : {
+                        show : false
+                    },
+                    splitLine : {
+                        show : false
+                    }
+                },
+                yAxis: {
+                    type: 'category',
+                    inverse: true,
+                    axisTick : {
+                        show : false
+                    },
+                    axisLine:{
+                        show : false
+                    },
+                    data: name,
+                },
+                series: [{
+                    name: '项目总数',
+                    type: 'bar',
+                    barWidth:13,
+                    data: value,
+                    label: {
+                        show: true,
+                        position: 'right'
+                    }
+                }],
+                grid: {
+                    x: '18%',
+                    y: 0,
+                    x2: '10%',
+                    y2: 0
+                },
+                dataZoom: {
+                    yAxisIndex: [0],
+                    type:'inside',
+                    start: 0,
+                    end: 100,
+                    zoomLock:true,
+                }
+            };
+            that.manuChart.setOption(that.MyOption,true);
+        },
+        // 横向柱状图(编程语言)：
         getRenderer() {
                 var that = this;
                 let name = [];
@@ -361,11 +502,11 @@ export default {
                         containLabel: true
                     },
 
-                    toolbox: {
+                    // toolbox: {
-                        feature: {
+                    //     feature: {
-                            saveAsImage: {}
+                    //         saveAsImage: {}
-                        }
+                    //     }
-                    },
+                    // },
                     xAxis: {//横坐标
                         name: "季度",
                         type: 'category',