echarts柱状图柱子偏移

ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以在网页中创建各种丰富的图表。在 ECharts 中创建柱状图时，可以通过设置系列（series）中的 `barWidth` 和 `barGap` 属性来调整柱子的宽度和柱子之间的间隙。如果想要实现柱子的偏移效果，可以通过 `barCategoryGap` 属性来控制类目轴上各个柱子之间的间隔。

例如，如果你想要柱子之间有更大的间隔，可以将 `barCategoryGap` 设置为一个比默认值更大的值。如果想要柱子并排放置，可以将其设置为 '0%'。

下面是一个简单的例子，展示如何在 ECharts 中设置柱状图柱子的偏移：

var chart = echarts.init(document.getElementById('main'));

var option = {
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        // 控制类目轴上各个柱子之间的间隔
        barCategoryGap: '20%', // 默认是 '15%', 可以根据需要调整这个值
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        // 控制柱子的宽度
        barWidth: '30%',
    }]
};

chart.setOption(option);

在这个例子中，通过调整 `barCategoryGap` 和 `barWidth` 的值，你可以达到柱子偏移的效果。需要注意的是，`barCategoryGap` 的值以百分比表示，是相对于类目轴的宽度的百分比；`barWidth` 的值则是以百分比表示，相对于类目轴宽度的百分比。