用手写迷你折线图最轻量，需直接归一化数据至目标尺寸（如100×20px），用绘制，设stroke-linecap="round"和stroke-linejoin="round"保清晰，动态更新仅改points属性，ie11需改用兼容。
用 <svg></svg> 手写迷你折线图最轻量
不需要任何库，<svg></svg> 原生就能画出真正「迷你」（比如 100×20px）的折线图。关键不是缩放整个图表，而是直接按目标尺寸归一化数据点坐标。
常见错误是拿 <canvas></canvas> 或大图表库硬塞进小容器——渲染模糊、字体糊成一片、响应式失真。
- 先确定宽高，例如
width="100" height="20" - 把原始数据数组（如
[12, 18, 15, 22, 19]）映射到y范围：用Math.min()和Math.max()算出极值，再线性缩放到0–20（注意 SVG y 轴向下） -
x坐标等距分布：step = 100 / (data.length - 1)，首尾对齐左右边界 - 用
<polyline></polyline>连点，stroke="#333" stroke-width="1" fill="none"保证清晰不发虚
stroke-linecap="round" 让迷你线更柔和
默认的方形端点在 1px 线宽下容易锯齿或视觉断开，尤其在斜率变化大的地方。
加一个属性就能改善观感：
<polyline points="0,15 25,8 50,12 75,4 100,6" stroke="#5b6770" stroke-width="1" fill="none" stroke-linecap="round" stroke-linejoin="round"></polyline>
注意：stroke-linejoin="round" 同时处理拐角，否则折线转折处会凸出尖角；两者缺一不可。
别用 stroke-linecap="square" —— 在迷你图里等于主动加噪点。
动态更新时避免重绘 DOM，只改 points 属性
如果数据会变（比如监控指标每秒刷新），不要删掉再新建 <polyline></polyline> 元素。DOM 操作成本高，且可能触发重排。
- 给
<polyline></polyline>加个id或 class，用document.getElementById(...).setAttribute('points', newPointsStr) -
newPointsStr格式必须是空格分隔的"x1,y1 x2,y2 ..."，不能带换行或多余空格 - 确保每次计算都重跑归一化逻辑（极值可能随新数据变化），否则旧范围会导致图形压扁或溢出
浏览器对 points 属性变更做了优化，比替换整个元素快 3–5 倍，尤其在低端设备上明显。
IE11 不支持 stroke-linecap="round" 在 <polyline></polyline> 上生效
这是个冷但真实的问题：IE11 下该属性被忽略，所有端点强制为 butt，导致迷你图首尾发虚、斜线末端“少一像素”。
解决办法只有两个：
- 改用
<path></path>+d属性，手动拼接M x1 y1 L x2 y2 L ...，它在 IE11 中 round 端点可用 - 或者放弃圆角，接受
butt效果（多数场景下影响不大）
别试图用 filter: blur(0.2px) 模拟——迷你图里反而更糊，且 IE11 不支持 SVG filter。
真正难的不是画出来，是让每个像素都落在该在的位置，尤其是当高度只剩 12px 的时候。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
