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