ECharts 实现图例单选模式：点击仅显示所选数据系列

通过监听 `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 唯一且与图例项一致。

该方法轻量、稳定、无侵入性，无需修改数据源或重绘逻辑，是实现专业级单选聚焦视图的标准实践。