应监听原生mouseenter事件，在table.render()的done回调中遍历tbody tr统一绑定；需预置图表容器、用data-index存索引、hover时检查并销毁旧实例，mouseleave时彻底dispose并清空dom。
表格行 hover 时触发图表渲染的时机怎么选
直接在 layui.table.on('row(...)') 里调用 ECharts 初始化会失败——因为该事件只响应点击，且 DOM 节点可能尚未稳定；真正可靠的是监听原生 mouseenter 事件，在目标 tr 上绑定，并确保容器已存在、宽高不为 0。
实操建议：
- 在
table.render()的done回调中遍历tbody tr，统一绑定mouseenter和mouseleave - 每个
tr绑定时，用data-index属性存当前行索引，避免闭包取值错位 - 预览图容器（如
<div class="chart-preview"></div>）需提前插入tr内部末尾，或用position: absolute浮层定位，否则重绘易抖动
如何从表格行数据快速生成柱状图配置
Layui 表格每行是纯对象（data），但 ECharts 柱状图需要明确的 xAxis.data 和 series[0].data 数组。不能直接传整个对象，得先提取字段名和对应数值。
实操建议：
- 预先定义要展示的字段数组，例如
['sales', 'profit', 'cost']，避免遍历所有 key 引入非数字字段 - 用
map构建双数组：categories = fields.map(f => f)，values = fields.map(f => Number(row[f]) || 0) - 注意
Number()转换，防止字符串数字（如"123"）被当文本处理；空值统一转0避免图表报错NaN
const option = {
tooltip: { trigger: 'item' },
xAxis: { type: 'category', data: categories },
yAxis: { type: 'value' },
series: [{
type: 'bar',
data: values,
label: { show: true, position: 'top' }
}]
};
多个 hover 图表共存时如何避免实例冲突
如果每次 mouseenter 都调用 echarts.init()，旧实例没销毁就会内存泄漏，且多次 init 同一 DOM 会报错 Initialize failed: invalid dom。
实操建议：
- 为每行分配唯一 ID（如
chart-${index}），并在tr上存data-chart-id - hover 时先查是否存在已有实例：
if (echarts.getInstanceByDom(dom)) echarts.getInstanceByDom(dom).dispose() - 用全局 Map 缓存实例引用：
chartMap.set(id, myChart)，mouseleave时再dispose()并清除 - 务必在
mouseleave中清空容器 innerHTML 或设height: 0，否则浮层残留影响下一次渲染
移动端或密集表格下的性能与体验取舍
100 行表格每行都绑 hover + 初始化 ECharts，滚动卡顿明显，且小屏无法看清柱状图细节。
实操建议：
- 加节流：用
setTimeout+clearTimeout控制 hover 延迟 150ms 触发，快速划过不渲染 - 限制最大渲染列数：字段超过 5 个时改用横向滚动容器包裹图表，或只取前 4 个关键指标
- 移动端直接禁用 hover，改用点击展开弹层（
layer.open）并初始化完整图表 - 图表容器设固定宽高（如
width: 200px; height: 100px;），避免 layout 触发重排
最易忽略的是 dispose 不彻底——ECharts 实例销毁后，若容器 DOM 被反复复用，仍可能残留 resize 监听器。务必在 mouseleave 后手动移除所有绑定事件，并确认 echarts.getInstanceByDom(dom) === null。
