解决 ECharts 饼图鼠标悬浮后标签 title 消失的问题

TL;DR

饼图扇区外侧的文字标签，鼠标悬浮时标签里的 title 那一行会突然消失移开鼠标又恢复。

这不是样式 bug，而是 ECharts 的标签防重叠布局与 emphasis状态交互导致的。修复只有一句话：

使用者痛点

• 看不见业务报表中标题是关键信息，消失会导致数据解读错误。
• 调试困难：悬浮才出现的“闪失”让人误以为是动画或 CSS 冲突。话说回来，
• 配置困惑： 普通态已经写了 label.show: true。却仍然在 hover 时被隐藏，令人怀疑官方文档。
• 维护成本： 每次新增饼图都要检查是否出现该问题，否则上线后会被使用者投诉。

一、问题现象

一张常见的占比饼图，每个扇区外侧带文字标签。标签通常是两行结构: 第一行是数值/百分比，第二行是标题（title)。说起来，

┌──────────────┐
│ % │ ← 数值行
╲ │ 自动模式 │ ← 标题行
╲ └──────────────┘
╱───── ╱ 扇区

Bug 表现：

排查时第一反应往往是「hover 触发了什么动画把标签顶出去」——其实不是动效根本没动标签的位置。真正的根因在状态机里，

二、根因：emphasis 态「沿用隐藏状态」

ECharts 的饼图。当扇区标签显示在外侧时引擎会自动做标签防重叠布局: 空间不够或标签互相遮挡时它会隐藏部分标签、引导线，或其中某几行。

关键点：

不是 emphasis 把 title 藏起来的，而是 title 早就被防重叠布局判了「隐藏」——emphasis 只是没有把它捞回来。

This also explains *** “移开鼠标又恢复”：离开 emphasis 态后回到了普通态的布局结果。

三、解法：emphasis 显式 show: true

再看series，label: {
至于show，true,// formatter / rich 等自定义
},labelLine: {
show这方面。true
},emphasis: {
// ★关键：强调态强制展示 label 与 labelLine
说到label，{ show: true },labelLine: { show: true }
}
}
]

• 扇区 hover 时。
• tag和引导线,title 行稳定可见。按理说，

为什么不能指望默认值？

emphasis 态不会自动继承普通态的全部显示设置。普通态写了 label.show:true 不代表 emphasis 态也是 true——一旦普通态里这个标签被防重叠布局动态隐藏过emphasis 态就会以「隐藏」为准。涉及 label / labelLine 可见性时显式写 emphasis.label.show:true 比依赖默认值稳妥得多。

四、最小复现代码

五、小结