数据懒加载
This commit is contained in:
parent
03ad85478f
commit
c8c15e6182
|
|
@ -29,11 +29,11 @@
|
|||
</a-col>
|
||||
|
||||
<a-col :xl="8">
|
||||
<a-card style="margin-bottom: 10px">
|
||||
<a-card :loading="participate_Piechartloading" style="margin-bottom: 10px">
|
||||
<div style="width: 100%; height: 210px; padding: 10px" class="participate_Piechart" id="participate_Piechart"></div>
|
||||
</a-card>
|
||||
|
||||
<a-card>
|
||||
<a-card :loading="pass_Piechartloading">
|
||||
<div style="width: 100%; height: 210px; padding: 10px" class="pass_Piechart" id="pass_Piechart"></div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
|
@ -59,6 +59,8 @@
|
|||
getRateByEntryDate: '/cet/getRateByEntryDate',
|
||||
},
|
||||
loading: false,
|
||||
participate_Piechartloading: false,
|
||||
pass_Piechartloading: false,
|
||||
collegeOptions: [],
|
||||
collegeMajorOptions: [],
|
||||
batchOptions: [],
|
||||
|
|
@ -163,14 +165,13 @@
|
|||
let major = this.collegeMajor[1];
|
||||
console.log(college, major, 'college major');
|
||||
|
||||
let myChart = echarts.init(document.getElementById('participate_Piechart'));
|
||||
|
||||
let queryParams = {
|
||||
college: college,
|
||||
major: major,
|
||||
level: 'cet4',
|
||||
};
|
||||
let url = this.Url.getRateByMajorAndLastestBatch;
|
||||
this.participate_Piechartloading = true;
|
||||
console.log(queryParams, 'queryParams');
|
||||
|
||||
let result = await defHttp.post({ url: url, data: queryParams });
|
||||
|
|
@ -198,7 +199,7 @@
|
|||
grid: {
|
||||
left: '20%', // 增加左边距，可以根据需要调整
|
||||
right: '5%', // 右边距
|
||||
top: '15%', // 上边距
|
||||
top: '20%', // 上边距
|
||||
bottom: '10%', // 下边距
|
||||
},
|
||||
title: {
|
||||
|
|
@ -206,7 +207,7 @@
|
|||
left: 'top',
|
||||
top: '0%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
|
|
@ -245,14 +246,12 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
animationDurationUpdate: 500,
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: 1,
|
||||
});
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
this.participate_Piechartloading = false;
|
||||
this.$nextTick(() => {
|
||||
var myChart = echarts.init(document.getElementById('participate_Piechart'));
|
||||
myChart.setOption(option);
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -260,7 +259,6 @@
|
|||
async draPieChart_Pass() {
|
||||
//console.log(this.passRatePie);
|
||||
//console.log('piedata', piedata);
|
||||
let myChart = echarts.init(document.getElementById('pass_Piechart'));
|
||||
let college = this.collegeMajor[0];
|
||||
let major = this.collegeMajor[1];
|
||||
let queryParams = {
|
||||
|
|
@ -269,6 +267,7 @@
|
|||
level: 'cet4',
|
||||
};
|
||||
let url = this.Url.getRateByEntryDate;
|
||||
this.pass_Piechartloading = true;
|
||||
console.log(queryParams, 'queryParams');
|
||||
let result = await defHttp.post({ url: url, data: queryParams });
|
||||
if (!result) {
|
||||
|
|
@ -328,10 +327,14 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
animationDurationUpdate: 500,
|
||||
};
|
||||
myChart.setOption(option);
|
||||
this.pass_Piechartloading = false;
|
||||
this.$nextTick(() => {
|
||||
var myChart = echarts.init(document.getElementById('pass_Piechart'));
|
||||
myChart.setOption(option);
|
||||
});
|
||||
},
|
||||
|
||||
// 获取批次数据
|
||||
async getBatch() {
|
||||
const getBatch = await defHttp.get({ url: this.Url.getBatch });
|
||||
|
|
|
|||
|
|
@ -30,11 +30,11 @@
|
|||
</a-col>
|
||||
|
||||
<a-col :xl="8" style="padding-left: 10px">
|
||||
<a-card style="margin-bottom: 10px">
|
||||
<a-card :loading="participate_Piechartloading" style="margin-bottom: 10px">
|
||||
<div style="width: 100%; height: 210px; padding: 10px" class="participate_Piechart" id="participate_Piechart"></div>
|
||||
</a-card>
|
||||
|
||||
<a-card style="height: 268px">
|
||||
<a-card :loading="tableloading" style="height: 268px">
|
||||
<div>
|
||||
<a-table
|
||||
:dataSource="dataSourceCet4"
|
||||
|
|
@ -94,6 +94,8 @@
|
|||
getCollegeMajor: '/cet/getCollegeMajor',
|
||||
},
|
||||
loading: false,
|
||||
participate_Piechartloading: false,
|
||||
tableloading: false,
|
||||
collegeOptions: [],
|
||||
collegeMajorOptions: [],
|
||||
batchOptions: [],
|
||||
|
|
@ -289,88 +291,16 @@
|
|||
this.loading = false;
|
||||
this.$nextTick(() => {
|
||||
this.dataChart(resultData.data);
|
||||
//this.draPieChart_Pass();
|
||||
|
||||
this.draPieChart_Participate();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
//绘画饼图--该批次每一年级的参加人数，通过人数，通过率表格
|
||||
//draPieChart_Pass() {
|
||||
// //console.log(this.passRatePie);
|
||||
// //console.log('piedata', piedata);
|
||||
// let myChart = echarts.init(document.getElementById('pass_Piechart'));
|
||||
|
||||
// let option = {
|
||||
// tooltip: {
|
||||
// trigger: 'item',
|
||||
// conginee: false,
|
||||
// //字体大小
|
||||
// itemStytle: {
|
||||
// fontSize: 100,
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: '该批次每一年级的参加人数，通过人数，通过率表格',
|
||||
// left: 'top',
|
||||
// top: '0%',
|
||||
// textStyle: {
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// legend: {
|
||||
// top: '5%',
|
||||
// left: 'center',
|
||||
// },
|
||||
// color: ['#ec2e30', '#c75af1', '#2b9eef', '#eee03f', '#2aed91', '#c5ed3c'],
|
||||
|
||||
// series: [
|
||||
// {
|
||||
// name: '学院/专业该批次通过人数饼图',
|
||||
// type: 'pie',
|
||||
// radius: ['0', '100%'],
|
||||
// top: 80,
|
||||
// itemStyle: {
|
||||
// borderRadius: 5,
|
||||
// borderColor: '#fff',
|
||||
// borderWideth: 2,
|
||||
// },
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: 12,
|
||||
// overflow: 'truncate',
|
||||
// },
|
||||
// emphasis: {
|
||||
// itemStyle: {
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
// },
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: 15,
|
||||
// fontWeight: 'bold',
|
||||
// },
|
||||
// },
|
||||
// data: [
|
||||
// { value: 1048, name: '你好' },
|
||||
// { value: 735, name: '不好' },
|
||||
// { value: 580, name: '孤寡' },
|
||||
// { value: 484, name: '小鸟伏特加' },
|
||||
// { value: 300, name: '喜喜' },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// };
|
||||
// myChart.setOption(option);
|
||||
//},
|
||||
|
||||
//绘画饼图--该批次每一年级的通过率饼图
|
||||
async draPieChart_Participate() {
|
||||
//console.log(this.passRatePie);
|
||||
//console.log('piedata', piedata);
|
||||
let myChart = echarts.init(document.getElementById('participate_Piechart'));
|
||||
|
||||
let queryParams = {
|
||||
batch: this.batch,
|
||||
college: this.collegeMajor,
|
||||
|
|
@ -378,6 +308,8 @@
|
|||
};
|
||||
console.log(queryParams, 'queryParams');
|
||||
let url = this.Url.getRate;
|
||||
this.participate_Piechartloading = true;
|
||||
this.tableloading = true;
|
||||
let result = await defHttp.get({ url: url, params: queryParams });
|
||||
console.log(result, 'result');
|
||||
let chartsData = [];
|
||||
|
|
@ -481,14 +413,13 @@
|
|||
data: chartsData,
|
||||
},
|
||||
],
|
||||
animationDurationUpate: 500,
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: 1,
|
||||
});
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
this.participate_Piechartloading = false;
|
||||
this.tableloading = false;
|
||||
this.$nextTick(() => {
|
||||
var myChart = echarts.init(document.getElementById('participate_Piechart'));
|
||||
myChart.setOption(option);
|
||||
});
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue