用CSS框架统一图表样式需通过类名约定与自定义属性实现：为容器设统一类（如chart-container）并用修饰符（--primary、--dark）定义主题变量；借助工具类控制尺寸留白；JS中读取CSS变量动态配色，避免硬编码。
如何用 CSS 框架统一图表样式
多数 CSS 框架（如 Bootstrap、Tailwind、Bulma）本身不提供图表组件，所谓“统一图表样式”，实际是靠类名约定 + 自定义 CSS 覆盖来实现视觉一致性。关键不是框架自带什么，而是你如何用它的工具链约束 、 或第三方图表库（如 Chart.js、ECharts）的容器和装饰层。
给图表容器加统一类名并绑定主题色变量
不要直接在每个 Chart.js 可通过 避免为每个图表写单独的 width/height 规则。改用框架已有的 spacing 和 sizing 工具类： 立即学习“前端免费学习笔记（深入）”； 注意：Chart.js 的 别在 Chart.js 的 这样换主题时只需改 CSS 变量值，无需动 JS；也方便后续接入 CSS-in-JS 或 design token 管理工具。容易被忽略的是：部分图表库（如 ApexCharts）会把颜色转成 canvas 像素，CSS 变量无法穿透，此时需在初始化前做一次变量解析，而不是指望运行时重绘。chart-container），再通过修饰符切换主题：
chart-container：定义 padding、border-radius、box-shadow、font-family 等基础盒模型和文字样式chart-container--primary：设置 --chart-color-primary: #0d6efd 等 CSS 自定义属性chart-container--dark：覆盖背景色、文字色，并同步更新 --chart-grid-color、--chart-label-color
options.plugins.legend.labels.color 读取 getComputedStyle 获取的 --chart-label-color 值，实现动态配色。用 utility class 快速调整尺寸与留白
h-64 w-full（Tailwind）或 h-64 w-100（Bootstrap 5 utility classes）aspect-ratio: 2 / 1（现代浏览器）或伪元素 hack 实现 16:9 容器，让 自适应p-4 / px-3 py-2 替代手动写 padding: 1rem
responsive: true 默认依赖父容器宽度，若父容器无明确宽高（比如 flex 子项未设 flex: 1），图表可能塌陷 —— 这是高频报错点。颜色系统必须脱离具体图表库硬编码
datasets[0].backgroundColor 里写死 ['#007bff', '#28a745']。应提前定义 CSS 变量，再 JS 中读取：const root = getComputedStyle(document.documentElement);
const primary = root.getPropertyValue('--color-primary').trim();
const success = root.getPropertyValue('--color-success').trim();
new Chart(ctx, {
data: {
datasets: [{
backgroundColor: [primary, success],
// ...
}]
}
});
