<template>
    <div style="width: 100%;margin-top: 5px;">
        <div class="tableTitle">
            <div>
                <span
                    style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
                ></span>
                <span style="font-size:18px;">{{ componentName + '-' + chartName + '-' + '柱状图'+'-'+status }}</span>
            </div>
        </div>
        <div id="barChart" ref="barChart" style="width:100%;height:300px;"></div>
    </div>
</template>

<script>
export default {
    name: 'barChart', //饼图组件
    props: {
        list: Array,
        default() {
            return [];
        },
        pageType: {
            type: String
        },
        title: {
            type: String
        },
        status: {
            type: String
        },
        componentName: {
            type: String
        },
        chartName: {
            type: String
        },
        typeValue: {
            type: Object
        }
    },
    data() {
        return {
            xData: [],
            yData: []
        };
    },
    created() {},
    methods: {
        drawBar() {
            let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
            if (myChart == null) {
                myChart = this.$echarts.init(this.$refs.barChart);
            }
            let option = {
                color: ['#7262FD', '#FC5A5A'],
                tooltip: {
                    confine: true
                },
                grid: {
                    left: '2%',
                    right: '4%',
                    bottom: '10%',
                    top: '20%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.xData,
                    axisLine: {
                        lineStyle: {
                            color: '#000'
                        }
                    },
                    axisLabel: {
                        fontSize: 12,
                        color: '#000'
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        minInterval: 1,
                        splitArea: {
                            show: false
                        },

                        axisLine: {
                            show: true
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#eeebeb',
                                type: 'dashed' // dotted 虚线
                            }
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#000',
                            fontFamily: 'Bebas'
                        }
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        barWidth: 20,
                        itemStyle: { barBorderRadius: [5, 5, 0, 0] },
                        name: '时间',
                        data: this.yData
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        }
    },
    mounted() {
        this.xData = this.typeValue.type_data.map(ele => {
            return ele.name;
        });
        this.yData = this.typeValue.type_data.map(ele => {
            return ele.quantity;
        });
        this.drawBar();
    },
    watch: {
        typeValue: {
            handler(newVal) {
                if (newVal) {
                    this.xData = newVal.type_data.map(ele => {
                        return ele.name;
                    });
                    this.yData = newVal.type_data.map(ele => {
                        return ele.quantity;
                    });
                    this.drawBar();
                }
            }
        }
    }
};
</script>
