<template>
    <div :id="id" class="whole-class-answer-bar"></div>
</template>
<script>
    import '@/utils/Math.uuid'
    export default {
        data() {
            return {
                id:0,
                classAnswerBar: undefined,
                option: {
                    grid: {
                        left: 25,
                        right: 50,
                        top: 10,
                        bottom:20
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (val) {
                            return `${val[0].marker}人数：${val[0].data}<br/>${val[0].marker}占比：${val[0].data*100 / 50} %`
                        }
                    },
                    xAxis: {
                        //max:50,
                        type: 'value',
                        axisLabel: {   
                            color: 'white'
                        },
                        name: '人数',
                        splitLine: {
                            lineStyle: {
                                color:['#505050']
                            }
                        },
                        nameTextStyle: {
                            color:'white'
                        },
                    },
                    yAxis: {
                        inverse: true,
                        data: ['A', 'B', 'C', 'D'],
                        nameTextStyle: {
                            color:'white'
                        },
                        type: 'category',
                        axisLabel: {
                            color: 'white'
                        },
                        splitLine: {
                            lineStyle: {
                                color:['#505050']
                            }
                        }
                    },
                    series: [
                        {
                            data: [10, 15, 5, 20],
                            type: 'bar',
                            itemStyle: {
                                color:(val) => {
                                    if (val.dataIndex == 3) {
                                        return '#69EFEF'
                                    } else {
                                        return '#ed4014'
                                    }
                                },
                                opacity:0.8
                            },
                            showBackground: true,
                            barMaxWidth: 60,
                            label: {
                                show: true,
                                position: 'right'
                            }
                        }
                    ]
                }
            }
        },
        mounted() {
            this.$nextTick(() => {

                this.classAnswerBar = this.$echarts.init(document.getElementById(this.id))
                this.classAnswerBar.setOption(this.option)
            })

            
        },
        created() {
            this.id = Math.uuid()
        }
    }
</script>
<style scoped lang="less">
    @import "./WholeClassAnswer.less";
</style>
<style>
    .whole-class-answer-bar {
        width:500px;
        height:160px;
    }
</style>