echarts legend 图例旋转90度

要将 Echarts 图例（legend）旋转 90 度，你可以使用 Echarts 提供的配置项来实现。以下是一个示例代码，演示如何旋转图例：

option = {
  legend: {
    orient: 'vertical',  // 设置图例的方向为垂直方向
    align: 'left',  // 设置图例在左侧对齐
    itemWidth: 10,  // 设置图例项的宽度
    itemHeight: 10,  // 设置图例项的高度
    itemGap: 10,  // 设置图例项之间的间隔
    textStyle: {
      rotate: 90  // 设置图例文本旋转角度为 90 度
    },
    data: ['A', 'B', 'C', 'D', 'E']
  },
  series: [{
    type: 'bar',
    data: [10, 20, 30, 40, 50]
  }]
};

在上面的示例中，通过设置 `legend.orient` 属性为 `'vertical'`，将图例的方向设置为垂直方向。然后通过设置 `legend.textStyle.rotate` 属性为 90，将图例文本旋转了 90 度。其他配置项如 `align`、`itemWidth`、`itemHeight` 等可根据需要进行调整。

希望对你有帮助！如果还有其他问题，请随时提问。

相关问题

echarts legend图例不显示

您好！如果ECharts的图例不显示，可能有以下几个原因和解决方法：

1. 检查数据是否正确：确保您的数据中包含了正确的图例名称。可以通过在控制台打印数据来验证。

2. 检查图例配置项：检查您的ECharts配置项中是否正确设置了图例相关的属性。确保`legend.show`属性设置为`true`，以及其他相关属性如`legend.data`、`legend.textStyle`等。

3. 检查图表类型：某些图表类型可能不支持图例显示，比如饼图（Pie）默认会显示图例，但柱状图（Bar）默认不会显示图例。您可以通过设置`series.label.normal.show`属性来自定义柱状图上的标签显示方式。

4. 检查容器大小：如果您的图表容器尺寸较小，可能会导致图例被隐藏或无法完全显示。请尝试调整容器大小或使用ECharts提供的布局方式。

5. 检查样式配置：有时候图例可能被其他元素覆盖或隐藏，比如设置了较高的z-index值、或者使用了额外的遮罩层等。请检查CSS样式文件或其他自定义样式是否影响了图例的显示。

希望以上解决方法能帮助到您！如果问题仍然存在，请提供更多相关信息或代码片段，我会尽力帮助您解决问题。

echarts legend图例样式

ECharts提供了多种设置图例样式的方式，可以通过以下属性来设置图例样式：

1. textStyle: 设置图例文本的样式，包括颜色、字号、字体等。
2. itemWidth: 设置图例标记的宽度。
3. itemHeight: 设置图例标记的高度。
4. borderColor: 设置图例边框的颜色。
5. borderWidth: 设置图例边框的宽度。
6. borderRadius: 设置图例边框的圆角半径。
7. backgroundColor: 设置图例的背景色。
8. padding: 设置图例内边距。

以下是一个设置图例样式的示例代码：

option = {
  // 设置图例组件
  legend: {
    textStyle: {
      color: '#333',
      fontSize: 14
    },
    itemWidth: 20,
    itemHeight: 14,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 5,
    backgroundColor: '#fff',
    padding: [10, 20]
  },
  // 其他配置项...
  // ...
};

以上代码设置了图例文本颜色为`#333`，字号为`14`，标记宽度为`20`，标记高度为`14`，边框颜色为`#ccc`，边框宽度为`1`，边框圆角半径为`5`，背景色为`#fff`，内边距为`[10, 20]`。