HelloGithub/hellogithub-vue
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新页面

Browse Source
This commit is contained in:
Zhang HaoYang
2023-07-09 23:32:00 +08:00
parent dc5168a528
commit 9b24f7b1b7
4 changed files with 210 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/data/json/gh-pull-request.json → public/gh-pull-request.json
View File

0
src/data/json/gh-push-event.json → public/gh-push-event.json
View File

0
src/data/json/github-licenses.json → public/github-licenses.json
View File

279
src/components/Ranking/Ranking.vue
View File

@@ -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="月度趋势"
inactive-text="年度统计">
:active-text=activeWord
: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:[],
// 星数数据按年份：
pullNumByYear:[],
// 星数数据按季度趋势：
pullNumByMon:[],
pullNum:[],
// 推送项目数：
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;
this.$refs.totalContent.style.display = 'block';
if(index == true) that.selectedValueByYear = 11;
// console.log(that.selectedValueByYear);
type = type[type.length-1] - 1;
let year = that.selectedValueByYear + 2012;
if(type == 1){
// 按星数统计：
this.getNumData(year,that.value1);
that.formName=['语言种类','获得星数']
}else if(type == 2){
}else if(type == 3){
}else if(type == 4){
that.ban=false;
if(index == 1) {
that.selectedValueByYear = 11;
that.value1 = false;
this.$refs.totalContent.style.display = 'block';
}
// console.log(type);
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,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;
}
}
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']]
monthCount[Quarter] = tmpcount;
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: {
feature: {
saveAsImage: {}
}
},
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
xAxis: {//横坐标
name: "季度",
type: 'category',