<template>
    <div id="bar" class="bar-charts"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'barCharts',
    props: {
        data: {
            type: Array,
            require: true,
        },
    },
    data() {
        return {
            myChart: null,
            option: null,
        }
    },
    mounted() {
        this.init()
    },
    watch: {
        data: {
            deep: true,
            handler(val) {
                this.option.series[0].data = val[0]
                this.option.series[1].data = val[1]
                this.option.series[2].data = val[2]
                this.myChart.setOption(this.option)
            },
        },
    },
    methods: {
        init() {
            let chartDom = document.getElementById('bar')
            this.myChart = echarts.init(chartDom)

            this.option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                },
                legend: {
                    top: '5%',
                    left: 'center',
                    textStyle: {
                        color: '#fff',
                    },
                },
                grid: {
                    left: '8%',
                    right: '8%',
                    bottom: '5%',
                    containLabel: true,
                },
                yAxis: {
                    name: '单位：次',
                    nameTextStyle: {
                        color: 'rgba(255,255,255,0.6)',
                        padding: [20, 20, 0, 0],
                    },
                    max: 100,
                    type: 'value',
                    axisTick: {
                        show: false,
                        alignWithLabel: true,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#808080',
                        },
                    },
                    axisLabel: {
                        show: true,
                        color: 'rgba(255,255,255,0.6)',
                    },
                    splitLine: {
                        show: false,
                    },
                },
                xAxis: {
                    type: 'category',
                    data: ['涪江大桥', '郁江河特大桥'],
                    axisLabel: {
                        color: '#fff',
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgb(43, 69, 95)',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                },
                series: [
                    {
                        name: '一级预警',
                        type: 'bar',
                        barWidth: 10,
                        stack: 'total',
                        label: {
                            show: false,
                            color: '#fff',
                        },
                        data: this.data[0],
                        showBackground: false,
                        itemStyle: {
                            borderRadius: [5, 5, 0, 0],
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#F54A6F'},
                                {offset: 1, color: '#000'},
                            ]),
                        },
                    },
                    {
                        name: '二级预警',
                        type: 'bar',
                        barWidth: 10,
                        stack: 'total',
                        label: {
                            show: false,
                            color: '#fff',
                        },
                        data: this.data[1],
                        showBackground: false,
                        itemStyle: {
                            borderRadius: [5, 5, 0, 0],
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#FF884D'},
                                {offset: 1, color: '#000'},
                            ]),
                        },
                    },
                    {
                        name: '三级预警',
                        type: 'bar',
                        barWidth: 10,
                        stack: 'total',
                        label: {
                            show: false,
                            color: '#fff',
                        },
                        data: this.data[2],
                        showBackground: false,
                        itemStyle: {
                            borderRadius: [5, 5, 0, 0],
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#FFEA80'},
                                {offset: 1, color: '#000'},
                            ]),
                        },
                    },
                ],
            }

            this.option && this.myChart.setOption(this.option)
        },
    },
}
</script>

<style lang="scss" scoped>
.bar-charts {
    width: 100%;
    height: 100%;
}
</style>
