SVG绘制饼图核心是用数学计算扇形起止角、半径，再转为A指令；需正确设置large-arc-flag和sweep-flag，路径须闭合（含Z），并注意SVG坐标系与角度方向关系。
SVG 的 A（椭圆弧）指令。不需要第三方库，纯 JavaScript 就能动态生成。
理解饼图扇形的几何逻辑
一个扇形由圆心、半径、起始角度（startAngle）和终止角度（endAngle）唯一确定。关键点有两个：起点（P1）和终点（P2），它们都在圆周上；中间用一条圆弧连接。SVG 中不能直接画“扇形”，但可用 A 指令画弧，再配合直线闭合路径实现填充效果。
计算公式（以圆心 (cx, cy)、半径 r 为例）：
-
起点坐标：
x1 = cx + r * cos(startAngle)，y1 = cy + r * sin(startAngle) -
终点坐标：
x2 = cx + r * cos(endAngle)，y2 = cy + r * sin(endAngle) -
大弧标志（
large-arc-flag）：当endAngle − startAngle ≥ π（即 ≥180°）时为1，否则为0 -
顺时针标志（
sweep-flag）：饼图通常按逆时针数据顺序，但 SVG 弧默认顺时针绘制，所以一般设为1（表示顺时针画弧）——注意：若你从 0° 开始向正角度增长（如 0→90°），实际在 SVG 坐标系中是**顺时针运动**，所以 sweep=1 正确
构造完整 path 字符串（含扇形闭合）
一个可填充的扇形 path 必须闭合：从圆心出发 → 到起点 → 画弧到终点 → 回圆心。更高效做法是：从起点出发 → 画弧到终点 → 直线回圆心 → 直线回起点（形成三角扇面）。但标准做法是：
- M cx,cy — 移动到圆心
- L x1,y1 — 画线到起点
- A r,r 0 large-flag sweep-flag x2,y2 — 画弧到终点
- Z — 闭合路径（自动连回圆心）
⚠️ 注意：这种写法（圆心→起点→弧→Z）能正确填充，且避免重叠渲染问题。不要省略 Z，否则无法闭合填充。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
JavaScript 动态生成示例（支持多数据、内环、标签偏移）
以下代码生成带内外环的环形图（doughnut）的一个扇区，可扩展为完整饼图：
M ${x1} ${y1} A ${rOuter} ${rOuter} 0 ${largeArc} 1 ${x2} ${y2} L ${x3} ${y3} A ${rInner} ${rInner} 0 ${largeArc} 0 ${x4} ${y4} Z说明：
- 外弧用
sweep=1（顺时针），内弧用sweep=0（逆时针），确保路径不自交 - 环形图需两个同心弧+两条径向线，构成封闭区域
- 角度单位统一转为弧度；起始角建议从
-90°（顶部）开始，符合视觉习惯
实用技巧与避坑提醒
常见问题不是算错，而是坐标系和方向理解偏差：
- SVG y 轴向下，
sin(θ)对应的是y增量，无需额外取负（除非你把 0° 定在底部） - 累计角度时，务必用
Math.PI * 2归一化，避免浮点误差导致最后一块缺缝 - 小角度扇形（
- 如需高亮某一块，单独给其
class或style，比操作
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
