echarts - 如何将 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

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

JsFiddle example

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

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

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

• verticalAlign: 'top'
• padding: [30, 0, 0, 0]:设置顶部填充以将文本向下移动

  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],
    }
  }