diff --git a/src/views/organization/examManage/gradeStatistics.vue b/src/views/organization/examManage/gradeStatistics.vue index 39853811d..d270412c5 100644 --- a/src/views/organization/examManage/gradeStatistics.vue +++ b/src/views/organization/examManage/gradeStatistics.vue @@ -29,7 +29,7 @@
-
+
@@ -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 */ }