如何将x轴名称标签与x轴末端对齐

Question

我正在努力解决 x 轴标签的对齐问题。

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

我正在使用这个示例 - 并为轴名称添加一些代码：

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

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

相关：

• #9276 轴对齐选项被忽略

Answer 1

现在 echarts bug #8444：忽略轴对齐选项已被修复（自 4.3.0 起），我们可以完成这项工作

JsFiddle 示例

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

• nameLocation: 'end'

• nameTextStyle.align: 'right'

• 设置

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

Answer 2

您可以使用带有负值的 nameGap 作为右边距，使用 nameTextStyle.padding 属性作为上边距。

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

Answer 3

从 v5.5.0 开始提供正确的修复。

特性：

xAxis.axisLabel.alignMinLabel
xAxis.axisLabel.alignMaxLabel

文档：

https://echarts.apache.org/en/option.html#xAxis.axisLabel.alignMinLabel https://echarts.apache.org/en/option.html#xAxis.axisLabel.alignMaxLabel