echarts 使用自定义图例并启用 series emphasis 时，频繁切换图例项可能导致部分折线标签消失；根本原因是高亮（highlight）与隐藏/显示状态切换引发动画冲突，通过在 toggle 前主动 downplay 可彻底解决。
echarts 使用自定义图例并启用 series emphasis 时，频繁切换图例项可能导致部分折线标签消失；根本原因是高亮（highlight）与隐藏/显示状态切换引发动画冲突，通过在 toggle 前主动 downplay 可彻底解决。
在 ECharts 中，当为折线系列（type: 'line'）配置 emphasis.focus: 'self' 并结合自定义图例控制显隐时，若用户先高亮某条线（如鼠标悬停触发 highlight），再通过图例按钮将其隐藏，随后再次显示该系列——此时标签（label.show: true）可能意外不渲染。该问题并非配置错误，而是 ECharts 内部动画机制导致的竞态：被高亮的系列在隐藏后再恢复时，会同时触发「正常状态渲染」与「emphasis 状态应用」两套标签动画，相互覆盖或中断，最终导致标签不可见。
✅ 正确解决方案：预清除高亮状态
关键在于——在执行 legendToggleSelect 前，强制将目标系列重置为普通状态。ECharts 原生图例正是这样处理的：点击已高亮项时，先 downplay 再切换选中状态。
只需修改 dispatch 函数，插入一次 downplay 动作：
ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。
const dispatch = (line) => {
// ? 关键修复：先清除高亮，避免动画冲突
myChart.dispatchAction({
type: 'downplay',
seriesName: line // 推荐用 seriesName，语义清晰且兼容性好
});
// ? 再执行图例切换
myChart.dispatchAction({
type: 'legendToggleSelect',
name: line
});
};
? 注意：downplay 对已隐藏的系列无副作用，因此无需额外判断可见性，可安全前置调用。
? 补充优化建议
-
动画时长微调：若仍偶发闪烁，可适当降低动画持续时间，提升响应一致性：
animationDuration: 20, animationDurationUpdate: 20
- 避免全局禁用动画：虽然设置 animation: false 能绕过问题，但会牺牲交互体验，不推荐作为长期方案。
-
事件监听调试（可选）：开发阶段可启用以下监听辅助定位：
myChart.on('highlight', (params) => console.log('highlight:', params)); myChart.on('downplay', (params) => console.log('downplay:', params)); myChart.on('legendselectchanged', (params) => console.log('legend changed:', params));
✅ 最终效果验证
修复后，无论用户以何种顺序点击/悬停图例按钮（如：line1 → line2 → line1 → line2），所有可见折线的标签均稳定显示，emphasis 高亮效果（如加粗线条、放大标记点）与标签渲染完全解耦、互不干扰。
此方案符合 ECharts 官方行为逻辑，无需修改图表配置结构或引入第三方补丁，是兼顾功能完整性与稳定性的最佳实践。
