<template>
    <div></div>
</template>
<script>
export default {
    props:{
        option:Object //配置参数
    },
    data(){
        return{
            myChart:null
        }
    },
    watch:{
        option:function(v){
            this.myChart.setOption(v)
        }
    },
    mounted(){
        this.myChart = this.$echarts.init(this.$el);
        const option = {
            tooltip: {
                show:false,
            },
            legend: {},
            grid: {
                left: '0%',
                top: '3%',
                right: '5%',
                bottom: '3%',
                // containLabel: true
            },
            xAxis: {
                type: 'value',
                show:false,
            },
            yAxis:{
                show:false,
                type: 'category',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                data: []
            },
            series: [
                {
                    type: 'bar',
                    showBackground: true,
                    barWidth: '10px',
                    z: 3,
                    itemStyle:{
                        normal:{
                            barBorderRadius: 10,
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: '#188df0' }
                            ])
                        },
                        
                    },
                    label: {
                        normal: {
                            color: '#2681e8',
                            show: true,
                            position: 'right',
                            textStyle: {
                                fontSize: 14
                            },
                        }
                    },
                    data: []
                },
                {
                barGap: '-100%',
                type: 'bar',
                barWidth: '10px',
                z: 2,
                itemStyle:{
                    normal:{
                        barBorderRadius: 10
                    }
                },
                label: {
                    normal: {
                        color: '#2681e8',
                        show: true,
                        position: [0, '-24px'],
                        textStyle: {
                            fontSize: 14
                        },
                        formatter: function (a) {
                            return a.name
                        }
                    }
                },
                data: []
                }
            ]
            };
        this.myChart.setOption(option)
        window.onresize = () => {
            this.myChart.resize();
        };
    }
}
</script>