TEAMModelOS/TEAMModelOS/ClientApp/src/components/student-analysis/total/BaseLineBar.vue

<template>
    <div id="stuAverageBar"></div>
</template>

<script>
    export default {
        name: 'hello',
        props: ['echartData', 'exerciseIndex'],
        data() {
            return {
                echartDatas: [],
                currentExerciseIndex: 0
            }
        },
        created() {
        },
        methods: {
            drawLine(echartData, exerciseIndex) {
                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'
                            }
                        },
                        {
                            name: that.$t('totalAnalysis.ta_chart_text5'),
                            color: 'red',
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        {
                            name: that.$t('totalAnalysis.ta_chart_text6'),
                            color: 'red',
                            textStyle: {
                                color: '#fff'
                            }
                        }
                        ]

                    },
                    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: '最小值' }
                                ]
                            },
                            data: echartData.map(item => item.datas[exerciseIndex])
                        },
                        {
                            name: that.$t('totalAnalysis.ta_chart_text5'),
                            type: 'line',
                            itemStyle: {
                                color: '#ff33cc',
                                width: 0
                            },
                            symbol: 'none',
                            lineStyle: {
                                type: 'dashed',
                                width: 0
                            },
                            markLine: {
                                data: [
                                    { type: 'average' }
                                ],
                                lineStyle: {
                                    color: '#ff33cc',
                                    type: 'dashed'
                                }
                            },
                            data: echartData.map(item => this.gradeRate)
                        },
                        {
                            name: that.$t('totalAnalysis.ta_chart_text6'),
                            type: 'line',
                            itemStyle: {
                                color: '#66ff99',
                                width: 0
                            },
                            symbol: 'none',
                            lineStyle: {
                                type: 'dashed',
                                width: 0
                            },
                            markLine: {
                                data: [
                                    { type: 'average' }
                                ],
                                lineStyle: {
                                    color: '#66ff99',
                                    type: 'dashed'
                                }
                            },
                            data: echartData.map(item => this.areaRate)
                        }
                    ]
                }

                // 绘制图表
                myBar.setOption(option)
                window.addEventListener('resize', function() {
                    myBar.resize()
                })
            },

            // 监听变化处理重新渲染
            doRender(data) {
                let exerciseData = this.$store.state.totalAnalysis.exerciseData
                if (!data || !exerciseData) return
                this.gradeRate = exerciseData[this.currentExerciseIndex].gradeScoreRate
                this.areaRate = exerciseData[this.currentExerciseIndex].areaScoreRate
                this.drawLine(data, this.currentExerciseIndex)
            }
        },
        mounted() {
            if (this.getClassExerciseData) {
                this.doRender(this.getClassExerciseData)
            }
        },
        computed: {
            // 获取最新柱状图数据
            getClassExerciseData() {
                return this.$store.state.totalAnalysis.classExerciseData
            }
        },
        watch: {
            getClassExerciseData(val) {
                if (!val) return
                this.doRender(val)
            },

            exerciseIndex(val) {
                if (val) {
                    this.currentExerciseIndex = +val - 1 // 拿到当前所选择的题号 确认数据下标
                    this.doRender(this.getClassExerciseData)
                }
            }

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #stuAverageBar {
        width: 100%;
        height: 600px;
        margin: 0 auto;
        display: block;
    }
</style>