layui表格无法直接渲染echarts或chart.js的sparkline，因其默认html转义且不自动初始化图表，重绘时实例丢失；应使用原生canvas手绘，通过table.colmodel的templet返回canvas，在done回调中批量绘制并处理数据异常。
为什么 layui 表格里不能直接用 echarts 或 chart.js 渲染 sparkline？
layui 的 table.render() 默认对单元格内容做 html 转义（escape: true），你传入的 <canvas></canvas> 或 <div id="chart"> 会被当成纯文本显示；即使关掉转义，layui 也不会自动触发图表初始化，且表格重绘（如分页、排序）时 dom 被销毁，图表实例就丢了。<h3>用 <code>canvas 手绘最轻量 Sparkline（不依赖图表库）
Sparkline 的本质就是一条折线，用原生 canvas 绘制几十个点，性能好、无依赖、可内联。关键在于：把数值数组映射到固定宽高的画布坐标，并抗锯齿绘制。
实操建议：
- 在
table.colModel的templet函数里返回一个带id的<canvas width="120" height="30"></canvas>标签 - 用
layui.each()遍历数据行后，对每个 canvas 调用绘图函数，例如：drawSparkline(canvas, [12, 18, 15, 22, 19]) - 绘图函数内部需做归一化：找出 min/max，把每个值线性映射到 y ∈ [5, 25]（留出上下边距），x 均匀分布
- 用
ctx.lineWidth = 1.5和ctx.lineCap = 'round'让线条更柔和，避免像素感
function drawSparkline(canvas, data) {
const ctx = canvas.getContext('2d');
const w = canvas.width, h = canvas.height;
if (!data || data.length const min = Math.min(...data), max = Math.max(...data);
const range = max - min || 1;<p>ctx.clearRect(0, 0, w, h);
ctx.beginPath();
ctx.strokeStyle = '#5FB878';
ctx.lineWidth = 1.5;
ctx.lineCap = 'round';</p><p>data.forEach((val, i) => {
const x = (i / (data.length - 1)) <em> (w - 1);
const y = h - 5 - ((val - min) / range) </em> (h - 10);
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
});
ctx.stroke();
}</p>
如何让 Sparkline 随 Layui 表格重绘自动更新？
Layui 表格的 done 回调是唯一可靠时机——它在每次渲染完成（含初始加载、搜索、分页、排序）后触发，且能拿到当前页的 data 数组和 elem（表格容器）。
实操建议：
- 不要在
templet里直接调用绘图函数，因为此时 DOM 还没插入 - 在
done回调中，用elem.find('canvas.sparkline')批量查找，再遍历data索引与 canvas 顺序一一对应 - 为每个 canvas 添加
data-index属性，在done中按索引取对应数据项，避免 DOM 查找错位 - 若开启
height: 'full-xx'或响应式，需监听resize并重绘，但 Sparkline 一般固定尺寸，可忽略
数值异常时怎么避免绘图崩溃或显示乱码？
真实业务中，data 可能含 null、undefined、非数字字符串（如 "--"）、全相同值、单个值等边界情况。
实操建议：
- 在
drawSparkline开头过滤并转换：const nums = data.map(d => parseFloat(d)).filter(n => !isNaN(n)) - 若
nums.length ，改画单点圆点或横线，不要调用 <code>lineTo（否则报错） - 当所有值相等（
range === 0），y 坐标统一设为中间值，画一条水平短线，而非垂直线 - 避免在 templet 中拼接未校验的原始值，例如：
templet: d => '<canvas class="sparkline" data-raw="' + JSON.stringify(d.values) + '"></canvas>'—— 后续在done中解析data-raw更安全
Sparkline 不是通用图表，它的价值在于“一眼看趋势”，所以数值清洗比视觉动效更重要。别为了加动画而引入 requestAnimationFrame，Layui 表格本身没有帧同步机制，反而容易导致闪烁或不同步。
