width: var(--percent)%一定不生效，因css解析禁止单位拼接；正确写法是width: calc(var(--percent, 0) * 1%)，其中--percent存纯数字，calc()注入单位并提供回退值。
width: var(--percent)% 为什么总不生效
直接写 width: var(--percent)% 一定无效，不是浏览器兼容问题，而是 CSS 解析规则本身禁止单位拼接。变量值是字符串，var(--percent) 若为 "75"，拼出来就是 "75%"；若存的是 "75%"，结果就是 "75%%" ——非法值，整条声明被丢弃。
正确做法是把数字和单位拆开，用 calc() 组合：
-
--percent只存纯数字（比如68，不是"68%"） - 写成
width: calc(var(--percent, 0) * 1%)，其中1%提供单位，乘法自动带 % -
var(--percent, 0)的 fallback 防止未定义时宽度塌缩为 0
JS 更新 CSS 变量时，该设在哪一级元素上
变量必须设在目标条形图元素自身上，不能只往 :root 写。
- ✅ 正确：
barEl.style.setProperty('--percent', 73) - ❌ 错误：
document.documentElement.style.setProperty('--percent', 73)（除非所有条形图都读 :root，且选择器匹配到它们） - 多个条形图共用同一套样式？别靠 class 统一控制，每个
div.bar单独设变量更可靠 - 避免在循环里反复调用
getComputedStyle(barEl).width，会强制同步重排
父容器宽度假如不稳定，条形图就错位
百分比宽度永远相对于父容器计算，而父容器宽度若由 max-width: 100% + padding 构成，又没设 box-sizing: border-box，实际可用宽度就变小了，calc(var(--percent) * 1%) 算出来的仍是错误基准下的值。
- 务必给父容器加
box-sizing: border-box - 避免用
display: table-cell或inline-block包裹条形图容器——它们的宽度计算逻辑更复杂 - 移动端小屏下加
min-width: 0，防止 flex 或 grid 子项被压缩到看不见条 - 负数或 0 值要单独处理：加
.bar.zero { width: 0 !important; }类，因为calc(-5 * 1%)是负宽度，可能溢出
Charts.css 这类框架真能省事吗
它确实能快速搭出语义化、响应式条形图，但“省事”有前提：你接受它的 HTML 结构约束（比如必须用 <table> + <code>data-value 属性），且不打算深度定制布局逻辑。
- 水平/垂直切换靠加
horizontal或vertical类，不用改 CSS - 颜色主题通过 SCSS 变量统一管理，改
$chart-colors就行 - 响应式断点定义在
_variables.scss里，可按需调整$breakpoint-md等 - 但它不解决“数据从哪来”这个核心问题——变量还是得你用 JS 注入，或服务端渲染进 HTML
calc()，而是谁来保证每个 div.bar 上的 --percent 值准确、及时、且非空。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
