|
@@ -1,222 +1,225 @@
|
|
|
<template>
|
|
|
- <div id="stuAverageBar"></div>
|
|
|
+ <div id="stuAverageBar"></div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- name: 'hello',
|
|
|
- props: ['echartData', 'exerciseIndex'],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- echartDatas: [],
|
|
|
- gradeSeries:[],
|
|
|
- gradeLengend:[],
|
|
|
- currentExerciseIndex: 0
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- },
|
|
|
- methods: {
|
|
|
- drawLine(echartData, exerciseIndex) {
|
|
|
- console.log('年级得分率图表数据',echartData)
|
|
|
+ export default {
|
|
|
+ name: 'hello',
|
|
|
+ props: ['echartData', 'exerciseIndex'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ echartDatas: [],
|
|
|
+ gradeSeries: [],
|
|
|
+ gradeLengend: [],
|
|
|
+ colorArr: ['#ff9f7f', '#37d2da', '#d4e676', '#ff9f7f', '#d4e676', '#ff9f7f', '#fb7293'],
|
|
|
+ currentExerciseIndex: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ methods: {
|
|
|
+ drawLine(echartData, exerciseIndex) {
|
|
|
+ console.log('年级得分率图表数据', echartData)
|
|
|
console.log(this.gradeSeries)
|
|
|
- let that = this
|
|
|
- let myBar = this.$echarts.init(document.getElementById('stuAverageBar'))
|
|
|
- var option = {
|
|
|
- legend: {
|
|
|
- data: [{
|
|
|
- name: that.$t('totalAnalysis.ta_chart_text4'),
|
|
|
- textStyle: {
|
|
|
- color: '#fff'
|
|
|
- }
|
|
|
- }].concat(this.gradeLengend)
|
|
|
+ let that = this
|
|
|
+ let myBar = this.$echarts.init(document.getElementById('stuAverageBar'))
|
|
|
+ var option = {
|
|
|
+ legend: {
|
|
|
+ data: [{
|
|
|
+ name: that.$t('totalAnalysis.ta_chart_text4'),
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ }].concat(this.gradeLengend)
|
|
|
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- show: true, // 是否显示提示框,默认为true
|
|
|
- trigger: 'axis', // 数据项图形触发
|
|
|
- axisPointer: {
|
|
|
- // 指示样式
|
|
|
- type: 'shadow',
|
|
|
- axis: 'auto',
|
|
|
- shadowStyle: {
|
|
|
- color: 'rgba(128,128,128,0.1)'
|
|
|
- }
|
|
|
- },
|
|
|
- padding: 5,
|
|
|
- textStyle: {
|
|
|
- color: '#fff'
|
|
|
- },
|
|
|
- formatter: function(params) {
|
|
|
- let result = params[0].name
|
|
|
- for (let i = 0; i < params.length; i++) {
|
|
|
- result += '<br>' + params[i].marker + params[i].seriesName + ':' + params[i].data + '%'
|
|
|
- }
|
|
|
- return result
|
|
|
- }
|
|
|
- },
|
|
|
- grid: {
|
|
|
- show: false,
|
|
|
- containLabel: true,
|
|
|
- height: 460,
|
|
|
- width: '90%',
|
|
|
- x2: '5%',
|
|
|
- tooltip: {
|
|
|
- show: true,
|
|
|
- trigger: 'axis', // 触发类型
|
|
|
- textStyle: {
|
|
|
- color: '#666'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- dataZoom: [{
|
|
|
- 'show': true,
|
|
|
- 'height': 10,
|
|
|
- 'xAxisIndex': [
|
|
|
- 0
|
|
|
- ],
|
|
|
- bottom: 30,
|
|
|
- 'start': 0,
|
|
|
- 'end': 100,
|
|
|
- handleIcon: 'M512 497.821538m-418.264615 0a418.264615 418.264615 0 1 0 836.52923 0 418.264615 418.264615 0 1 0-836.52923 0Z',
|
|
|
- handleSize: '160%',
|
|
|
- handleStyle: {
|
|
|
- color: '#d3dee5'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: true, // 是否显示提示框,默认为true
|
|
|
+ trigger: 'axis', // 数据项图形触发
|
|
|
+ axisPointer: {
|
|
|
+ // 指示样式
|
|
|
+ type: 'shadow',
|
|
|
+ axis: 'auto',
|
|
|
+ shadowStyle: {
|
|
|
+ color: 'rgba(128,128,128,0.1)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ padding: 5,
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ formatter: function(params) {
|
|
|
+ let result = params[0].name
|
|
|
+ for (let i = 0; i < params.length; i++) {
|
|
|
+ result += '<br>' + params[i].marker + params[i].seriesName + ':' + params[i].data + '%'
|
|
|
+ }
|
|
|
+ return result
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ show: false,
|
|
|
+ containLabel: true,
|
|
|
+ height: 460,
|
|
|
+ width: '90%',
|
|
|
+ x2: '5%',
|
|
|
+ tooltip: {
|
|
|
+ show: true,
|
|
|
+ trigger: 'axis', // 触发类型
|
|
|
+ textStyle: {
|
|
|
+ color: '#666'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dataZoom: [{
|
|
|
+ 'show': true,
|
|
|
+ 'height': 10,
|
|
|
+ 'xAxisIndex': [
|
|
|
+ 0
|
|
|
+ ],
|
|
|
+ bottom: 30,
|
|
|
+ 'start': 0,
|
|
|
+ 'end': 100,
|
|
|
+ handleIcon: 'M512 497.821538m-418.264615 0a418.264615 418.264615 0 1 0 836.52923 0 418.264615 418.264615 0 1 0-836.52923 0Z',
|
|
|
+ handleSize: '160%',
|
|
|
+ handleStyle: {
|
|
|
+ color: '#d3dee5'
|
|
|
+
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ borderColor: '#90979c'
|
|
|
+ }, {
|
|
|
+ 'type': 'inside',
|
|
|
+ 'show': true,
|
|
|
+ 'height': 15,
|
|
|
+ 'start': 0,
|
|
|
+ 'end': 100
|
|
|
+ }],
|
|
|
+ xAxis: {
|
|
|
+ show: true,
|
|
|
+ offset: 0,
|
|
|
+ type: 'category',
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ inside: false,
|
|
|
+ margin: 15,
|
|
|
+ color: '#989898'
|
|
|
+ },
|
|
|
+ data: echartData.map(item => item.className)
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ show: true,
|
|
|
+ type: 'value',
|
|
|
+ min: 0,
|
|
|
+ max: 100,
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ inside: false,
|
|
|
+ rotate: 0,
|
|
|
+ margin: 8,
|
|
|
+ color: '#989898',
|
|
|
+ formatter: '{value} %',
|
|
|
+ fontSize: 12,
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#4c504a',
|
|
|
+ width: 0.5,
|
|
|
+ type: 'solid'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: that.$t('totalAnalysis.ta_chart_text4'),
|
|
|
+ type: 'bar',
|
|
|
+ itemStyle: {
|
|
|
+ normal: { // 渐变色
|
|
|
+ color: '#66cccc'
|
|
|
+ },
|
|
|
+ width: 20
|
|
|
+ },
|
|
|
+ markPoint: {
|
|
|
+ data: [{
|
|
|
+ type: 'max',
|
|
|
+ name: '最大值'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'min',
|
|
|
+ name: '最小值'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ barMaxWidth: 40,
|
|
|
+ data: echartData.map(item => item.classScoreRate)
|
|
|
+ }].concat(this.gradeSeries)
|
|
|
+ }
|
|
|
|
|
|
- },
|
|
|
- textStyle: {
|
|
|
- color: '#fff'
|
|
|
- },
|
|
|
- borderColor: '#90979c'
|
|
|
- }, {
|
|
|
- 'type': 'inside',
|
|
|
- 'show': true,
|
|
|
- 'height': 15,
|
|
|
- 'start': 0,
|
|
|
- 'end': 100
|
|
|
- }],
|
|
|
- xAxis: {
|
|
|
- show: true,
|
|
|
- offset: 0,
|
|
|
- type: 'category',
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- inside: false,
|
|
|
- margin: 15,
|
|
|
- color: '#989898'
|
|
|
- },
|
|
|
- data: echartData.map(item => item.className)
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- show: true,
|
|
|
- type: 'value',
|
|
|
- min: 0,
|
|
|
- max: 100,
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- inside: false,
|
|
|
- rotate: 0,
|
|
|
- margin: 8,
|
|
|
- color: '#989898',
|
|
|
- formatter: '{value} %',
|
|
|
- fontSize: 12,
|
|
|
- fontFamily: 'Microsoft YaHei'
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: '#4c504a',
|
|
|
- width: 0.5,
|
|
|
- type: 'solid'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: that.$t('totalAnalysis.ta_chart_text4'),
|
|
|
- type: 'bar',
|
|
|
- itemStyle: {
|
|
|
- normal: { // 渐变色
|
|
|
- color: '#66cccc'
|
|
|
- },
|
|
|
- width: 20
|
|
|
- },
|
|
|
- markPoint: {
|
|
|
- data: [
|
|
|
- { type: 'max', name: '最大值' },
|
|
|
- { type: 'min', name: '最小值' }
|
|
|
- ]
|
|
|
- },
|
|
|
- barMaxWidth:40,
|
|
|
- data: echartData.map(item => item.classScoreRate)
|
|
|
- }
|
|
|
- ].concat(this.gradeSeries)
|
|
|
- }
|
|
|
+ // 绘制图表
|
|
|
+ myBar.setOption(option)
|
|
|
+ window.addEventListener('resize', function() {
|
|
|
+ myBar.resize()
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
- // 绘制图表
|
|
|
- myBar.setOption(option)
|
|
|
- window.addEventListener('resize', function() {
|
|
|
- myBar.resize()
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- doAddGradeSeries(analysisJson,curSubjectIndex,echartsData){
|
|
|
+ doAddGradeSeries(analysisJson, curSubjectIndex, echartsData) {
|
|
|
this.gradeSeries = []
|
|
|
this.gradeLengend = []
|
|
|
- analysisJson.grades.forEach(grade => {
|
|
|
+ analysisJson.grades.forEach((grade, gradeIndex) => {
|
|
|
let seriesItem = {
|
|
|
- name: grade.gradeName,
|
|
|
- type: 'line',
|
|
|
- itemStyle: {
|
|
|
- color: '#ff33cc',
|
|
|
- width: 0
|
|
|
- },
|
|
|
- symbol: 'none',
|
|
|
- lineStyle: {
|
|
|
- type: 'dashed',
|
|
|
- width: 0
|
|
|
- },
|
|
|
- markLine: {
|
|
|
- data: [
|
|
|
- { type: 'average' }
|
|
|
- ],
|
|
|
- lineStyle: {
|
|
|
- color: '#ff33cc',
|
|
|
- type: 'dashed'
|
|
|
- }
|
|
|
- },
|
|
|
- data: [grade.subjects[curSubjectIndex].item[this.currentExerciseIndex]]
|
|
|
+ name: grade.gradeName + '得分率',
|
|
|
+ type: 'line',
|
|
|
+ itemStyle: {
|
|
|
+ color: this.colorArr[gradeIndex],
|
|
|
+ width: 0
|
|
|
+ },
|
|
|
+ symbol: 'none',
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed',
|
|
|
+ width: 0
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ data: [{
|
|
|
+ type: 'average'
|
|
|
+ }],
|
|
|
+ lineStyle: {
|
|
|
+ color: this.colorArr[gradeIndex],
|
|
|
+ type: 'dashed'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: new Array(analysisJson.classes.length).fill(grade.subjects[curSubjectIndex].item[this.currentExerciseIndex])
|
|
|
}
|
|
|
this.gradeSeries.push(seriesItem)
|
|
|
this.gradeLengend.push({
|
|
|
- name: grade.gradeName,
|
|
|
+ name: grade.gradeName + '得分率',
|
|
|
textStyle: {
|
|
|
- color: '#fff'
|
|
|
+ color: '#fff'
|
|
|
}
|
|
|
})
|
|
|
console.log(this.gradeLengend)
|
|
|
console.log(this.gradeSeries[0].data)
|
|
|
-
|
|
|
+
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
this.drawLine(echartsData)
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// 调整图表所需数据结构格式
|
|
|
renderData(data) {
|
|
|
console.log(this.currentExerciseIndex)
|
|
|
let analysisJson = JSON.parse(JSON.stringify(this.getAnalysisJson))
|
|
|
let curSubjectIndex = analysisJson.subjects.map(i => i.name).indexOf(this.$store.state.totalAnalysis.currentSubject)
|
|
|
let result = []
|
|
|
- analysisJson.paper[curSubjectIndex].Value.forEach((exercise,exerciseIndex) => {
|
|
|
+ analysisJson.paper[curSubjectIndex].Value.forEach((exercise, exerciseIndex) => {
|
|
|
let obj = {}
|
|
|
analysisJson.paperKey.forEach((key, index) => {
|
|
|
obj[key] = exercise[index]
|
|
|
})
|
|
|
result.push(obj)
|
|
|
})
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
let echartsData = []
|
|
|
analysisJson.classes.forEach((classItem, classIndex) => {
|
|
|
echartsData.push({
|
|
@@ -224,53 +227,53 @@
|
|
|
classScoreRate: classItem.subjects[curSubjectIndex].item[this.currentExerciseIndex]
|
|
|
})
|
|
|
})
|
|
|
-
|
|
|
- this.doAddGradeSeries(analysisJson,curSubjectIndex,echartsData)
|
|
|
+
|
|
|
+ this.doAddGradeSeries(analysisJson, curSubjectIndex, echartsData)
|
|
|
},
|
|
|
|
|
|
- // 监听变化处理重新渲染
|
|
|
- doRender(data) {
|
|
|
- let analysisJson = data
|
|
|
- if (!analysisJson) return
|
|
|
+ // 监听变化处理重新渲染
|
|
|
+ doRender(data) {
|
|
|
+ let analysisJson = data
|
|
|
+ if (!analysisJson) return
|
|
|
let exerciseData = analysisJson.grades[0].item
|
|
|
- this.gradeRate = exerciseData[this.currentExerciseIndex]
|
|
|
- this.drawLine(data)
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- if (this.getAnalysisJson) {
|
|
|
- this.renderData(this.getAnalysisJson)
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- // 获取最新柱状图数据
|
|
|
- getAnalysisJson() {
|
|
|
- return this.$store.state.totalAnalysis.analysisJson
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- getAnalysisJson(val) {
|
|
|
- if (!val) return
|
|
|
- this.doRender(val)
|
|
|
- },
|
|
|
+ this.gradeRate = exerciseData[this.currentExerciseIndex]
|
|
|
+ this.drawLine(data)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (this.getAnalysisJson) {
|
|
|
+ this.renderData(this.getAnalysisJson)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 获取最新柱状图数据
|
|
|
+ getAnalysisJson() {
|
|
|
+ return this.$store.state.totalAnalysis.analysisJson
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ getAnalysisJson(val) {
|
|
|
+ if (!val) return
|
|
|
+ this.doRender(val)
|
|
|
+ },
|
|
|
|
|
|
- exerciseIndex(val) {
|
|
|
- if (val) {
|
|
|
- this.currentExerciseIndex = +val - 1 // 拿到当前所选择的题号 确认数据下标
|
|
|
- this.renderData(this.getAnalysisJson)
|
|
|
- }
|
|
|
- }
|
|
|
+ exerciseIndex(val) {
|
|
|
+ if (val) {
|
|
|
+ this.currentExerciseIndex = +val - 1 // 拿到当前所选择的题号 确认数据下标
|
|
|
+ this.renderData(this.getAnalysisJson)
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
<style scoped>
|
|
|
- #stuAverageBar {
|
|
|
- width: 100%;
|
|
|
- height: 600px;
|
|
|
- margin: 0 auto;
|
|
|
- display: block;
|
|
|
- }
|
|
|
+ #stuAverageBar {
|
|
|
+ width: 100%;
|
|
|
+ height: 600px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
</style>
|