代码调整
This commit is contained in:
joylink_cuiweidong
parent
62e0f34ef6
commit
25c8ddd667
@ -29,7 +29,7 @@
|
||||
</div>
|
||||
<div class="statisticChart">
|
||||
<div id="mychart1" class="statisticChartLeft" />
|
||||
<div id="mychart2" class="statisticChartRight" />
|
||||
<!-- <div id="mychart2" class="statisticChartRight" /> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -45,11 +45,11 @@ export default {
|
||||
return {
|
||||
orgId:'',
|
||||
myChart1:null,
|
||||
myChart2:null,
|
||||
userNameList:[],
|
||||
gradeList:[],
|
||||
// myChart2:null,
|
||||
// userNameList:[],
|
||||
// gradeList:[],
|
||||
classList:[],
|
||||
durationList:[],
|
||||
// durationList:[],
|
||||
fullPoint:0,
|
||||
passingPoint:0,
|
||||
duration:0,
|
||||
@ -63,31 +63,31 @@ export default {
|
||||
color:'#f00'
|
||||
}
|
||||
},
|
||||
title1:{
|
||||
show:true,
|
||||
text:' 答题时长区间人数 ',
|
||||
// 各分数区间人数统计
|
||||
textAlign:'center',
|
||||
left:'50%',
|
||||
top:'5px',
|
||||
textStyle:{
|
||||
color:'#f00'
|
||||
}
|
||||
},
|
||||
yAxis1:{
|
||||
position:'left',
|
||||
name:'人数',
|
||||
nameLocation:'end',
|
||||
minInterval:1,
|
||||
nameTextStyle:{
|
||||
align:'left',
|
||||
fontSize:14
|
||||
},
|
||||
axisLine:{show:true}
|
||||
},
|
||||
// title1:{
|
||||
// show:true,
|
||||
// text:' 答题时长区间人数 ',
|
||||
// // 各分数区间人数统计
|
||||
// textAlign:'center',
|
||||
// left:'50%',
|
||||
// top:'5px',
|
||||
// textStyle:{
|
||||
// color:'#f00'
|
||||
// }
|
||||
// },
|
||||
// yAxis1:{
|
||||
// position:'left',
|
||||
// name:'人数',
|
||||
// nameLocation:'end',
|
||||
// minInterval:1,
|
||||
// nameTextStyle:{
|
||||
// align:'left',
|
||||
// fontSize:14
|
||||
// },
|
||||
// axisLine:{show:true}
|
||||
// },
|
||||
yAxis:{
|
||||
position:'left',
|
||||
name:'分数',
|
||||
name:'人数',
|
||||
nameLocation:'end',
|
||||
min:0,
|
||||
nameTextStyle:{
|
||||
@ -96,10 +96,10 @@ export default {
|
||||
},
|
||||
axisLine:{show:true}
|
||||
},
|
||||
durationInterval:[]
|
||||
gradeInterval:[]
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
async mounted() {
|
||||
const resp = await getClassListUnPage();
|
||||
resp.data && resp.data.forEach(item => {
|
||||
this.classList.push({ value: item.id, label: item.name });
|
||||
@ -108,22 +108,35 @@ export default {
|
||||
this.orgId = this.classList[0].value;
|
||||
const res = await getExamLessonDetail(this.$route.query.examId);
|
||||
if (res.data) {
|
||||
this.yAxis.max = res.data.fullPoint;
|
||||
this.fullPoint = res.data.fullPoint;
|
||||
this.passingPoint = res.data.passingPoint;
|
||||
this.duration = res.data.duration;
|
||||
}
|
||||
var chartDom1 = document.getElementById('mychart1');
|
||||
this.myChart1 = echarts.init(chartDom1);
|
||||
var chartDom2 = document.getElementById('mychart2');
|
||||
this.myChart2 = echarts.init(chartDom2);
|
||||
const eachInterval = this.duration / 6;
|
||||
this.durationInterval = ['0-' + eachInterval,
|
||||
eachInterval + '-' + eachInterval * 2,
|
||||
eachInterval * 2 + '-' + eachInterval * 3,
|
||||
eachInterval * 3 + '-' + eachInterval * 4,
|
||||
eachInterval * 4 + '-' + eachInterval * 5,
|
||||
eachInterval * 5 + '-' + eachInterval * 6
|
||||
];
|
||||
// var chartDom2 = document.getElementById('mychart2');
|
||||
// this.myChart2 = echarts.init(chartDom2);
|
||||
const eachInterval = this.fullPoint / 10;
|
||||
this.gradeInterval = [];
|
||||
for(i=0;i<10;i++){
|
||||
this.gradeInterval.push(eachInterval*i+'-'+eachInterval*(i+1));
|
||||
}
|
||||
const option = {
|
||||
title:this.title,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name:'分数区间',
|
||||
data: this.gradeInterval
|
||||
},
|
||||
yAxis:this.yAxis,
|
||||
series: [
|
||||
{
|
||||
data:[],
|
||||
type: 'line'
|
||||
}
|
||||
]
|
||||
};
|
||||
option && this.myChart1 && this.myChart1.setOption(option);
|
||||
this.getClassGradeStatis();
|
||||
},
|
||||
methods: {
|
||||
@ -132,64 +145,45 @@ export default {
|
||||
},
|
||||
getClassGradeStatis() {
|
||||
if (this.orgId) {
|
||||
this.userNameList = [];
|
||||
this.gradeList = [];
|
||||
// this.userNameList = [];
|
||||
// this.gradeList = [];
|
||||
// this.myChart1.restore();
|
||||
getClassGradeStatistic(this.orgId, this.$route.query.examId).then(resp=>{
|
||||
const results = resp.data;
|
||||
if (results) {
|
||||
const gradeList = results.results;
|
||||
const countList = [0, 0, 0, 0, 0];
|
||||
const countList = [0,0,0,0,0,0,0,0,0,0];
|
||||
if (gradeList.length > 0) {
|
||||
gradeList.forEach(each=>{
|
||||
this.userNameList.push(each.username || '');
|
||||
this.gradeList.push(each.score);
|
||||
this.durationList.push(each.duration || 0);
|
||||
countList[Math.floor((each.duration || 0) / (this.duration / 6))]++;
|
||||
// this.userNameList.push(each.username || '');
|
||||
// this.gradeList.push(each.score);
|
||||
// this.durationList.push(each.duration || 0);
|
||||
countList[Math.floor((each.score || 0) / (this.fullPoint/ 10))]++;
|
||||
});
|
||||
const option = {
|
||||
title:this.title,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLabel:{
|
||||
show :false
|
||||
},
|
||||
data:this.userNameList
|
||||
},
|
||||
tooltip:{
|
||||
show:true,
|
||||
trigger:'item'
|
||||
},
|
||||
yAxis: this.yAxis,
|
||||
series: [
|
||||
{
|
||||
symbolSize: 10,
|
||||
data:this.gradeList,
|
||||
type: 'scatter'
|
||||
}
|
||||
]
|
||||
};
|
||||
const option1 = {
|
||||
title1:this.title1,
|
||||
xAxis: {
|
||||
name:'时长区间/s',
|
||||
type: 'category',
|
||||
data: this.durationInterval
|
||||
},
|
||||
yAxis: this.yAxis1,
|
||||
tooltip:{
|
||||
show:true,
|
||||
trigger:'axis'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data:countList,
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
};
|
||||
let option=this.myChart1.getOption();
|
||||
// debugger
|
||||
option.series[0].data=countList;
|
||||
// const option1 = {
|
||||
// title1:this.title1,
|
||||
// xAxis: {
|
||||
// name:'时长区间/s',
|
||||
// type: 'category',
|
||||
// data: this.durationInterval
|
||||
// },
|
||||
// yAxis: this.yAxis1,
|
||||
// tooltip:{
|
||||
// show:true,
|
||||
// trigger:'axis'
|
||||
// },
|
||||
// series: [
|
||||
// {
|
||||
// data:countList,
|
||||
// type: 'bar'
|
||||
// }
|
||||
// ]
|
||||
// };
|
||||
option && this.myChart1 && this.myChart1.setOption(option);
|
||||
option1 && this.myChart2 && this.myChart2.setOption(option1);
|
||||
// option1 && this.myChart2 && this.myChart2.setOption(option1);
|
||||
// debugger;
|
||||
// id": "92",
|
||||
// "userId": "92",
|
||||
@ -204,38 +198,22 @@ export default {
|
||||
}
|
||||
}
|
||||
}).catch((error) => {
|
||||
const option = {
|
||||
title:this.title,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data:[]
|
||||
},
|
||||
yAxis:this.yAxis,
|
||||
series: [
|
||||
{
|
||||
symbolSize: 20,
|
||||
data:[],
|
||||
type: 'scatter'
|
||||
}
|
||||
]
|
||||
};
|
||||
const option1 = {
|
||||
title:this.title1,
|
||||
xAxis: {
|
||||
name:'时长区间/s',
|
||||
type: 'category',
|
||||
data: this.durationInterval
|
||||
},
|
||||
yAxis:this.yAxis1,
|
||||
series: [
|
||||
{
|
||||
data:[],
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
};
|
||||
option && this.myChart1 && this.myChart1.setOption(option);
|
||||
option1 && this.myChart2 && this.myChart2.setOption(option1);
|
||||
// const option1 = {
|
||||
// title:this.title1,
|
||||
// xAxis: {
|
||||
// name:'时长区间/s',
|
||||
// type: 'category',
|
||||
// data: this.durationInterval
|
||||
// },
|
||||
// yAxis:this.yAxis1,
|
||||
// series: [
|
||||
// {
|
||||
// data:[],
|
||||
// type: 'bar'
|
||||
// }
|
||||
// ]
|
||||
// };
|
||||
// option1 && this.myChart2 && this.myChart2.setOption(option1);
|
||||
this.$message.error(error.message);
|
||||
});
|
||||
|
||||
@ -267,15 +245,16 @@ export default {
|
||||
margin-left:5%;
|
||||
}
|
||||
.statisticChartLeft{
|
||||
width: 50%;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
height: 700px;
|
||||
height: 500px;
|
||||
/* margin-left:25%; */
|
||||
/* border:1px #ccc solid */
|
||||
}
|
||||
.statisticChartRight{
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
height: 700px;
|
||||
height: 500px;
|
||||
/* border:1px #ccc solid */
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user