如何将 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]
    }
}

Answer 2

现在 echarts bug #8444: axis align option ignored 已经修复（从 4.3.0 开始），我们可以使它工作

JsFiddle example

水平对齐很简单并且按预期工作：

nameLocation: 'end'
nameTextStyle.align: 'right'
设置nameGap=0：默认值为 15 并且会将标签向右移动太远

这些垂直对齐设置按预期工作

verticalAlign: 'top'
padding: [30, 0, 0, 0]: 设置 top-padding 将文本向下移动

  xAxis: {
    name: '123456789123456789',
    nameLocation: 'end',
    // the default nameGap=15 would move the text to the right
    nameGap: 0,
    nameTextStyle: {
      align: 'right',
      verticalAlign: 'top',
      /**
       * the top padding will shift the name down so that it does not overlap with the axis-labels
       * t-l-b-r
       */
      padding: [30, 0, 0, 0],
    }
  }

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

How to align the x-Axis name label to the end of the x-Axis

echarts