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-08 23:54:46 +08:00
parent 7e3227328b
commit 7bef6d42c0
2 changed files with 98 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Monthly/MonthlyByTags.vue
View File

@@ -29,7 +29,7 @@
</el-col>
</el-row>
<div class="ItemsContent" >
<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
<el-backtop ></el-backtop>
<el-scrollbar class="scrollbar-wrapper" style="margin-left:-10px;width:fit-content" >
<div class="infinite-list-wrapper" >
<ul class="list"

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

@@ -16,7 +16,7 @@
<el-cascader @change="FreshPage(selectedValue)" 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 placeholder="选择年份" v-model="selectedValueByYear" style="width: 7vw">
<el-select @change="FreshPage(selectedValue)" placeholder="选择年份" v-model="selectedValueByYear" style="width: 7vw">
<el-option
v-for="(n,index) in 12"
:key="index"
@@ -35,25 +35,25 @@
inactive-text="年度统计">
</el-switch>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
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="姓名"
width="180">
:label=formName[0]
>
</el-table-column>
<el-table-column
prop="address"
label="地址">
prop="count"
:label=formName[1]
>
</el-table-column>
</el-table>
<el-button @click="test()"></el-button>
<div id="EChart" style="width: 600px; height: 300px;"></div>
<div id="EChart" style="width: 700px; height: 700px;"></div>
</el-card>
</div>
</div>
@@ -75,6 +75,10 @@ export default {
components: {RightTools},
data(){
return{
// 最后展示数据:
showData:[],
// 数据表格表头：
formName:[],
// 星数数据：
starNum:[],
// 星数数据按年份：
@@ -120,29 +124,15 @@ export default {
label:'协议种类'
}
],
value1: true,
value1: false,
// 默认用户选择的分类
selectedValue:['1','2'],
selectedValueByYear:'2023',
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
selectedValueByYear:2023,
}
},
updated(){
// history.go(0);
},
created() {
// 使用getjson读取数据
var that = this;
@@ -150,28 +140,87 @@ export default {
that.starNum = res.data;
})
},
computed:{
},
mounted() {
const that = this;
this.getRenderer();
this.initPage();
this.FreshPage(this.selectedValue);
},
methods: {
goBack() {
window.history.go(-1);
},
test(){
// console.log(this.selectedValue);
// console.log(this.starNum);
// console.log(this.value1);
},
// 用户改变分类榜单时，刷新页面：
FreshPage(type){
initPage(){
var that = this;
type = type[type.length-2];
that.selectedValueByYear='2023';
console.log(type);
this.getRenderer();
that.formName=['语言种类','获得星数']
},
FreshPage(type){
// history.go(0);
var that = this;
// console.log(that.selectedValueByYear);
type = type[type.length-1] - 1;
let year = that.selectedValueByYear + 2012;
if(type == 1){
// 按星数统计：
this.getNumData(year,that.value1);
this.getRenderer();
that.formName=['语言种类','获得星数']
}else if(type == 2){
}else if(type == 3){
}else if(type == 4){
}
// console.log(type);
},
// 星数分类的数据：
getNumData(year,index){
function compare(property) {
return function (a, b) {
var value1 = a[property];
var value2 = b[property];
return value2 - value1;
}
}
var that = this;
that.showData = [];
let starNum2 = that.starNum.filter(item => item['year'] == year);
let tmp = [];
if(index == false){
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']);
if (findSignal != -1){
tmp[findSignal]['count'] = parseInt(tmp[findSignal]['count']) + parseInt(tmpObj['count']);
}else{
tmp.push(tmpObj);
}
}
that.showData = tmp.slice(0,20);
that.showData = that.showData.sort(compare('count'));
// console.log(that.showData);
}else{
}
},
getRenderer() {
window.onload = () => {
const manuChart = this.$echarts.init(document.getElementById("EChart"));
var that = this;
var manuChart = that.$echarts.init(document.getElementById("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']);
}
const option = {
tooltip: {
trigger: "axis"
@@ -179,7 +228,6 @@ export default {
xAxis: {
type: 'value',
min: 0,
max:100,
axisLabel : {
show : false
},
@@ -196,17 +244,15 @@ export default {
axisLine:{
show : false
},
data: ["四川中烟","云南中烟","湖北中烟","海外","上海中烟","江苏中烟","重庆中烟","安徽中烟","贵州中烟",
"湖南中烟","浙江中烟","河北中烟","广西中烟","中烟实业","河南中烟","广东中烟","未知",]
data: name,
},
series: [{
name: '销量',
name: '获取星数',
type: 'bar',
barWidth:40,
data: [17,14,12,10,8,5,5,5,3,3,3,2,2,2,1,1,1,1],
barWidth:13,
data: value,
label: {
show: true,
formatter: '{c}%', //显示数据带上百分比
position: 'right'
}
}],
@@ -220,15 +266,15 @@ export default {
yAxisIndex: [0],
type:'inside',
start: 0,
end: 30,
end: 100,
zoomLock:true,
}
};
manuChart.setOption(option);
}
},
}
}
</script>
<style scoped lang="scss">