ECharts图例分组定位求助：如何实现Legend分组聚合排版

要实现图例分组并统一定位的效果（分组带标题，组内图例项聚合排列），ECharts 单个默认图例组件不支持直接分组，可通过以下两种可行方案实现：

方案一：多 Legend 组件配合定位（官方推荐，配置简单） #

通过创建多个独立的 Legend 组件，分别对应不同分组，调整定位参数让它们呈现分组效果，同时解决原代码中系列重名导致的图例交互问题：

实现步骤 #

1. 给每个系列的 name 添加分组前缀，避免重名冲突（如 Group 1 - Legend 1）；
2. 配置多个 legend 实例，每个实例对应一个分组，设置专属的 title、data 和定位参数；
3. 统一调整图例的样式、间距，让分组视觉上连贯。

完整配置代码 #

option = {
    // 第一个分组图例
    legend: [
        {
            title: {
                text: 'Group 1',
                left: 'center',
                padding: [10, 0, 5, 0] // 标题上下内边距
            },
            data: ['Group 1 - Legend 1', 'Group 1 - Legend 2', 'Group 1 - Legend 3'],
            left: '10%',
            top: 'top',
            orient: 'horizontal',
            itemGap: 20
        },
        // 第二个分组图例
        {
            title: {
                text: 'Group 2',
                left: 'center',
                padding: [10, 0, 5, 0]
            },
            data: ['Group 2 - Legend 1', 'Group 2 - Legend 2', 'Group 2 - Legend 3'],
            right: '10%',
            top: 'top',
            orient: 'horizontal',
            itemGap: 20
        }
    ],
    series: [
        {
            name: 'Group 1 - Legend 1',
            type: 'line',
            data: [1, 2, 3, 4, 5]
        },
        {
            name: 'Group 1 - Legend 2',
            type: 'line',
            data: [2, 4, 6, 8, 10]
        },
        {
            name: 'Group 1 - Legend 3',
            type: 'line',
            data: [3, 6, 9, 12, 15]
        },
        {
            name: 'Group 2 - Legend 1',
            type: 'line',
            data: [1, 2, 3, 4, 5]
        },
        {
            name: 'Group 2 - Legend 2',
            type: 'line',
            data: [2, 4, 6, 8, 10]
        },
        {
            name: 'Group 2 - Legend 3',
            type: 'line',
            data: [3, 6, 9, 12, 15]
        }
    ]
};

方案二：自定义 HTML 图例（高度自定义样式） #

如果需要更灵活的分组样式（比如复杂的排版、自定义交互），可以隐藏 ECharts 自带图例，用 HTML 构建自定义分组图例，再绑定 ECharts 的交互事件：

实现代码 #

HTML 部分

<div id="main" style="width: 800px; height: 400px;"></div>
<!-- 自定义分组图例 -->
<div id="custom-legend" style="display: flex; justify-content: space-around; width: 800px; margin: 10px auto;">
    <div class="legend-group">
        <h3>Group 1</h3>
        <div class="legend-item" data-name="Group 1 - Legend 1">
            <span class="icon" style="display: inline-block; width: 12px; height: 12px; background: #5470c6; margin-right: 5px;"></span>
            Legend 1
        </div>
        <div class="legend-item" data-name="Group 1 - Legend 2">
            <span class="icon" style="display: inline-block; width: 12px; height: 12px; background: #91cc75; margin-right: 5px;"></span>
            Legend 2
        </div>
        <div class="legend-item" data-name="Group 1 - Legend 3">
            <span class="icon" style="display: inline-block; width: 12px; height: 12px; background: #fac858; margin-right: 5px;"></span>
            Legend 3
        </div>
    </div>
    <div class="legend-group">
        <h3>Group 2</h3>
        <div class="legend-item" data-name="Group 2 - Legend 1">
            <span class="icon" style="display: inline-block; width: 12px; height: 12px; background: #ee6666; margin-right: 5px;"></span>
            Legend 1
        </div>
        <div class="legend-item" data-name="Group 2 - Legend 2">
            <span class="icon" style="display: inline-block; width: 12px; height: 12px; background: #73c0de; margin-right: 5px;"></span>
            Legend 2
        </div>
        <div class="legend-item" data-name="Group 2 - Legend 3">
            <span class="icon" style="display: inline-block; width: 12px; height: 12px; background: #3ba272; margin-right: 5px;"></span>
            Legend 3
        </div>
    </div>
</div>

JS 部分

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

var option = {
    legend: {
        show: false // 隐藏自带图例
    },
    series: [
        {
            name: 'Group 1 - Legend 1',
            type: 'line',
            data: [1, 2, 3, 4, 5],
            color: '#5470c6'
        },
        {
            name: 'Group 1 - Legend 2',
            type: 'line',
            data: [2, 4, 6, 8, 10],
            color: '#91cc75'
        },
        {
            name: 'Group 1 - Legend 3',
            type: 'line',
            data: [3, 6, 9, 12, 15],
            color: '#fac858'
        },
        {
            name: 'Group 2 - Legend 1',
            type: 'line',
            data: [1, 2, 3, 4, 5],
            color: '#ee6666'
        },
        {
            name: 'Group 2 - Legend 2',
            type: 'line',
            data: [2, 4, 6, 8, 10],
            color: '#73c0de'
        },
        {
            name: 'Group 2 - Legend 3',
            type: 'line',
            data: [3, 6, 9, 12, 15],
            color: '#3ba272'
        }
    ]
};

myChart.setOption(option);

// 绑定自定义图例点击事件
document.querySelectorAll('.legend-item').forEach(item => {
    item.addEventListener('click', function() {
        var name = this.getAttribute('data-name');
        var isSelected = myChart.getOption().series.find(s => s.name === name).selected;
        myChart.dispatchAction({
            type: 'legendToggleSelect',
            name: name
        });
        // 切换选中样式（可选）
        this.style.opacity = isSelected ? 0.5 : 1;
    });
});

关于你之前尝试的问题说明 #

你直接在 legend.data 中传入 {'group 1':'Legend 1'} 这类对象的方式不符合 ECharts 配置规范：ECharts 的 legend.data 每一项只能是字符串，或包含 name、icon、textStyle 等属性的配置对象，不能用键值对形式指定分组。

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