Echarts如何让柱状图柱子不挨着坐标轴，就像下图这样

原理

在百度上找了很久都没找到，后来灵机一动，发现其实很简单，只需要将两个柱状图进行重叠就行了，空出来的那部分也是一个柱状图，设置他的长度和透明度就行了。话不多说，相关代码如下：

代码

option2: {
                dataset: {
                    source: [
                        ['score', 'amount', 'product'],
                        // [89.3, 58212, 'Matcha Latte'],
                        // [57.1, 78254, 'Milk Tea'],
                        // [74.4, 41032, 'Cheese Cocoa'],
                        // [50.1, 12755, 'Cheese Brownie'],
                        // [89.7, 20145, 'Matcha Cocoa'],
                        [86.2, 7000, 'Tea'],
                        [17.1, 8000, 'Orange'],
                        [44.4, 9000, 'Lemon'],
                        // [32.7, 20112, 'Walnut Brownie']
                    ]
                },

                grid: {containLabel: true,
                    x:20,
                    y:7,
                    x2:10,
                    y2:5,
                    borderWidth:1
                },
                xAxis: {name: 'amount',
                    axisLine: {
                        lineStyle: {
                            color: "#fff",
                        }
                    },
                    splitLine:{
                        show:false
                    },
                    axisLabel:{
                        textStyle:{
                            fontSize:10
                        }}
                },
                yAxis: {type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: "#fff",
                        }
                    }
                },
                series: [
                    {
                        name:'辅助',
                        type:'bar',
                        stack: 'amount',
                        itemStyle:{
                            normal:{
                                barBorderColor:'rgba(0,0,0,0)',
                                color:'rgba(0,0,0,0)'
                            },
                            emphasis:{
                                barBorderColor:'rgba(0,0,0,0)',
                                color:'rgba(0,0,0,0)'
                            }
                        },
                        data:[100, 100, 100]
                    },
                    {
                        stack:'amount',
                        type: 'bar',
                        encode: {
                            // Map the "amount" column to X axis.
                            x: 'amount',
                            // Map the "product" column to Y axis
                            y: 'product'
                        },
                        barWidth:10,
                        itemStyle: {
                            barBorderRadius:30,
                            //颜色渐变
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: '#3487da' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#44edfe' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            },
                        },
                    }
                ]
            }