可行但需严格处理角度计算与兼容性：必须用deg单位、from 0deg声明、端点严丝合缝；JS应更新CSS变量而非拼字符串；交互需SVG或clip-path实现；旧浏览器需SVG降级。
直接用 conic-gradient 做饼图是可行的，但必须手动算角度、严格对齐端点、显式写 from 0deg，否则第一块永远从右边冒出来，且 IE 和旧 Safari 会直接失效。
角度计算必须转成 deg，且段间端点要严丝合缝
浏览器不认百分比断点（比如 30%），只认 deg；每一块的起始角 = 前面所有块占比之和 × 360，结束角 = 起始角 + 当前块占比 × 360。若数据是 [30%, 40%, 30%]，对应写法是：
background: conic-gradient(from 0deg, #f00 0deg 108deg, #0f0 108deg 252deg, #00f 252deg 360deg);
常见错误包括：
- 用小数（如
0.3）或百分比（30%）代替108deg，浏览器忽略整段声明 - 端点没对齐，比如上一块写到
107.9deg，下一块从108.1deg开始，中间留出白缝 - 漏掉
from 0deg，导致第一块默认从正右（3 点钟方向）开始，不是视觉习惯的正上
动态更新不能拼字符串，得靠 CSS 自定义属性
每次重绘都用 JS 拼接一长串 conic-gradient() 并赋值给 element.style.background，既慢又容易因浮点误差导致断层。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 在 CSS 中预先写好模板：
background: conic-gradient(from var(--start, 0deg), #f00 0deg var(--end1), #0f0 var(--end1) var(--end2), ...); - JS 只负责更新
style.setProperty('--end1', Math.round(108) + 'deg')这类整数角度 - 避免
107.999999999deg这种残留，统一用Math.round(angle * 100) / 100截断
交互和标签必须额外定位，conic-gradient 本身没有 DOM 结构
conic-gradient 是纯背景，扇形区域无法绑定事件、hover 或点击。如果需要悬停高亮或显示数值标签：
- 不能靠
position: absolute+ 百分比 top/left 模拟扇形中心——坐标系随容器缩放/transform 会偏移 - 文字标签建议用 SVG
<text>叠加，或用 JS 动态计算真实扇形顶点坐标再定位 - 想让某块可点击？得用
clip-path: path(...)或 SVG<path>单独建元素，别指望背景能响应
兼容性差的地方别硬扛，该降级就降级
conic-gradient 在 Chrome 69+、Firefox 63+、Safari 12.1+ 才稳定，iOS 12.2 之前、所有 IE、多数安卓 WebView（如 UC）直接忽略。更麻烦的是：
-
@supports (background: conic-gradient())会误判某些旧 Safari —— 它能解析语法但渲染错位 - PostCSS 插件（如
postcss-conic-gradient）只是语法转换，无法 polyfill 底层缺失 - 真要兼容，得准备 SVG fallback，CSS 方案只能作为现代浏览器的增强层
最易被忽略的一点：角度基准是顺时针从正右开始，不是数学常规的正上，也不是 SVG 的 rotate() 默认方向——这个偏差一旦没校准，整个饼图就“歪了”。
