layui 表格表头点击触发统计图需手动绑定事件委托，从 data-field 获取字段名，用 echarts 渲染并注意 dispose、resize 和全量数据获取（table.cache 或重新请求）。
点击表头触发统计图，Layui 本身不支持，得自己绑定事件
Layui 的 table.render() 渲染后，表头是普通 DOM 元素，没有内置点击回调。你不能靠配置项直接实现“点列名弹图表”，必须手动监听 thead th 点击，并提取列字段名（field）。
常见错误是直接给 th 加 onclick，但 Layui 表格会重绘（比如排序、分页），导致事件丢失；正确做法是用事件委托，绑定到表格容器上：
layui.table.on('sort(test)', function(obj){ /* 这是排序事件，不是表头点击 */ });
// 不要用这个 —— 它只响应排序行为，且不触发未启用排序的列
- 监听时机：在
table.render()成功回调里，或用layui.$(document).on('click', '#your-table-id thead th', ...) - 获取字段名：从
th的data-field属性读取（Layui 自动写入），不是innerText——中文列名和字段名常不一致 - 注意兼容性：Layui 2.8+ 的
data-field是可靠的；旧版本可能需靠index查cols配置反推
统计图用什么库？ECharts 最稳妥，别硬套 Layui 内置图表
Layui 的 echarts 模块只是简单封装，不支持按需渲染、异步加载、动态数据更新等关键能力，且官方已多年未维护。直接用原生 ECharts 更可控。
容易踩的坑是：在弹层里反复初始化 echarts.init() 却没调用 dispose()，导致内存泄漏、图表错位、缩放异常。
- 每次弹出前先检查是否已有实例：
if (window.myChart) { window.myChart.dispose(); } - 图表容器必须有固定宽高（CSS 中设
width: 600px; height: 400px;），Layui 弹层默认内容区无高度，图表会渲染失败 - 数据要从当前表格的全部行中提取该列值，不是仅当前页——除非你明确只要当前页统计
如何从 Layui 表格拿到全量数据并按列聚合
table.cache 是关键入口，它缓存了所有已加载的数据（含分页前原始数据），但要注意：它只包含 render() 时传入的 data 或接口返回的原始数组，不包含后续通过 table.reload() 增量更新的内容。
如果你用的是远程接口模式（url 配置），table.cache['test'] 默认为空，必须自己维护一份全量数据副本，或重新请求带 all=1 参数的接口。
- 本地模式（
data: [...]）：直接读layui.table.cache['test']，再用map()提取field对应值 - 远程模式：要么在首次加载时存一份全局变量，要么点表头时发新请求，参数带上
page=1&limit=99999（确保拿全） - 空值/非数字字段要过滤：比如
field: 'price'列混有'--'或null，echarts渲染柱状图会报NaN错误
弹层怎么建？用 layer.open()，但别漏掉 resize 适配
直接调 layer.open({ type: 1, content: '<div id="chart-dom"></div>' }) 是最简方式，但 ECharts 图表容器尺寸变化后必须手动调 myChart.resize()，否则图表挤压变形。
最容易被忽略的是窗口缩放场景：用户拖大弹层，图表还是初始大小；或者弹层里切了 Tab，再切回来图表空白。
- 在
layer.open()的success回调里初始化图表，并绑定window.onresize - 务必加防抖：
layui.$(window).on('resize', layui.debounce(function(){ myChart.resize(); }, 200)); - 关闭弹层前清理：在
layer.close()前执行myChart.dispose()和layui.$(window).off('resize')
Layui 表格本身不提供列级分析能力，所有交互、数据聚合、图表渲染都得自己补全；最复杂的地方不在代码量，而在于数据一致性——尤其是远程分页场景下，“当前列全量数据”到底从哪来，这个决策会影响整个实现路径。
