通过监听 `legendselectchanged` 事件并结合 `dispatchaction` 动态控制图例选中状态，可实现“点击某个图例项时，仅显示该项对应的数据系列，其余全部隐藏”，完美满足单选聚焦分析需求。
在 ECharts 中，默认的图例交互是多选（点击切换显隐），但业务中常需“单选聚焦”效果：即用户点击任一图例项时，自动取消其他所有选项，仅保留当前项可见——这并非内置行为，但可通过事件 + 动作调度轻松实现。
核心思路是：监听 legendselectchanged 事件 → 获取被点击图例项名称 → 先全选（legendAllSelect）→ 再反选（legendInverseSelect）→ 最后精准选中目标项（legendSelect）。该三步组合可确保无论当前状态如何，最终只保留一个图例项为激活态，从而驱动图表仅渲染对应数据系列。
以下是完整可运行代码示例（适配 Pie、Bar、Line 等所有支持图例的系列）：
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', title: '全选' },
{ type: 'inverse', title: '反选' }
]
},
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);✅ 注意事项：
- legendAllSelect 和 legendInverseSelect 是辅助动作，确保状态重置可靠；若直接 legendUnSelect 其他项，需遍历 selected 状态，逻辑更复杂；
- 此方案兼容 ECharts v5.0+，低版本请确认 dispatchAction 支持对应图例动作；
- 若需支持「再次点击取消单选并恢复全显」，可在事件中判断 params.selected[name] 当前状态，做条件分支处理；
- 多系列图表（如双 Y 轴）同样适用，只需确保各系列 name 唯一且与图例项一致。
该方法轻量、稳定、无侵入性，无需修改数据源或重绘逻辑，是实现专业级单选聚焦视图的标准实践。
