<template>
    <div :id="barId" class="myBar"></div>
</template>

<script>
    export default {
        name: 'BaseBar',
        props: ['barId', 'barData'],
        data() {
            return {
                barDatas: []
            }
        },
        methods: {

            drawLine(data) {
                let that = this
                // 基于准备好的dom，初始化echarts实例
                let myBar = this.$echarts.init(document.getElementById(this.barId), 'chalk')

                let option = {
                    title: {
                        text: '选项结果分布图',
                        left: 'center',
                        top:20,
                        textStyle: {
                            color: '#919191',
                            fontFamily:'微軟正黑體'
                        }
                    },
                    tooltip: {
                      trigger: 'axis',
                      axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                      }
                    },
                    grid: {
                        "top": "25%",
                        "left": "5%",
                        "bottom": "0",
                        "right": "5%",
                        "containLabel": true
                    },
                    xAxis: [{
                        type: 'category',
                        data: data.map(item => item.code),
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#6d6a6a",
                            }
                        },
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#B0ABAB",
                                width: 1,
                                type: "solid"
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#c7c4c4",
                                width: 1,
                                type: "solid"
                            },
                        }
                    }],
                    series: [{
                        type: 'bar',
                        data: data.map(item => item.value),
                        barWidth: 50, //柱子宽度
                        itemStyle: {
                            normal: {
                                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00fcae'
                                }, {
                                    offset: 1,
                                    color: '#006388'
                                }]),
                                opacity: 1,
                            }
                        }
                    }]
                };

                // 绘制图表
                myBar.setOption(option)

                window.addEventListener('resize', function () {
                    myBar.resize()
                })
            }
        },
        mounted() {
            let arr = []
            if (!this.barData.length) return
            this.drawLine(this.barData)
			

        },
        watch: {
            barData: {
                deep: true,
                handler(val) {
                    console.log(val)
                    this.drawLine(val)
                }
            }
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    .myBar {
        width: 100%;
        height: 380px;
        margin: 0 auto;
        display: block;
    }
</style>
