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

<script>
import studentWeb from "../../../../api/studentWeb";

    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: "item",
                        padding: [4, 12],
                        backgroundColor: "white",
                        textStyle: {
                            color: "black",
                            fontFamily: "Ariel",
                            fontWeight: "bolder",
                        },
                        formatter:  this.$t('studentWeb.vote.option') + '{b0}: <span class="studyhrs">{c0}</span>'
                    },
                    grid: {
                        top: "15%",
                        left: "6%",
                        right: "12%",
                        bottom: "20%",
                        containLabel: true,
                    },
                    xAxis: {
                        type: "category",
                        data: this.voteList,
                        splitLine: {
                            lineStyle: {
                                color: "transparent",
                            },
                        },
                        //座標軸線的設置
                        axisLine: {
                            lineStyle: {
                                color: "gray",
                                width: 2,
                            },
                        },
                        //座標軸的刻度顏色
                        axisLabel: {
                            color: "#575757",
                            fontSize: 14,
                            fontWeight: "bolder",
                        },
                    },
                    yAxis: {
                        type: "value",
                        show: false,
                    },
                    emphasis: {
                        itemStyle: {
                            color: "#FA6400", //高亮
                        },
                    },
                    barCategoryGap: "1px",
                    series: [
                        {
                            data: this.voteData,
                            type: "bar",
                            label: {
                                show: true,
                                position: "top",
                                fontSize: 20,
                                fontWeight: "bolder",
                                align: "center",
                                lineHeight: 30,
                                padding: [10, 10, -5, 10],
                                textBorderWidth: 0,
                            },
                        },
                    ],
                }
                // 为echarts对象加载数据
                myChart.setOption(options);

            }
        }
    };
</script>

<style scoped>
.vote-result-chart {
  width: 100%;
  margin: auto;
  margin-bottom: 0px;
  padding: 15px 40px 0px 40px;
  height: 400px;
  color: rgba(0, 0, 0, 0.726);
}
.vote-num-text {
  position: absolute;
  font-weight: bolder;
  right: 20px;
  top: 20px;
}
.vote-num {
  font-size: 20px;
}
.myChooseTag {
  position: relative;
  top: -18%;
  left: 15%;
}
</style>