echarts双向柱状图

<template>
    <div class="wisdom-box">
        <div class="title-box">
            <span>智慧助餐</span>
        </div>
        <!-- 条形图 -->
        <div class="bar" ref="barechart"></div>
    </div>
</template>

<script>
import * as echarts from "echarts"

export default {
    data() {
        return {

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

        const options = {
            timeline:{
                show:false,
                top:0,
                data:[]
            },
            legend:{
                top:"1%",
                itemWidth:10,
                itemHeight:10,
                icon:"horizontal",
                textStyle:{
                    color:"#fff",
                },
                data:["销售额","会员"],
                z:100

            },
           
           
            grid: [
                {
                    show:true,
                    left: "2%",
                    top: "10%",
                    bottom: "5%",
                    width: "40%",
                    containLabel: true,
                },
                {
                    show:true,
                    top: "20%",
                    bottom: "5%",
                    left: "60%",
                    // width: "20%",
                },
                {
                    show:true,
                    top: "10%",
                    right: "2%",
                    bottom: "5%",
                    width: "36%",
                    containLabel: true,
                }
            ],
            xAxis: [
                {
                    type: "value",
                    inverse: true,//反向
                    position: "bottom",
                    axisLabel: {
                        show: true,
                        color:"#4FA6F7"
                    },
                    axisLine: {
                        show: true
                    },
                    axisTick: {
                        show: true
                    },
                    splitLine: {
                        show: true
                    }
                },
                {
                    gridIndex: 1,
                    show: true
                },
                {
                    type: "value",
                    gridIndex: 2,
                    position: "bottom",
                    axisLabel: {
                        show: true,
                        color:"#4FA6F7"
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: "category",
                    position: "right",
                    inverse: true,
                    axisLabel: {
                        show: false,
                        color: "#fff"
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    data: ["南浔古镇食堂", "南浔城南", "七都日照中心", "桃源日照中心","万宁社区助餐点","观澜名苑社区"]
                },
                {
                    type: "category",
                    gridIndex: 1,
                    inverse: true,
                    position: "center",
                    offset:32,//偏移
                    axisLabel: {
                        align: "center",
                        color: "#fff"
                    },
                    axisLine: {
                        show: true
                    },
                    axisTick: {
                        show: true
                    },
                    splitLine: {
                        show: true
                    },
                    data: ["南浔古镇食堂", "南浔城南", "七都日照中心", "桃源日照中心","万宁社区助餐点","观澜名苑社区"]
                },
                {
                    type: "category",
                    gridIndex: 2,
                    inverse: true,
                    position: "left",
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    data: ["南浔古镇食堂", "南浔城南", "七都日照中心", "桃源日照中心","万宁社区助餐点","观澜名苑社区"]
                }
            ],
            series: [
                {
                    type: "bar",
                    barWidth: 15,
                    label: {
                        show: false,
                    },
                    itemStyle: {
                        borderRadius: [10, 0, 0, 10],
                        color:new echarts.graphic.LinearGradient(1,0,0,0,[
                            {
                                offset:0,
                                color:"rgba(23,38,91,0.1)"
                            },
                            {
                                offset:1,
                                color:"rgba(28,219,254)"
                            }
                        ])
                    },
                    data:[100,200,300,400,500,600]
                },
                {
                    type: "bar",
                    barWidth: 15,
                    xAxisIndex: 2,
                    yAxisIndex: 2,
                    label: {
                        position: "right"
                    },
                    itemStyle: {
                        borderRadius: [0, 10, 10, 0],
                        color:new echarts.graphic.LinearGradient(0,0,1,0,[
                            {
                                offset:0,
                                color:"rgba(23,38,91,0.1)"
                            },
                            {
                                offset:1,
                                color:"rgba(251,154,68)"
                            }
                        ])
                    },
                    data:[100,200,300,400,500,600]
                }
            ]

        }

        // const options = {

        //     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>