如何将x轴名称标签对齐到x轴的末尾

Question

我正在努力调整x轴标签的对齐方式。

• 我目前拥有的是x轴末端右侧的标签：请参阅（1）
• 我希望此标签位于x轴下方并与x轴的末端对齐：即，使标签的右侧始终位于x轴的末端：请参见（2 ）

我正在使用此example-并为轴名称添加一些代码：

xAxis: {
    name: 'axisName',
    //nameGap: -100,
    nameTextStyle: {
        fontSize: 18,
        backgroundColor: 'red',
        rich: {
            //position: 'right',
            //verticalAlign: 'bottom',
            //textVerticalAlign: 'bottom'

        }
    }

我不确定从哪里开始。我尝试了多个align / nameGap / rich选项，但找不到解决方案。

相关：

• #9276 axis align option ignored

Answer 1

您可以将nameGap的右边界使用负值，并将nameTextStyle.padding属性作为上边界。

xAxis: {
    type: 'category',
    data: hours,
    splitArea: {
        show: true
    },
    name: 'x-axis',
    nameGap: -30,
    nameTextStyle: {
        padding: [50,0,0,0]
    }
}