通过监听 `legendselectchanged` 事件并结合 `dispatchaction` 动态控制图例选中状态，可实现“点击任一图例项时，仅保留该项可见，其余自动隐藏”的交互效果。
在 ECharts 中，默认图例点击行为是切换（toggle）——即点击已选图例会取消选中，导致数据项隐藏；再次点击则恢复。但许多业务场景（如聚焦分析某一项、简化图表对比）需要更严格的单选模式（radio-like behavior）：点击任意图例项时，仅该数据系列显示，其余全部隐藏。
这并非 ECharts 的内置模式，但完全可通过事件 + 动作调度实现。核心思路是：
- 监听 legendselectchanged 事件（在用户点击图例后触发，且在图表重绘前）；
- 在回调中主动调用 dispatchAction 执行三步操作：
- legendAllSelect：全选所有图例项（确保后续操作有统一起点）；
- legendInverseSelect：反选（即全部取消）；
- legendSelect：仅显式选中当前点击的 params.name 对应项。
✅ 这样即可强制达成「只显示所点图例对应数据」的效果，视觉上等效于单选。
ECharts Master
下载
ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。
以下是完整可运行的配置示例（基于 Pie 图表）：
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 全版本，是实现图例驱动数据聚焦的标准实践。
