<template>
    <div id="bar-chart" style="height: 300px"></div>
</template>

<script>
export default {
    data(){
        return {
            myChart: null,
            data: [
                {name: 'Succeed', value: '10532'},
                {name: 'Failed', value: '1529'},
                {name: 'Ready to send', value: '2107'},
            ]
        }
    },
    mounted() {
        this.getMyChart();
    },
    methods: {
        getMyChart() {
            if(!this.myChart){
                this.myChart = this.$echarts.init(document.getElementById('bar-chart'));
            }
            let { data } = this;
            let colors = ['#30A706', '#E11508', '#FF8A00'];
            this.myChart.setOption({
                grid: {
                    top: 30,
                    right: 0,
                    bottom: 5,
                    left: 0,
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#D8E0F0'
                        }
                    },
                    axisLabel: {
                        color: '#000000'
                    },
                    data: data.map(item => item.name)
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#D8E0F0'
                        }
                    },
                    axisLabel: {
                        color: '#555353'
                    },
                },
                series: [ {
                    type: 'bar',
                    barWidth: 40,
                    label: {
                        show: true,
                        position: 'top',
                        itemStyle: {
                            color: '#373737'
                        }
                    },
                    data: data.map((item, i) => {
                        return {
                            itemStyle: {
                                color: colors[i]
                            },
                            value: item.value
                        }
                    })
                }]
            })
        },
    }
}
</script>

