echarts条形图代码

export default {
    data() {
        return {

        }
    },
    mounted() {
        const bardom = this.$refs.barechart
        const barEchart = echarts.init(bardom)

        const options = {

            backgroundColor: "#003366",
            grid: {
                left: '2%',
                right: '2%',
                bottom: '2%',
                top: '2%',
                containLabel: true
            },
            xAxis: {
                show: false,
                type: 'value'
            },
            yAxis: [
                {
                    type: 'category',
                    inverse: true,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        },
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    data: ["安徽省","河南省","浙江省","湖北省","贵州省","江西省","江苏省","四川省","云南省","湖南省"]
                }, 
                {
                    type: 'category',
                    inverse: true,
                    axisTick: 'none',
                    axisLine: 'none',
                    show: true,
                    axisLabel: {
                        textStyle: {
                            color: '#ffffff',
                            fontSize: '12'
                        },
                    },
                    data:[239,181,154,144,135,117,74,72,67,55]
                }
            ],
            series: [
                {
                    name: '值',
                    type: 'bar',
                    zlevel: 1,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 30,
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: 'rgb(57,89,255,1)'
                            }, {
                                offset: 1,
                                color: 'rgb(46,200,207,1)'
                            }]),
                        },
                    },
                    barWidth: 20,
                    data: [239,181,154,144,135,117,74,72,67,55]
                },
                {
                    name: '背景',
                    type: 'bar',
                    barWidth: 20,
                    barGap: '-100%',
                    itemStyle: {
                        normal: {
                            color: 'rgba(24,31,68,1)',
                            barBorderRadius: 30,
                        }
                    },
                },
            ]
        }

        barEchart.setOption(options)
    }
}

</script>

<style lang="scss" scoped>
.wisdom-box {
    box-sizing: border-box;
    height: 100%;
}

.title-box {
    margin-top: 22px;
    margin-left: 41px;

    & span {
        font-size: 22px;
        color: #1CDBFE;
        font-family: SourceHanSansCN-Light;
    }

    ;

    & span::before {
        content: "";
        display: block;
        position: absolute;
        width: 13px;
        height: 27px;
        background-color: #1CDBFE;
        border-radius: 6px;
        top: 3px;
        left: 17px;
    }

}

.bar {
    height: 210px;
    border: 1px solid red;
}
</style>