ECharts 实现图例单选模式：点击图例仅显示对应数据项

通过监听 `legendselectchanged` 事件并结合 `dispatchaction` 动态控制图例选中状态，可实现“点击任一图例项时，仅保留该项可见，其余自动隐藏”的交互效果。

在 ECharts 中，默认图例点击行为是切换（toggle）——即点击已选图例会取消选中，导致数据项隐藏；再次点击则恢复。但许多业务场景（如聚焦分析某一项、简化图表对比）需要更严格的单选模式（radio-like behavior）：点击任意图例项时，仅该数据系列显示，其余全部隐藏。

这并非 ECharts 的内置模式，但完全可通过事件 + 动作调度实现。核心思路是：

1. 监听 legendselectchanged 事件（在用户点击图例后触发，且在图表重绘前）；
2. 在回调中主动调用 dispatchAction 执行三步操作：
   • legendAllSelect：全选所有图例项（确保后续操作有统一起点）；
   • legendInverseSelect：反选（即全部取消）；
   • legendSelect：仅显式选中当前点击的 params.name 对应项。

✅ 这样即可强制达成「只显示所点图例对应数据」的效果，视觉上等效于单选。

以下是完整可运行的配置示例（基于 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.dispatchAct
ion({ 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 全版本，是实现图例驱动数据聚焦的标准实践。