rt-sim-training-client/src/views/dashboard/echarts/exam.vue

<template>
  <div>
    <div :id="id" :style="{height: size.height+'px', width: size.width+'px'}" />
    <div class="lesson-select">
      <el-select v-model="lessonId" placeholder="请选择课程">
        <el-option v-for="item in lessonList" :key="item.statsProjectId" :label="item.statsProjectName" :value="item.statsProjectId" />
      </el-select>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts';
import { getExamTree, getstatsExamList, getExamChart } from '@/api/statistics';

export default {
	props: {
		id: {
			type: String,
			default: 'chart'
		},
		size: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			lessonId: '',
			lessonList: [],
			option: {
				backgroundColor: '#F0F2F5',
				title: {
					top: 20,
					text: '考试统计',
					textStyle: {
						fontWeight: 'normal',
						fontSize: 18,
						color: '#000000'
					},
					left: 'center'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
						lineStyle: {
							color: '#57617B'
						}
					}
				},
				legend: {
					top: 20,
					orient: 'vertical',
					icon: 'rect',
					itemWidth: 14,
					itemHeight: 5,
					itemGap: 13,
					data: [],
					right: '4%',
					textStyle: {
						fontSize: 12,
						color: '#C0C0C0'
					}
				},
				grid: {
					top: 100,
					left: '2%',
					right: '2%',
					bottom: '2%',
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					boundaryGap: true,
					axisLine: {
						lineStyle: {
							color: '#57617B'
						}
					},
					data: []
				}],
				yAxis: [{
					type: 'value',
					name: '(score)',
					axisTick: {
						show: false
					},
					axisLine: {
						lineStyle: {
							color: '#57617B'
						}
					},
					axisLabel: {
						margin: 10,
						textStyle: {
							fontSize: 14
						}
					},
					splitLine: {
						lineStyle: {
							color: '#57617B'
						}
					}
				}],
				series: []
			},
			chart: null
		};
	},
	watch: {
		size() {
			return this.chart.resize({...this.size, silent: false});
		},
		async lessonId(val) {
			await this.loadExamData(val);
		}
	},
	mounted() {
		this.initChart();
	},
	beforeDestroy() {
		if (!this.chart) {
			return;
		}
		this.chart.dispose();
		this.chart = null;
	},
	methods: {
		initChart() {
			getExamTree().then(resp => {
				this.lessonList = resp.data || [];
				this.$nextTick(() => {
					if (this.lessonList[0]) {
						this.lessonId = this.lessonList[0].statsProjectId;
					}
				});
			});
			this.chart = echarts.init(document.getElementById(this.id));
			this.chart.setOption(this.option);
		},
		async loadExamData(lessonId) {
			const serieName = (this.lessonList[this.lessonList.findIndex(elem => { return elem.statsProjectId == lessonId; })] || {}).statsProjectName || '';
			this.option.series = [];
			this.option.xAxis[0].data = [];
			this.option.legend.data = [serieName];
			this.option.series = [{
				name: serieName,
				type: 'bar',
				smooth: true,
				symbol: 'circle',
				symbolSize: 5,
				showSymbol: false,
				lineStyle: {
					normal: {
						width: 1
					}
				},
				data: []
			}];

			if (lessonId) {
				const resp = await getstatsExamList({lessonId});
				if (resp) {
					const info = resp.data || [];
					for (var i = 0; i < info.length; i++) {
						var scores = [];
						const exam = info[i];
						this.option.xAxis[0].data.push(exam.statsProjectName);
						const rest = await getExamChart({examId: exam.statsProjectId});
						if (rest) {
							scores = (rest.data || []).map(elem => { return elem.score; });
						}
						this.option.series[0].data = scores;
					}
				}
			}

			this.chart.setOption(this.option);
		}
	}
};
</script>
<style scoped>
.lesson-select {
    position: absolute;
    display: flex;
    top: 30px;
    padding-left: 10px;
}
</style>