Big-Data-Lab
/
CET-vue-3.0
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

feature/1.0版本页面优化 #1

Merged
Xubx merged 19 commits from feature/1.0版本页面优化 into DEV 2024-12-10 13:53:08 +08:00
Conversation 0 Commits 19 Files Changed 19 +340 -227
2 changed files with 340 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4aef7d706d - Show all commits

276
src/views/cet/cet-ana-2.vue
View File

@ -209,7 +209,7 @@
} }
console.log(result.data, 'result'); console.log(result.data, 'result');
let titleText = major ? `${college} / ${major}专业 最新批次通过人数饼图` : `${college} 最新批次通过人数饼图`; let titleText = major ? `${college} / ${major}专业 最新批次通过人数` : `${college} 最新批次通过人数`;
// 使用 API 返回的数据填充饼图 // 使用 API 返回的数据填充饼图
let chartData = []; let chartData = [];
@ -221,109 +221,57 @@
}); });
} }
console.log(chartData, '123'); console.log(chartData, '123');
let xData = chartData.map((item) => item.name); // 提取类别数据
let yData = chartData.map((item) => item.value); // 提取值数据
let option = { let option = {
tooltip: { grid: {
trigger: 'item', left: '20%', // 增加左边距，可以根据需要调整
//conginee: false, right: '5%', // 右边距
//字体大小 top: '10%', // 上边距
itemStytle: { bottom: '10%', // 下边距
// 设置阴影效果
shadowBlur: 10, // 阴影模糊大小
shadowColor: 'rgba(0, 0, 0, 0.3)', // 阴影颜色
shadowOffsetX: 5, // 阴影水平方向偏移
shadowOffsetY: 5, // 阴影垂直方向偏移
fontSize: 100,
},
}, },
title: { title: {
text: '最新批次每一年级的通过率饼图', text: '最新批次每一年级的通过率',
left: 'top', left: 'top',
top: '0%', top: '0%',
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
}, },
}, },
legend: { tooltip: {
top: '15%', trigger: 'item',
left: 'center', },
// orient: 'vertical', xAxis: {
itemGap: 3, type: 'category',
selectedMode: true, data: xData,
// inactiveColor: '#ccc', //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// icon: 'circle', },
yAxis: {
// formatter: function (name) { type: 'value',
// var value; axisLabel: {
// for (var i = 0; i < data.length; i++){ formatter: '{value}%',
// if(data[i].name == name){ },
// value = data[i].value;
// }
// }
// return name + ' : ' + Math.round(value / num * 10000) / 100 + "%";
// },
}, },
color: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'],
series: [ series: [
{ {
name: titleText, name: titleText,
type: 'pie', data: yData,
radius: ['50%', '100%'], //data: [150, 230, 224, 218, 135, 147, 260],
center: ['50%', '50%'], type: 'line',
startAngle: 130,
top: 80,
//暂时没有
itemStyle: { itemStyle: {
// borderRadius: 5, normal: {
// borderColor: '#fff', label: {
borderWidth: 2, show: true, //开启显示
}, position: 'top', //在上方显示
label: { textStyle: {
show: true, //数值样式
// position: 'inside', color: 'black',
fontSize: 12, fontSize: 12,
overflow: 'truncate', },
}, formatter: '{c}%',
labelLine: { },
show: true,
smooth: true,
length: 10,
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
label: {
show: true,
fontSize: 15,
fontWeight: 'bold',
}, },
}, },
data: chartData,
},
{
type: 'pie',
startAngle: 130,
top: 80,
radius: ['40%', '51%'],
center: ['50%', '50%'],
//暂时没有
itemStyle: {
// borderRadius: 3,
// borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
},
hoverAnimation: false,
legendHoverLink: false,
// animationn：false,
tooltip: {
show: false,
},
data: chartData,
}, },
], ],
}; };
@ -337,6 +285,158 @@
}); });
}, },
////绘画饼图--最新批次每一年级的通过率饼图
//async draPieChart_Participate() {
// console.log(this.collegeMajor, 'collegeMajor');
// let college = this.collegeMajor[0];
// 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;
// console.log(queryParams, 'queryParams');
// let result = await defHttp.post({ url: url, data: queryParams });
// if (!result) {
// return;
// }
// console.log(result.data, 'result');
// let titleText = major ? `${college} / ${major}专业 最新批次通过人数饼图` : `${college} 最新批次通过人数饼图`;
// // 使用 API 返回的数据填充饼图
// let chartData = [];
// for (let key in result.data) {
// chartData.push({
// name: key + '级',
// value: result.data[key].passRate,
// });
// }
// console.log(chartData, '123');
// let option = {
// tooltip: {
// trigger: 'item',
// //conginee: false,
// //字体大小
// itemStytle: {
// // 设置阴影效果
// shadowBlur: 10, // 阴影模糊大小
// shadowColor: 'rgba(0, 0, 0, 0.3)', // 阴影颜色
// shadowOffsetX: 5, // 阴影水平方向偏移
// shadowOffsetY: 5, // 阴影垂直方向偏移
// fontSize: 100,
// },
// },
// title: {
// text: '最新批次每一年级的通过率饼图',
// left: 'top',
// top: '0%',
// textStyle: {
// fontSize: 12,
// },
// },
// legend: {
// top: '15%',
// left: 'center',
// // orient: 'vertical',
// itemGap: 3,
// selectedMode: true,
// // inactiveColor: '#ccc',
// // icon: 'circle',
// // formatter: function (name) {
// // var value;
// // for (var i = 0; i < data.length; i++){
// // if(data[i].name == name){
// // value = data[i].value;
// // }
// // }
// // return name + ' : ' + Math.round(value / num * 10000) / 100 + "%";
// // },
// },
// color: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'],
// series: [
// {
// name: titleText,
// type: 'pie',
// radius: ['50%', '100%'],
// center: ['50%', '50%'],
// startAngle: 130,
// top: 80,
// //暂时没有
// itemStyle: {
// // borderRadius: 5,
// // borderColor: '#fff',
// borderWidth: 2,
// },
// label: {
// show: true,
// // position: 'inside',
// fontSize: 12,
// overflow: 'truncate',
// },
// labelLine: {
// show: true,
// smooth: true,
// length: 10,
// },
// emphasis: {
// itemStyle: {
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowColor: 'rgba(0, 0, 0, 0.5)',
// },
// label: {
// show: true,
// fontSize: 15,
// fontWeight: 'bold',
// },
// },
// data: chartData,
// },
// {
// type: 'pie',
// startAngle: 130,
// top: 80,
// radius: ['40%', '51%'],
// center: ['50%', '50%'],
// //暂时没有
// itemStyle: {
// // borderRadius: 3,
// // borderColor: '#fff',
// borderWidth: 2,
// },
// label: {
// show: false,
// },
// hoverAnimation: false,
// legendHoverLink: false,
// // animationn：false,
// tooltip: {
// show: false,
// },
// data: chartData,
// },
// ],
// };
// myChart.setOption(option);
// myChart.dispatchAction({
// type: 'highlight',
// seriesIndex: 1,
// });
// window.addEventListener('resize', function () {
// myChart.resize();
// });
//},
//绘画饼图--学院/专业每个年级的通过率柱状图 //绘画饼图--学院/专业每个年级的通过率柱状图
async draPieChart_Pass() { async draPieChart_Pass() {
//console.log(this.passRatePie); //console.log(this.passRatePie);

291
src/views/cet/cet-ana-3.vue
View File

@ -23,17 +23,6 @@
</a-card> </a-card>
<a-card> <a-card>
<!--<template #extra>
<div style="display: flex">
<div v-if="topCollege != null">
<span style="color: red; font-size: 18px; padding-left: 100px"> {{ topCollege }}</span>
<span style="font-size: 15px"> 在 </span>
<span style="color: red; font-size: 18px"> {{ topBath }} </span>
<span style="font-size: 15px"> 批次的四级通过率为：</span>
<span style="color: red; font-size: 18px"> {{ sumRate }}%</span>
</div>
</div>
</template>-->
<div> <div>
<div id="map1" style="width: 100%; height: 400px"></div> <div id="map1" style="width: 100%; height: 400px"></div>
</div> </div>
@ -44,42 +33,60 @@
<a-card style="margin-bottom: 10px"> <a-card style="margin-bottom: 10px">
<div style="width: 100%; height: 210px; padding: 10px" class="participate_Piechart" id="participate_Piechart"></div> <div style="width: 100%; height: 210px; padding: 10px" class="participate_Piechart" id="participate_Piechart"></div>
</a-card> </a-card>
<a-card>
<div style="width: 100%; height: 210px; padding: 10px" class="pass_Piechart" id="pass_Piechart"></div> <a-card style="height: 268px">
<div>
<a-table
:dataSource="dataSourceCet4"
:columns="columns"
:pagination="false"
bordered
class="custom-table"
:style="{ fontSize: '12px', color: '#333', marginTop: '-11px' }"
/>
</div>
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
<!-- <div>
<a-row :gutter="24">
<a-col :xl="24" :style="{ marginBottom: '24px' }">
<div class="container">
<div style="display: flex;">
<span class="title">学院 / 专业四级通过率变化</span>
<div v-if="topCollege != null">
<span style="color: red; font-size: 18px; padding-left: 100px;"> {{ topCollege }}</span>
<span style="font-size: 15px;"> 在 </span>
<span style="color: red; font-size: 18px;"> {{ topBath }} </span>
<span style="font-size: 15px;"> 批次的四级通过率为：</span>
<span style="color: red; font-size: 18px;"> {{ sumRate }}%</span>
</div>
</div>
<div id="map1" style="width: 100%; height: 600px;"></div>
</div>
</a-col>
</a-row>
</div> -->
</a-card> </a-card>
</div> </div>
</template> </template>
<script> <script>
//import { pagination } from 'mock/_util';
import { defHttp } from '/@/utils/http/axios'; import { defHttp } from '/@/utils/http/axios';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
data() { data() {
return { return {
dataSourceCet4: [],
columns: [
{
title: '年级',
dataIndex: 'grade',
key: 'grade',
align: 'center',
},
{
title: '参加人数',
dataIndex: 'attendNumber',
key: 'attendNumber',
align: 'center',
},
{
title: '通过人数',
dataIndex: 'passNumber',
key: 'passNumber',
align: 'center',
},
{
title: '通过率',
dataIndex: 'passrate',
key: 'passrate',
align: 'center',
},
],
Url: { Url: {
getBatch: '/cet/getBatch', getBatch: '/cet/getBatch',
getCollege: '/cet/getCollege', getCollege: '/cet/getCollege',
@ -179,6 +186,7 @@
}, },
series: [ series: [
{ {
barMaxWidth: 50, // 设置柱子的最大宽度
data: yData, data: yData,
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
@ -264,93 +272,122 @@
}; };
resultData = await defHttp.get({ url: this.Url.getRate, params }); resultData = await defHttp.get({ url: this.Url.getRate, params });
this.sumRate = resultData.sumRate; this.sumRate = resultData.sumRate;
console.log('result', resultData); console.log('result', resultData);
//表格数据
let tableData = [];
for (let grade in resultData.gradeData) {
tableData.push({
grade: grade + '级',
attendNumber: resultData.gradeData[grade].allStudent,
passNumber: resultData.gradeData[grade].passed,
passrate: resultData.gradeData[grade].passRate,
});
}
this.dataSourceCet4 = tableData; //表格数据
console.log(this.dataSourceCet4, 'dataSourceCet4');
} finally { } finally {
this.loading = false; this.loading = false;
this.$nextTick(() => { this.$nextTick(() => {
this.dataChart(resultData.data); this.dataChart(resultData.data);
this.draPieChart_Pass(); //this.draPieChart_Pass();
this.draPieChart_Participate(); this.draPieChart_Participate();
}); });
} }
}, },
//绘画饼图--cet4通过的数据分析 //绘画饼图--该批次每一年级的参加人数，通过人数，通过率表格
draPieChart_Pass() { //draPieChart_Pass() {
//console.log(this.passRatePie); // //console.log(this.passRatePie);
//console.log('piedata', piedata); // //console.log('piedata', piedata);
let myChart = echarts.init(document.getElementById('pass_Piechart')); // let myChart = echarts.init(document.getElementById('pass_Piechart'));
let option = { // let option = {
tooltip: { // tooltip: {
trigger: 'item', // trigger: 'item',
conginee: false, // conginee: false,
//字体大小 // //字体大小
itemStytle: { // itemStytle: {
fontSize: 100, // fontSize: 100,
}, // },
}, // },
//title: { // title: {
// text: '学院/专业该批次通过人数饼图', // text: '该批次每一年级的参加人数，通过人数，通过率表格',
// left: 'top', // left: 'top',
// top: '0%', // top: '0%',
// textStyle: { // textStyle: {
// fontSize: 12, // fontSize: 12,
// }, // },
//}, // },
legend: { // legend: {
top: '5%', // top: '5%',
left: 'center', // left: 'center',
}, // },
color: ['#ec2e30', '#c75af1', '#2b9eef', '#eee03f', '#2aed91', '#c5ed3c'], // color: ['#ec2e30', '#c75af1', '#2b9eef', '#eee03f', '#2aed91', '#c5ed3c'],
series: [ // series: [
{ // {
name: '学院/专业该批次通过人数饼图', // name: '学院/专业该批次通过人数饼图',
type: 'pie', // type: 'pie',
radius: ['0', '100%'], // radius: ['0', '100%'],
top: 80, // top: 80,
itemStyle: { // itemStyle: {
borderRadius: 5, // borderRadius: 5,
borderColor: '#fff', // borderColor: '#fff',
borderWideth: 2, // borderWideth: 2,
}, // },
label: { // label: {
show: true, // show: true,
fontSize: 12, // fontSize: 12,
overflow: 'truncate', // overflow: 'truncate',
}, // },
emphasis: { // emphasis: {
itemStyle: { // itemStyle: {
shadowBlur: 10, // shadowBlur: 10,
shadowOffsetX: 0, // shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)', // shadowColor: 'rgba(0, 0, 0, 0.5)',
}, // },
label: { // label: {
show: true, // show: true,
fontSize: 15, // fontSize: 15,
fontWeight: 'bold', // fontWeight: 'bold',
}, // },
}, // },
data: [ // data: [
{ value: 1048, name: '你好' }, // { value: 1048, name: '你好' },
{ value: 735, name: '不好' }, // { value: 735, name: '不好' },
{ value: 580, name: '孤寡' }, // { value: 580, name: '孤寡' },
{ value: 484, name: '小鸟伏特加' }, // { value: 484, name: '小鸟伏特加' },
{ value: 300, name: '喜喜' }, // { value: 300, name: '喜喜' },
], // ],
}, // },
], // ],
}; // };
myChart.setOption(option); // myChart.setOption(option);
}, //},
//绘画饼图--参与人数数据分析 //绘画饼图--该批次每一年级的通过率饼图
draPieChart_Participate() { async draPieChart_Participate() {
//console.log(this.passRatePie); //console.log(this.passRatePie);
//console.log('piedata', piedata); //console.log('piedata', piedata);
let myChart = echarts.init(document.getElementById('participate_Piechart')); let myChart = echarts.init(document.getElementById('participate_Piechart'));
let queryParams = {
batch: this.batch,
college: this.collegeMajor,
level: 'cet4',
};
console.log(queryParams, 'queryParams');
let url = this.Url.getRate;
let result = await defHttp.get({ url: url, params: queryParams });
console.log(result, 'result');
let chartsData = [];
for (let key in result.gradeData) {
chartsData.push({
name: key + '级',
value: result.gradeData[key].passRate,
});
}
let option = { let option = {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
@ -365,32 +402,20 @@
fontSize: 100, fontSize: 100,
}, },
}, },
// title: { title: {
// text: '学院/专业该批次通过人数饼图', text: '该批次每一年级的通过率饼图',
// left: 'top', left: 'top',
// top: '0%', top: '0%',
// textStyle: { textStyle: {
// fontSize: 12, fontSize: 12,
// }, },
// }, },
legend: { legend: {
top: '5%', top: '10%',
left: 'center', left: 'center',
// orient: 'vertical',
itemGap: 3, itemGap: 3,
selectedMode: true, selectedMode: true,
// inactiveColor: '#ccc',
// icon: 'circle',
// formatter: function (name) {
// var value;
// for (var i = 0; i < data.length; i++){
// if(data[i].name == name){
// value = data[i].value;
// }
// }
// return name + ' : ' + Math.round(value / num * 10000) / 100 + "%";
// },
}, },
color: ['#ec2e30', '#c75af1', '#2b9eef', '#eee03f', '#2aed91', '#c5ed3c'], color: ['#ec2e30', '#c75af1', '#2b9eef', '#eee03f', '#2aed91', '#c5ed3c'],
@ -431,13 +456,7 @@
fontWeight: 'bold', fontWeight: 'bold',
}, },
}, },
data: [ data: chartsData,
{ value: 1048, name: '你好' },
{ value: 735, name: '不好' },
{ value: 580, name: '孤寡' },
{ value: 484, name: '小鸟伏特加' },
{ value: 300, name: '喜喜' },
],
}, },
{ {
type: 'pie', type: 'pie',
@ -460,13 +479,7 @@
tooltip: { tooltip: {
show: false, show: false,
}, },
data: [ data: chartsData,
{ value: 1048, name: '你好' },
{ value: 735, name: '不好' },
{ value: 580, name: '孤寡' },
{ value: 484, name: '小鸟伏特加' },
{ value: 300, name: '喜喜' },
],
}, },
], ],
}; };