uniapp Echarts-柱状图柱图间隔

在 Echarts 中，可以通过设置 grid 中的 containLabel 和 bottom 属性来控制柱状图的间隔。

- containLabel：Boolean 类型，表示是否将标签包含在内，默认为 false。如果将其设置为 true，那么图表的底部空间会留给标签，从而使得图表整体占据的空间变小，柱状图之间的间隔也会变小。
- bottom：String 或 Number 类型，表示 grid 组件离容器底部的距离。如果将其设置为较小的值，那么柱状图之间的间隔也会变小。

例如：

option = {
    ...
    grid: {
        containLabel: true,
        bottom: 10  // 底部空间留给标签并将 grid 组件离容器底部的距离设置为 10
    },
    xAxis: {
        data: ['A', 'B', 'C', 'D', 'E'],
        axisLine: {
            show: false // 隐藏 x 轴线条
        },
        axisTick: {
            show: false // 隐藏 x 轴刻度线
        }
    },
    yAxis: {
        axisLine: {
            show: false // 隐藏 y 轴线条
        },
        axisTick: {
            show: false // 隐藏 y 轴刻度线
        }
    },
    series: [{
        type: 'bar',
        data: [10, 20, 30, 40, 50],
        itemStyle: {
            color: '#0086ce' // 设置柱子的颜色
        }
    }]
    ...
};

需要注意的是，如果柱状图的宽度设置过大，可能会导致柱子之间的间隙变小，从而使得柱子之间的区分度降低。因此，在设置柱状图的宽度时需要考虑实际情况。