关键逻辑在于监听表头点击事件，通过DOM提取渲染后文本并清洗归一化，聚合成ECharts所需name-value格式数据，再手动渲染环形图；需注意频次统计、NaN过滤、类别截断及图表实例销毁。
点击表头触发图表弹窗的关键逻辑在哪
核心不是“layui表格本身支持图表”，而是利用 table.on('sort') 或更合适的 header.click 事件监听表头点击，再手动提取该列所有单元格的文本/数值，传给 echarts 渲染环形图。layui 的 table 实例不提供列数据聚合能力，必须自己遍历 table.cache 或 dom 行节点。
如何从点击的表头准确获取对应列的所有值
不能依赖 field 属性直接取值——如果列是自定义模板（templet）或含 HTML 标签，table.cache 里存的可能是原始数据对象，但渲染后实际展示内容可能被格式化过。稳妥做法是：根据点击的 th 索引，遍历当前页所有 tr[data-index] 行，用 td:eq(n) 提取渲染后的文本，并做类型归一化（如数字转 parseFloat，空值过滤）。
- 先用
$(e.target).closest('th')拿到被点击的表头元素 - 用
$(th).index()得到列序号（注意：需排除操作列、复选框列等非数据列） - 遍历
layui.table.cache['yourTableId']获取原始数据，或遍历$('tbody tr')+find('td').eq(n).text()获取渲染后文本 - 对值做清洗：去除空格、过滤空字符串、尝试转数字；若全是字符串，就按频次统计（适合环形图）
ECharts 环形图渲染前必须处理的三个坑
直接把原始列值塞给 ECharts 会报错或图表空白。环形图要求 series.data 是对象数组，每个对象含 name 和 value 字段。常见错误包括：
- 没做值频次统计：比如点击“状态”列，值是
['待审', '通过', '驳回', '通过']，得先聚合成[{name:'待审',value:1},{name:'通过',value:2},{name:'驳回',value:1}] - 没处理 NaN 或 null：
parseFloat('') === NaN，会导致value: NaN，ECharts 不渲染该条目且无提示 - 没限制最大类别数：超过 8–10 种不同值时，环形图标签挤在一起。建议截断 + 合并“其他”，或改用柱状图
示例片段（简化）：
const data = ['通过', '驳回', '通过', '待审'];
const map = {};
data.forEach(v => { if (v) map[v] = (map[v] || 0) + 1; });
const chartData = Object.entries(map).map(([name, value]) => ({ name, value }));
// → [{name:'通过',value:2}, {name:'驳回',value:1}, {name:'待审',value:1}]
弹窗容器和图表销毁容易被忽略的细节
每次点击都新建一个 layer.open() 并初始化 ECharts 实例，但如果不手动销毁旧实例，内存会持续增长，多次点击后页面卡顿。Layui 的 layer.close() 不会自动释放 ECharts 实例。
- 用全局变量（如
window.currentChart）缓存上一次的echarts.init返回值 - 在新弹窗打开前，先调用
window.currentChart?.dispose() - 在
layer.close的end回调里再次执行dispose()，避免用户手动关窗漏掉清理 - 弹窗宽高建议设为
area: ['500px', '400px']，环形图最小宽度建议 ≥360px，否则 label 显示不全
环形图真正难的不是画出来，而是确保每次点击都拿到干净、可统计、可展示的列数据——尤其是当列内容混着链接、图标、多语言文案时，DOM 文本提取比 data cache 更可靠，但也更慢。别省那几行正则清洗代码。
