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` 等可根据需要进行调整。

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

相关问题

echars的图例的文字怎样进行旋转

ECharts是一个流行的JavaScript图表库，它提供了一种灵活的方式来创建各种类型的图表，并允许用户自定义图表元素，包括图例。若想旋转图例文字，你需要在配置图例选项时设置`orient`属性，并结合`rotation`或`itemStyle.textRotate`来控制旋转角度。

例如，如果你想将图例文字水平向左旋转45度，可以这样做：

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
    legend: {
        orient: 'vertical', // 设置图例的方向为垂直
        itemStyle: { // 图例项样式
            textRotation: 45, // 文字旋转45度
        }
    },
    ...其他图表配置...
});

请注意，`textRotation`只适用于文字，如果图标也需要旋转，可能需要使用CSS或者调整其他相关的配置选项。如果你有更具体的例子或需求，也可以提供更多的细节以便得到准确的帮助。

echarts-gl 哪些配置

Echarts-gl 是基于 ECharts 的 3D 版本，用于构建复杂的三维图表与地图应用。它能够渲染高质量的三维图形，并支持丰富的交互操作。在使用 echarts-gl 进行项目开发时，需要掌握一系列配置选项来定制图表的外观、功能以及数据展现。

下面是一些关键的 echarts-gl 配置项：

### 数据配置 (Series Data)
数据集是展示的基础，通过 `series` 来定义数据序列。每个序列通常包括以下属性：
- **name**: 标识图表元素的名称，用于图例显示。
- **type**: 确定图表的类型，例如柱状图、线图等。
- **data**: 包含具体的数值数据点。

### 地图与区域配置 (Map and Region)
对于地理信息展示，echarts-gl 提供了多种地图类型的配置选项，如：
- **mapType**: 指定使用的地图类型，如 'world', 'china', 'usa' 等。
- **zoom**: 设置地图的缩放级别。
- **center**: 定义地图中心位置。

### 图表样式配置 (Chart Styling)
样式配置主要用于调整图表的整体视觉效果：
- **color**: 使用颜色来区分数据点或类别。
- **symbolSize**: 图标大小控制，适用于点状数据表示。
- **label**: 文本标签配置，提供额外的信息提示。

### 动画与交互配置 (Animation and Interactivity)
动画与交互性增强了用户体验：
- **animation**: 控制是否启用图表加载过程中的动画。
- **zoomScale**: 缩放操作的放大比例。
- **rotate`: 控制旋转操作的角度。

### 组件与工具配置 (Components and Tools)
允许添加各种组件和服务，增强图表的功能：
- **tooltip**: 显示数据详情的小提示框。
- **legend**: 图例，用于说明各个系列的颜色或标记含义。
- **toolbox**: 工具箱，包含常用的操作按钮，如平移、缩放、旋转等。

### 性能优化配置 (Performance Optimization)
为了提升渲染性能，可以设置一些优化相关的配置：
- **downsample**: 对大量数据进行降采样处理，减少计算量。

### 脚本示例

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
    title: {
        text: '3D Scatter Plot'
    },
    series: [{
        type: 'scatter3d',
        coordinateSystem: 'geo',
        data: [
            { name: '北京', value: [116.404, 39.915, 1] },
            // 更多数据点...
        ],
        label: {
            normal: {
                formatter: '{b} ({c})'
            }
        },
        geoIndex: 0,
        symbolSize: function(val) {
            return Math.sqrt(val) * 10;
        },
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#ffaa00'
            }, {
                offset: 1,
                color: '#e35f1a'
            }])
        }
    }],
});

通过这些配置，你可以根据项目的特定需求定制出功能丰富、美观且高效的三维可视化应用。更多详细配置选项及使用指南可以参考官方文档或社区实例。

---