echarts柱状图 柱子 左右偏移

### 调整 ECharts 柱状图中的柱子左右偏移

在 ECharts 中，可以通过 `barCategoryGap` 和 `barWidth` 属性来控制柱状图中柱子之间的间距以及宽度。然而，对于更精细的左右偏移需求，则需利用 `itemStyle.normal.barBorderRadius` 或者通过设置数据项的具体位置。

具体来说，在某些情况下，可能需要使用 `offsetCenter` 来调整整个系列的位置，从而间接达到改变单根柱子相对位置的效果。不过最直接的方法之一是在定义 series 数据时为每一组数据指定额外的样式属性，特别是 `label` 的定位参数和 `markPoint` 特殊标记点功能[^1]。

针对精确到每条柱子的水平方向微调，一种常见做法是增加辅助序列并应用负值作为其坐标轴上的偏移量，配合 `stack` 堆叠特性使得视觉上看起来像是原柱体发生了横向移动。这种方法虽然绕了一步路走，但在灵活性方面提供了更多可能性[^3]。

另外值得注意的是，如果仅希望简单地整体平移所有柱形而不涉及复杂交互逻辑的话，还可以考虑修改 X 轴标签或网格区域的相关配置选项，如 `grid.left`, `grid.right` 等，以此影响图表内元素布局[^4]。

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: 'Direct',
        type: 'bar',
        barWidth: '40%',
        itemStyle: {
            normal: {
                // 这里可以尝试不同的 borderRadius 实现特殊形状
                borderRadius: [5, 5, 0, 0],
                offsetCenter: [-20, 0], // 左右上下偏移像素数
            }
        },
        data: [120, 132, 101, 134, 90, 230, 210]
    }]
};