echarts legend 十个图例分两行显示

### ECharts Legend 分页布局实现十个图例分成两行展示

为了实现在ECharts中配置图例以使十个图例分两行显示的效果，可以调整`legend`组件的相关属性来达到目的。具体来说，通过设置`orient`, `itemWidth`, `itemHeight`, 和`padding`等参数控制图例项的排列方式和间距。

以下是具体的配置方法：

#### 配置示例

option = {
    legend: {
        orient: 'horizontal', // 设置图例方向为水平
        top: 'top',
        itemGap: 20,          // 图例之间的间隔
        padding: [0, 0, 0, 10],// 上右下左内边距
        width: 'auto',         // 自动宽度适应容器大小
        height: 'auto',       // 自动高度适应内容多少
        data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'], // 数据源
        selectedMode: false,
        formatter: function (name) {
            return name;
        },
        textStyle: {
            fontSize: 12
        }
    },
    series: [
        // 系列列表...
    ]
};

当希望图例能够自动换行并保持每行五个图例外观时，可以通过CSS样式表中的媒体查询或者JavaScript动态计算的方式设定合适的`width`值给容纳图例的DOM元素，使得其内部子元素（即单个图例）能够在一定条件下自然折行[^1]。

另外一种更简单直接的做法是在`legend`对象里加入`align`属性，并将其设为`'auto'`，这会让图例根据可用空间自行决定是否换行以及如何分布各图例位置；同时配合使用`right`或`left`定位关键词进一步微调整体偏移量[^2]。

对于特定情况下需要严格限定每行列数的情况，则建议利用外部工具库如d3.js辅助完成复杂布局逻辑处理，或是基于业务场景定制化开发满足需求的功能模块[^3]。