layui表格toolbar中添加迷你图表需在table.render的done回调中初始化echarts实例，设置40px高度、隐藏坐标轴、关闭动画，并在reload时调用setoption和resize；须用css重置父容器内边距与行高。
表格头部工具栏里加迷你图表，layui 原生不支持
layui 的 table.render() 生成的表格，其 toolbar 区域只接受字符串模板或 dom 节点，不自动执行 js、不渲染 canvas/svg。直接在 toolbar 字符串里写 <canvas></canvas> 标签，图表库（如 echarts、chart.js）根本拿不到渲染时机——dom 还没挂载，document.getelementbyid 就会返回 null。
关键不是“能不能放”，而是“什么时候放、怎么触发渲染”。必须等表格 DOM 渲染完成、且 toolbar 节点真实插入文档后，再手动初始化图表。
- 用
toolbar配置传入一个带唯一 ID 的空容器，比如<div id="mini-chart-1"></div> - 在
done回调里查这个 ID，确认节点存在后再初始化图表 - 避免在
render前就调用图表初始化（常见错误：把echarts.init写在table.render()外部）
用 ECharts 实现 40px 高度迷你柱状图
迷你图表核心是尺寸压缩 + 简化交互。ECharts 支持极小容器，但默认 padding 和动画会撑高，需显式压制：
const chart = echarts.init(document.getElementById('mini-chart-1'), null, {
renderer: 'canvas',
width: 120,
height: 40
});
chart.setOption({
grid: { top: 2, right: 2, bottom: 2, left: 2 },
xAxis: { show: false },
yAxis: { show: false },
series: [{
type: 'bar',
data: [12, 8, 15, 6],
barWidth: 6,
itemStyle: { color: '#5FB878' }
}],
animation: false
});
-
grid四边距设为2，防止坐标轴留白挤占空间 - 必须关掉
xAxis/yAxis显示，否则默认刻度线+标签直接溢出 -
barWidth: 6控制柱子粗细，配合数据长度动态调整更稳妥（例如Math.max(4, 120 / data.length - 2)） -
animation: false避免首次渲染闪动，尤其在表格重载时
表格重载时图表不更新？检查 done 回调的触发时机
调用 table.reload() 后，done 回调会再次执行，但很多人只在首次 render 里初始化图表，导致 reload 后图表静止不动或报错 Cannot read property 'resize' of null。
- 把图表实例存到全局变量或 table 实例的自定义属性上，比如
tableIns.chart = chart - 在
done回调开头判断：if (tableIns.chart) { tableIns.chart.setOption(newOption); tableIns.chart.resize(); } - 务必调用
resize()，因为表格列宽变化可能影响 toolbar 容器宽度，不 resize 会导致柱子挤压变形 - 如果数据来自接口，确保
done的res参数里能拿到最新统计值（别硬编码在 JS 里）
移动端适配和性能隐患
迷你图表在小屏上容易糊成一片，且每个表格行都塞一个图表会显著拖慢渲染速度——Layui 表格默认开启虚拟滚动（limit 较大时），但 toolbar 是每页都渲染的，100 行 = 100 个 echarts.init 调用。
- 优先考虑用纯 CSS 实现简单趋势：比如
<span class="trend-up">▲</span>+ 颜色变化，零 JS 开销 - 真要图表，限制只在第一页渲染，后续页用文字摘要代替（例如 “↑12%（近7天）”）
- 移动端用
window.devicePixelRatio > 1判断高清屏，给echarts.init加devicePixelRatio: window.devicePixelRatio防模糊 - 别在
cell级别放图表——表格单元格内嵌图表是性能黑洞，头部 toolbar 是唯一合理位置
最常被忽略的是：toolbar 容器的父元素（.layui-table-tool）默认有 padding 和 line-height，会把迷你图表往下顶出界，必须用 CSS 强制重置：.layui-table-tool .layui-table-tool-temp { padding: 0; line-height: 1; }。
