当使用自定义图例配合 emphasis 高亮时，反复切换系列显隐会导致部分折线的 label 消失；根本原因是高亮状态未被及时清除，引发动画冲突。解决方案是在执行图例切换前主动触发 downplay 清除强调状态。
当使用自定义图例配合 `emphasis` 高亮时，反复切换系列显隐会导致部分折线的 label 消失；根本原因是高亮状态未被及时清除，引发动画冲突。解决方案是在执行图例切换前主动触发 `downplay` 清除强调状态。
在 ECharts 中，启用 emphasis.focus: 'self' 可实现悬停高亮单条折线的效果，但若结合自定义图例（通过 dispatchAction 控制显隐），则容易触发一个隐藏的渲染缺陷：当某条折线处于 highlight 状态时被图例隐藏（legendToggleSelect），随后再次显示，其 label 可能因动画状态冲突而无法正确恢复。
该问题并非配置错误，而是 ECharts 内部动画机制在「高亮 → 隐藏 → 显示」流程中未同步清理强调状态所致。官方内置图例之所以无此问题，正是因为它在点击前自动调用 downplay 重置目标系列状态。
✅ 正确做法：始终先 downplay，再 legendToggleSelect
将原本的图例点击逻辑：
const dispatch = (line) => {
myChart.dispatchAction({
type: 'legendToggleSelect',
name: line,
});
};
修正为（关键改动）：
ECharts Master
下载
ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。
const dispatch = (line) => {
// ? 关键：强制清除强调状态，避免动画残留
myChart.dispatchAction({
type: 'downplay',
seriesName: line
});
// ? 再执行显隐切换
myChart.dispatchAction({
type: 'legendToggleSelect',
name: line,
});
};
? downplay 对已隐藏的系列无副作用，因此无需判断当前可见性，可安全前置调用。
? 同时建议优化的配置项
为提升稳定性与响应速度，推荐显式配置动画时长（尤其在高频交互场景）：
option = {
// ⚠️ 不建议完全禁用 animation（影响体验），但可缩短时长
animationDuration: 20,
animationDurationUpdate: 20,
// 其余配置保持不变...
};
? 完整修复后交互逻辑说明
| 事件 | 触发动作 | 说明 |
|---|---|---|
| mouseover（按钮） | highlight（对应 series） | 实现悬停高亮 |
| mouseout（按钮） | downplay（对应 series） | 清除高亮，还原常态 |
| click（按钮） | downplay → legendToggleSelect | 确保切换前状态干净，杜绝 label 丢失 |
✅ 验证效果
- ✅ 多次点击 line1/line2 切换显隐，所有折线的 label 始终稳定显示；
- ✅ 悬停按钮时折线高亮、label 清晰可见；
- ✅ 图表缩放、数据更新等操作不受影响；
- ✅ 兼容多系列、动态数据场景（只需遍历 seriesName 即可复用逻辑）。
⚠️ 注意事项
- 不要移除 emphasis 配置来“规避”问题——这会牺牲核心交互体验；
- 避免在 legendselectchanged 回调中重复 downplay，可能引发冗余调用；
- 若使用 seriesIndex 而非 seriesName，请确保索引准确（推荐优先用 seriesName 提升可维护性）；
- 在 ECharts v5.4+ 版本中该问题仍存在，上述方案为当前最可靠实践。
通过这一微小但关键的状态清理步骤，即可彻底解决自定义图例与 emphasis 标签渲染之间的冲突，让交互既专业又健壮。
