conic-gradient画饼图基于角度累加实现扇形拼接，需手动计算各扇区起止角度并严格衔接，从0deg到360deg连续定义颜色停靠点，配合border-radius:50%形成圆形，但存在safari兼容性限制及缺乏交互能力。
conic-gradient 画饼图的基本原理
浏览器原生支持的 conic-gradient 是目前最轻量、无需 JS 就能渲染扇形的 CSS 方式。它从元素中心出发，按角度顺时针渐变，正好契合饼图每个数据项对应一个角度区间的需求。
关键点在于：每个扇区用一个颜色 + 角度范围定义，相邻扇区首尾角度必须严格衔接，否则会出现空白或重叠。比如 30% 的数据对应 0deg 108deg（30% × 360°），下一项就得从 108deg 开始。
如何用多个色块拼出完整饼图
单个 conic-gradient 可以写多个颜色停靠点，但要注意语法限制——CSS 不支持动态计算角度，所有角度都得手动算好或由构建工具/预处理器代入。
典型写法是把所有扇区写进一个函数里，用角度累加方式拼接：
background: conic-gradient( #ff6b6b 0deg 108deg, /* 30% */ #4ecdc4 108deg 216deg, /* 30% */ #45b7d1 216deg 288deg, /* 20% */ #96ceb4 288deg 360deg /* 20% */ );
- 角度必须从
0deg开始，到360deg结束，不能省略中间衔接点 - 颜色之间不能有间隙，否则会默认补上过渡色（浏览器行为不一致，有的显示透明，有的拉伸前一色）
- 如果某一项为 0%，直接跳过该段即可，但要确保前后角度连续
让饼图真正“可维护”的两个现实约束
纯 CSS 饼图好看，但实际项目中很快会遇到两个硬伤：
-
conic-gradient在 Safari 15.4+ 才稳定支持，旧版 iOS/Safari 会回退成linear-gradient或全白（需用@supports检测并降级） - 无法响应式地根据数据自动更新角度——你得在 JS 里算好各段角度，再注入 CSS 变量或内联 style，或者用 CSS-in-JS 库生成
- 没有图例、悬停提示、动画展开等交互能力，这些仍得靠 JS 补足
所以常见做法是：用 conic-gradient 渲染静态视觉主体，用 <svg></svg> 或 canvas 做交互层，或干脆只在仪表盘类轻量场景中单独使用。
绕不开的兼容性补丁和 fallback 方案
如果你必须支持 Safari 14 或更早版本，conic-gradient 会直接失效。此时有两个务实选择：
- 用
radial-gradient+clip-path模拟（复杂、精度差、性能低） - 降级为纯色圆角矩形堆叠 + transform 旋转（仅适合 2–3 个大扇区）
- 最稳的是用
@supports (background: conic-gradient(red, blue))包一层，fallback 里给个单色背景 + 文字说明
别指望用 PostCSS 插件自动转译 conic-gradient——它没法被线性渐变准确模拟，强行转换只会失真。
角度算错、Safari 版本漏判、0% 数据导致角度断点、以及没设 border-radius: 50% 让容器变圆——这四点是上线前最常被忽略的细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
