Echarts grid数据标签与X轴对齐问题：负值场景下对齐失效求助

当yieldGap为正值时，图表的数据标签与X轴类别标签对齐正常；但当yieldGap出现负值时，数值标签的对齐功能失效，导致市场和航空公司的数值无法与对应类别标签保持对齐。

• 正常对齐视图：数值标签与X轴对应类别标签水平居中对齐，布局整齐。
• 负值场景视图：数值标签偏离对应类别标签的对齐位置，布局混乱。
• 可复现Demo基于ECharts官方示例编辑器

1. 统一标签固定位置与对齐规则 #

在ECharts的series配置中，为每个数据系列的标签强制设置固定位置与对齐属性，不受数值正负影响：

series: [
    {
        name: '市场',
        type: 'bar',
        data: [...], // 你的数据数组
        label: {
            show: true,
            position: 'bottom', // 固定标签在柱体靠近X轴的一侧
            align: 'center', // 水平居中对齐X轴类别标签
            verticalAlign: 'top', // 垂直方向对齐调整
            offset: [0, 3], // 微调偏移量适配布局
            color: '#333'
        }
    },
    {
        name: '航空公司',
        type: 'bar',
        data: [...], // 你的数据数组
        label: {
            show: true,
            position: 'bottom',
            align: 'center',
            verticalAlign: 'top',
            offset: [0, 3],
            color: '#333'
        }
    }
]

如果是横向柱状图（orient: 'horizontal'），则将position改为'right'或'left'，配合align和verticalAlign实现水平方向的对齐。

2. 覆盖默认自动位置逻辑 #

ECharts默认会根据数值正负自动切换标签位置（正值在柱体外侧，负值在另一侧），通过强制设置position为固定值（如'bottom'/'insideBottom'），可以覆盖这一默认行为，确保所有数值标签都在同一侧与X轴类别标签对齐。

3. 微调偏移量适配实际布局 #

根据X轴标签的高度、柱体的宽度等实际布局情况，调整offset的数值，让数值标签与对应类别标签在垂直/水平方向上完全对齐。

内容的提问来源于stack exchange，提问作者Mitul