<template>
    <div class="dec">
        <div style="height:350px; min-width:600px">
            <div id="main"></div>
            <span v-if="voteData.length == 0">{{$t("studentWeb.vote.noData")}}</span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        voteData: {
            type: Array,
            default: () => {
                return []
            }
        },
        voteList: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            colorList: ["#00AD6C", "#003E27", "#008352", "#FA6400", "#00AD6C"],
        };
    },
    mounted() {
        if (this.voteData.length) {
            this.setMyMap()
        }
    },
    methods: {
        setMyMap() {
            let myChart = this.$echarts.init(document.getElementById('main'));
            let options =  {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: this.$t('studentWeb.vote.option') + '{b0}: <span class="studyhrs">{c0}</span>票'
                },
                grid: {
                    top: "0%",
                    left: '0%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    show: false,
                },
                xAxis: {
                    type: 'category',
                    data: this.voteList,
                    // show: false,
                },
                series: [
                    {
                        type: 'bar',
                        data: this.voteData,
                        itemStyle: {
                            normal: {
                                // 顶部的数字
                                label: {
                                    show: true,
                                    position: "top"
                                },
                                // 圆角
                                barBorderRadius:[10],
                            }
                        },
                        barWidth: 50,
                    },
                ]
            }
            // 为echarts对象加载数据
            myChart.setOption(options);
        }
    }
};
</script>
