ECharts自定义Legend不选中图标时，如何保持图例样式不变？

Question

在ECharts中，当自定义Legend的图标未被选中时，默认样式会发生变化。如何让图例样式在未选中状态下保持不变？关键在于使用`legend`组件的`selectedMode`与自定义回调函数。通过设置`selected`属性和监听`legendselectchanged`事件，可以手动控制图例的状态和样式。 具体实现方法是：在初始化图表时，为每个图例项设置默认选中状态，并通过`graphic`或`series`自定义绘制图例样式。当触发`legendselectchanged`事件时，拦截默认行为，保持图例的视觉效果不变。此外，可结合`option`配置中的`formatter`属性动态调整显示内容，确保用户体验一致。 此问题常见于需要固定图例样式以增强可视化效果的场景，例如仪表盘设计。

Answer 1

1. 问题背景与常见现象

在使用ECharts进行数据可视化时，图例（Legend）的默认行为是当用户点击某个图例项时，对应的图表系列会被隐藏或显示。这种交互虽然方便，但在某些场景下可能并不适用，例如需要固定图例样式以增强仪表盘的整体视觉效果。

具体来说，默认情况下，当图例未被选中时，其样式会发生变化，例如颜色变浅、透明度降低等。这种变化可能会破坏设计的一致性，尤其是在自定义图例图标时更为明显。

• 问题：如何让图例样式在未选中状态下保持不变？
• 目标：确保图例在交互过程中始终呈现一致的视觉效果。

2. 解决思路与关键技术点

解决此问题的关键在于以下几个方面：

1. selectedMode: 控制图例的多选或单选模式。
2. selected属性: 在初始化时为每个图例项设置默认选中状态。
3. legendselectchanged事件: 监听并拦截默认行为，手动控制图例的状态和样式。
4. graphic或series: 自定义绘制图例样式，确保未选中状态下的视觉效果一致。

通过上述技术点的组合，可以实现图例样式的固定化，避免因交互导致的样式变化。

3. 具体实现步骤

以下是详细的实现步骤：

步骤	操作	关键代码示例
1	初始化图表，并为每个图例项设置默认选中状态。	selected: { 'Series1': true, 'Series2': true }
2	通过`graphic`或`series`自定义绘制图例样式。	graphic: { type: 'circle', style: { fill: '#ff0000' } }
3	监听`legendselectchanged`事件，拦截默认行为。	chart.on('legendselectchanged', function(params) { ... })
4	结合`formatter`属性动态调整显示内容。	formatter: function(name) { return name.toUpperCase(); }

4. 示例代码与流程图

以下是一个完整的示例代码片段，展示如何实现固定图例样式：

var chart = echarts.init(document.getElementById('main'));
var option = {
    legend: {
        selectedMode: 'multiple',
        selected: { 'Series1': true, 'Series2': true },
        formatter: function(name) { return name.toUpperCase(); }
    },
    series: [{
        name: 'Series1',
        type: 'bar',
        data: [120, 200, 150]
    }, {
        name: 'Series2',
        type: 'line',
        data: [130, 180, 160]
    }]
};
chart.setOption(option);

chart.on('legendselectchanged', function(params) {
    // 拦截默认行为
    params.selected['Series1'] = true;
    params.selected['Series2'] = true;
});
    

为了更直观地理解实现流程，以下是一个简单的流程图：

graph TD;
            A[初始化图表] --> B[设置默认选中状态];
            B --> C[监听legendselectchanged事件];
            C --> D[拦截默认行为];
            D --> E[保持图例样式不变];

5. 应用场景与扩展思考

该解决方案适用于多种场景，尤其是需要固定图例样式以增强可视化效果的场合，例如：

• 仪表盘设计：确保所有图例项在交互过程中保持一致的视觉效果。
• 自定义主题：根据业务需求设计独特的图例样式，而不受默认交互影响。

此外，还可以进一步扩展功能，例如：

• 动态加载图例项。
• 结合外部数据源实时更新图例样式。