<template>
        <div id="grade"></div>
</template>
<script>
    export default {
        props: {
            studentData: {
                type: Array,
                default: () => {
                    return []
                }
            },
        },
        data() {
            return {
                dataIndex: 1,
                progressHistogram: undefined,
                dataInfo: [],
                studentList: [],
                studentName: [],
                studentScore: [],
                average: 0,
                mini: 0,
                max:0
            }
        },
        methods:{
            getData() {
                this.studentList.length = 0
                this.studentScore.length = 0
                let total = 0;
                for (var i = 0; i < this.studentData.length; i++) {
                    this.studentList.push(this.studentData[i].name);
                    this.studentScore.push(this.studentData[i].score);
                    total += this.studentData[i].score
                }
                this.max = (Math.max.apply(null, this.studentData))   //最大值
                this.min = (Math.min.apply(null, this.studentData))   //最小值
                this.average = (total / this.studentData.length).toFixed(2)
            },
            getMap() {
                let myChart = this.$echarts.init(document.getElementById('grade'));
                let option = {
                    color: ["#42beda"],
                    tooltip: {},
                    xAxis: {
                        "type": "category",
                        "axisLine": {

                        },
                        "splitLine": {
                            "show": false
                        },
                        "axisTick": {
                            "show": false
                        },
                        "splitArea": {
                            "show": false
                        },
                        "axisLabel": {
                            "interval": 0,

                        },
                        axisLabel: {
                            color: 'white'
                        },
                        data: this.studentList
                    },
                    yAxis: {
                        type: "value",
                        name: "测验得分",
                        lineStyle: {
                            color: '#fffff',
                            width: 2
                        },
                        nameTextStyle: {
                            color: "#fff"
                        },
                        splitLine: {
                            lineStyle: {
                                color: ['#505050']
                            }
                        },
                        axisLabel: {
                            color: 'white'
                        },
                    },
                    "dataZoom": [{
                        "show": true,
                        "height": 10,
                        "xAxisIndex": [
                            0
                        ],
                        bottom: 10,
                        color: "#fffff",
                        "start":0,
                        "end": 100,
                        handleSize: '110%',
                        handleStyle: {
                            color: "#fffff",

                        },
                        textStyle: {
                            color: "#fffff"
                        },
                        borderColor: "#90979c",
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    },
                    {
                        "type": "inside",
                        "show": true,
                        "height": 15,
                        "start": 1,
                        "end": 35
                    }],
                    series: [{
                        name: '分数',
                        type: 'bar',
                        data: this.studentScore,
                        markPoint: {
                            data: [{
                                type:'max',
                                name: '最大值',
                            }]
                        },
                        markLine: {
                            silent: true,
                            lineStyle: {
                                normal: {
                                    color: '#E8E093' 
                                }
                            },
                            data: [{
                                name: "平均线",
                                yAxis: this.average, //基准线
                                label: {
                                    position: "end",
                                    formatter: "{b} \n {c}"
                                }                                    
                            }],
                          

                        }
                    }]
                };
                myChart.setOption(option);
            }
        },
        mounted() {
            this.getData()
            this.getMap()
        },
        watch: {
            studentData(newValue, oldValue) {
                deep: true
                this.getData()
                this.getMap()
            }
        }
    }
</script>
<style scoped>
    #grade{
        width:calc(100% - 50px);
        height:400px;
        margin:auto;
    }
</style>