用 dataset 动态绑定目标与完成值、Math.min(100, Math.round()) 安全计算进度、rem+grid+viewport 保障响应式，可实现轻量免后端业绩看板。
直接用 HTML + CSS + JavaScript 就能做出轻量、可嵌入、免后端的业绩目标看板页面，关键不是“炫技”，而是让目标值、完成值、进度条、红绿状态一眼可辨——多数人卡在数据绑定不灵活、进度条计算出错、响应式在小屏崩掉这三处。
怎么用 dataset 动态绑定目标与实际完成值
硬编码数字会让每次改目标都得改 HTML，维护成本高；用 data-target 和 data-achieved 把数值存在 DOM 上，JS 读取后算进度，既清晰又易批量更新。
实操建议：
- 每个业绩卡片用
<div class="kpi-card" data-target="100000" data-achieved="72500">标记原始数据 - JS 里统一用
el.dataset.target和el.dataset.achieved读取，转成Number()再运算，避免字符串拼接错误 - 如果后端返回 JSON，优先用
JSON.parse()解析后注入 dataset，别直接 innerHTML 拼接数字（XSS 风险）
为什么 Math.min(100, Math.round(...)) 是进度条安全写法
当实际完成值超过目标（比如超额 120%），CSS 的 width: 120% 会撑破容器，视觉错乱；更糟的是，浮点误差可能导致 99.999% 渲染为 100% 但逻辑上未达标。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 进度百分比必须用
Math.round((achieved / target) * 100)计算，再套一层Math.min(100, ...)截断上限 - CSS 进度条用
max-width: 100%+overflow: hidden双保险 - 状态色别只靠百分比阈值判断：比如
< 80%红、80–99%黄、100%绿，别用「是否等于」而用「是否 >=」
移动端看板在 iPad 上文字挤成一团？检查这三处
很多看板在 PC 浏览器看着正常，一到 iPad 或 Chrome DevTools 的 responsive 模式就文字重叠、进度条错位——根本原因常是 viewport 设置、字体单位、flex 布局断点没对齐。
实操建议：
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须有，且不能漏掉initial-scale=1 - 所有字体大小用
rem（基于html { font-size: 16px }），别混用px和em - 卡片布局用
display: grid替代浮动或 inline-block，配合@media (max-width: 768px)改为grid-template-columns: 1fr单列堆叠
真正难的不是画一个好看的进度条，而是当销售临时调高 Q3 目标、区域经理导出 Excel 修改了 27 个 data-achieved 值、或者财务系统凌晨同步数据导致页面闪动时，看板还能稳定渲染、不报 NaN、不溢出、不丢失状态——这些细节藏在 dataset 处理逻辑和 CSS 容错边界里，而不是花哨动画中。
