ECharts X轴名称垂直位置在顶部

Question

我在echarts中的代码是：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    verticalAlign: 'left',
    axisLabel: {
      inside: true,
    },
    name: 'wow',
    nameLocation: 'start',
     nameGap: 5,
    nameTextStyle: {
      align: 'end',
      verticalAlign: 'bottom',
      fill: '#888',
      fontSize: 14,
      color: 'white',
      backgroundColor: 'gray',
      padding: [8, 6, 4, 6],
      borderRadius: 6,
    },
   
  },
  yAxis: {
    type: 'value',
    position: 'right',
    
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      
    }
  ]
};

我想将 X 轴标签名称（'wow'）放在图表顶部，是否可以控制 Y ？我尝试了padding、align和nameGap，不行。我无法将名称与 yAxis 一起使用，因为我希望 Y 刻度显示在右侧，名称显示在图表左侧。

这里是测试： 在 echarts 沙盒上 在 codedandbox 上

Answer 1

您可以指定第二个不可见的 xAxis 并将其移至顶部：

xAxis: [
    {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        verticalAlign: 'left',
        axisLabel: {
            inside: true
        }
    },
    {
        type: 'category',
        name: 'wow',
        nameLocation: 'start',
        nameTextStyle: {
            align: 'end',
            verticalAlign: 'bottom',
            fill: '#888',
            fontSize: 14,
            color: 'white',
            backgroundColor: 'gray',
            padding: [8, 6, 4, 6],
            borderRadius: 6
        },
        axisLine: { show: false }
    }
]

这里是一个例子。