<template>
    <div>
        <v-chart :options="options" style="width: 100%;height: 350px;"/> 
    </div>
</template>
<script>
export default {
    name: 'VBar',
    data(){
        return {
            options: {
                tooltip: {
        trigger: 'axis',
        backgroundColor:'rgba(255,255,255,0.8)',
        extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
        textStyle:{
            color:'#6a717b',
        },
         
    }, 
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    yAxis: [{
        type: 'category',
        data: ['雨水花园','透水铺装','绿色屋顶','下凹式绿地','调蓄池'],
        inverse: true,
        // axisTick: {
        //     alignWithLabel: true,
        // },
        axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: 12,
                color:'#fff'
            }
        },
        axisTick: false,
        axisLine: {
            symbol: [ 'none', 'arrow'],
            lineStyle: {
                color: '#8BEBFC'
            }
        },
    }],
    xAxis: [{
        type: 'value',
        position: 'top',
        max: 70,
        axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: 12,
                color:'#fff'
            }
        },
        axisTick: false,
        axisLine: {
            symbol: ['none', 'arrow'],
            lineStyle: {
                color: '#8BEBFC'
            },
        },
        splitLine: {
            show: false
        }
    }],
    series: [{
        type: 'bar',
        barWidth:26,
        data: [55, 45, 35, 25, 15],
        label: {
            normal: {
                show: true,
                position: 'insideRight',
                textStyle: {
                    color: 'transparent' //color of value
                }
            }
        },
        itemStyle: {
            normal: {
　　　　　　　　//这里是重点
                color: {
                    colorStops: [
                    {
                    offset: 0,
                    color: "rgba(50,227,128, .2) "
                    },
                    {
                    offset: 1,
                    color: "#8BEBFC"
                    }
                ],
                }
                
            }
        }
    }]
            }
        }
    }
}
</script>