如何在Echarts中旋转轴标题？求图例旋转实现方法

一、旋转轴标题 #

要实现坐标轴标题的旋转，只需在目标坐标轴（xAxis 或 yAxis）的配置项中，通过 nameTextStyle.rotate 设置具体旋转角度即可——正数为顺时针旋转，负数为逆时针旋转。示例代码如下：

option = {
  xAxis: {
    name: 'X轴标题',
    nameTextStyle: {
      rotate: 45 // 顺时针旋转45度
    },
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    name: 'Y轴标题',
    nameTextStyle: {
      rotate: -90 // 逆时针旋转90度
    },
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'line'
    }
  ]
};

二、旋转图例 #

1. 旋转图例文字 #

如果仅需要旋转图例项的文字内容，可在 legend.textStyle 中配置 rotate 属性：

option = {
  legend: {
    data: ['访问量', '下载量'],
    textStyle: {
      rotate: 30 // 旋转图例文字30度
    }
  },
  // 其余图表配置...
};

2. 旋转整个图例组件 #

若要将整个图例组件（包含图标与文字）整体旋转，可使用 legend.rotation 属性（该属性要求 ECharts 版本 ≥ 5.0）：

option = {
  legend: {
    data: ['访问量', '下载量'],
    rotation: 90 // 整个图例组件顺时针旋转90度
  },
  // 其余图表配置...
};

内容的提问来源于stack exchange，提问作者user2301515