更新页面
This commit is contained in:
@@ -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%">
|
||||
<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"
|
||||
:data="showData"
|
||||
style="margin-top:50px;width:500px;margin-left:20%"
|
||||
:header-row-style="{height:'15px'}" :cell-style="{padding:'1px'}">
|
||||
<el-table-column
|
||||
prop="name"
|
||||
:label=formName[0]
|
||||
<div ref="totalContent" style="margin-top:10px">
|
||||
<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"
|
||||
:data="showData"
|
||||
style="margin-top:50px;width:500px;margin-left:20%;"
|
||||
:header-row-style="{height:'15px'}" :cell-style="{padding:'1px'}">
|
||||
<el-table-column
|
||||
prop="name"
|
||||
:label=formName[0]
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="count"
|
||||
:label=formName[1]
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="count"
|
||||
:label=formName[1]
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-table-column>
|
||||
</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 = [[],[],[],[]];
|
||||
//按月度统计：存在两种特例：
|
||||
// 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);
|
||||
// 按月度统计：
|
||||
this.$refs.totalContent.style.display = 'none';
|
||||
let quarterItems = [];
|
||||
for(let i=0;i<15;i++){
|
||||
// 初始化数据模板：
|
||||
let tmpName = starNum2[i].name;
|
||||
let tmpcount = starNum2[i].count;
|
||||
let Quarter = parseInt(starNum2[i]['quarter']) - 1;
|
||||
//对应该四个月的数量：
|
||||
let monthCount = [0,0,0,0];
|
||||
// 应该存入的对应季度数组下标：quarterItems[starNum2[i]['quarter']]
|
||||
monthCount[Quarter] = tmpcount;
|
||||
//创建该折线数据对象：
|
||||
let tmpObj = {'name':tmpName,'type':'line','data':monthCount};
|
||||
quarterItems.push(tmpObj);
|
||||
}
|
||||
for(let j=15;j<starNum2.length;j++){
|
||||
let tmpName = starNum2[j].name;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user