
通过监听 `legendselectchanged` 事件并结合 `dispatchaction` 动态控制图例选中状态,可实现“点击任一图例项时,仅保留该项可见,其余自动隐藏”的交互效果。
在 ECharts 中,默认图例点击行为是切换(toggle)——即点击已选图例会取消选中,导致数据项隐藏;再次点击则恢复。但许多业务场景(如聚焦分析某一项、简化图表对比)需要更严格的单选模式(radio-like behavior):点击任意图例项时,仅该数据系列显示,其余全部隐藏。
这并非 ECharts 的内置模式,但完全可通过事件 + 动作调度实现。核心思路是:
- 监听 legendselectchanged 事件(在用户点击图例后触发,且在图表重绘前);
- 在回调中主动调用 dispatchAction 执行三步操作:
- legendAllSelect:全选所有图例项(确保后续操作有统一起点);
- legendInverseSelect:反选(即全部取消);
- legendSelect:仅显式选中当前点击的 params.name 对应项。
✅ 这样即可强制达成「只显示所点图例对应数据」的效果,视觉上等效于单选。
以下是完整可运行的配置示例(基于 Pie 图表):
响应式黑色展台设计整站模板,自带内核安装即用,图片文本实现可视化,方便修改,支持多种内容模型及自定义功能,可根据需要自行添加。模板特点: 1、安装即用,自带人人站CMS内核及企业站展示功能(产品,新闻,案例展示等),并可根据需要增加表单 搜索等功能(自带模板) 2、支持响应式 3、前端banner轮播图文本均已进行可视化配置 4、伪静态页面生成 5、支持内容模型、多语言、自定义表单、筛选、多条件搜
import * as echarts from 'echarts';
const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
myChart.on('legendselectchanged', (params) => {
const { name } = params;
// 强制单选:先全选 → 再全不选 → 最后只选当前项
myChart.dispatchAction({ type: 'legendAllSelect' });
myChart.dispatchAction({ type: 'legendInverseSelect' });
myChart.dispatchAction({ type: 'legendSelect', name });
});
const option = {
tooltip: { trigger: 'item' },
legend: {
top: '15%',
left: '5%',
orient: 'vertical',
textStyle: { fontSize: 25 },
// 启用图例选择器(可选,增强交互提示)
selector: [{ type: 'all' }, { type: 'inverse' }]
},
series: [{
type: 'pie',
radius: ['55%', '70%'],
avoidLabelOverlap: false,
itemStyle: { borderRadius: 35, borderColor: '#fff', borderWidth: 8 },
label: { show: false, position: 'center' },
labelLine: { show: false },
data: [
{ value: 2, name: 'LR-MS' },
{ value: 2, name: 'LR-MB-30' },
{ value: 1, name: 'LR-MS-RS485-DIN' }
]
}]
};
myChart.setOption(option);⚠️ 注意事项:
- legendselectchanged 是响应式事件,务必在 setOption 之前注册,否则首次点击可能不触发;
- 若图表支持多系列(如 line/bar 混合),逻辑同样适用,只需确保 series[i].name 与图例 name 严格一致;
- 如需支持「点击已选项恢复全显」,可在回调中加判断:if (params.selected[name]) { /* 全选 */ } else { /* 单选 */ };
- 性能敏感场景下,连续快速点击可能引发多次重绘,建议添加防抖(lodash.debounce)或节流处理。
该方案无需修改 ECharts 源码,兼容 v5.x 全版本,是实现图例驱动数据聚焦的标准实践。








