
通过监听 `legendselectchanged` 事件并结合 `dispatchaction` 动态控制图例选中状态,可实现“点击任一图例项时,自动取消其他项选中,仅保留当前项可见”的交互效果。
在 ECharts 中,默认的图例(legend)行为是多选切换(即点击图例项可单独显示/隐藏对应系列),但有时业务需要更严格的单选模式:用户点击某个图例项后,图表应仅显示该系列,其余全部隐藏,且图例自身也同步更新为仅该项被选中。这并非 ECharts 的内置模式,但完全可通过事件 + 动作 API 灵活实现。
核心思路如下:
- 监听 legendselectchanged 事件,捕获用户点击的图例项名称(params.name);
- 调用 dispatchAction 执行三步操作:
- legendAllSelect:先全选所有图例项(确保后续操作有统一起点);
- legendInverseSelect:反选(即取消全部选中);
- legendSelect:仅手动选中当前点击项。
该流程可确保无论原始状态如何,最终只保留目标系列可见,其他系列被隐藏(series[i].show = false 效果等效)。
以下是完整可运行的配置示例(适用于饼图、柱状图、折线图等所有支持图例的图表类型):
myChart.on('legendselectchanged', function (params) {
const name = params.name;
// 清空所有选中 → 仅保留当前项
myChart.dispatchAction({ type: 'legendAllSelect' });
myChart.dispatchAction({ type: 'legendInverseSelect' });
myChart.dispatchAction({ type: 'legendSelect', name });
});⚠️ 注意事项:
- 必须在 setOption 之前绑定事件,否则首次渲染后事件可能未生效;
- 若图例配置中启用了 selector: [{ type: 'all' }](如示例所示),需确保其与动作逻辑兼容;实际项目中可省略该配置,因 dispatchAction 已完全接管控制权;
- 对于含多个 series 的复杂图表,建议在 legend.data 中显式声明所有图例项名称,确保 name 匹配准确;
- 如需支持「再次点击已选项恢复全显」,可在事件回调中判断 params.selected[name] 当前状态,做条件分支处理(本例为纯单选,不包含此逻辑)。
最终效果:点击任意图例项,图表立即聚焦展示该数据系列,其余系列淡出,图例项也同步高亮唯一激活态——真正实现专业级数据聚焦交互。










