纯HTML无法渲染动态饼图或环形图，必须依赖JavaScript图表库（如Chart.js、ECharts）或SVG/Canvas手动实现；Chart.js中doughnut类型的cutout参数需为字符串（如'70%'）才生效，传数字会失效或退化为饼图。
纯 HTML 无法渲染动态饼图或环形图——它只是骨架，真正画图必须靠 JavaScript 图表库（如 Chart.js、ECharts、Highcharts）或原生 svg/canvas 手动实现。所谓“HTML 仪表盘”，本质是 HTML 容器 + JS 渲染逻辑 + CSS 布局控制的组合体。
Chart.js doughnut 图的 cutout 配置为什么总不对？
cutout 是控制环形图“空心程度”的关键参数，但它只对 type: 'doughnut' 生效，且值类型必须是字符串（如 '70%'）或数字（如 50，单位为像素）。常见错误是传入数字但没加引号，导致整个图表不渲染或退化为饼图。
- 传
cutout: 70→ 按像素裁剪，可能在小尺寸容器里直接消失 - 传
cutout: '70%'→ 按外半径百分比裁剪，推荐用于响应式场景 - 传
cutout: '0%'或省略 → 退化为饼图（innerRadius为 0） - 若用
type: 'pie'，cutout完全无效，必须换 type
Highcharts 饼图 label 重叠的根本原因和解法
Highcharts 默认的 dataLabels 在扇区过小或角度太窄时会强行显示，造成文字堆叠、截断甚至溢出 SVG 边界。这不是样式问题，而是布局策略未适配数据分布。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 启用
allowOverlap: false（默认为true）强制避让，但可能让部分 label 直接隐藏 - 用
distance调整 label 到圆心的距离，负值向内、正值向外，避免挤在弧线上 - 配合
formatter过滤掉占比的 label：<code>if (this.percentage - 真要保留所有 label？改用
series.dataLabels.inside = false+connectorWidth: 1加连接线，视觉更清晰
ECharts 环形图 center 和 radius 怎么协同设置？
ECharts 的 radius 是数组形式，比如 [‘40%’, ‘70%’]，前者是内半径，后者是外半径；center 控制圆心位置，单位是百分比（相对于容器宽高），不是像素。
立即学习“前端免费学习笔记（深入）”；
-
radius: ['50%', '70%']→ 内圈占容器宽度 50%，外圈占 70%，差值即环宽 -
center: ['50%', '50%']是默认居中；写成['30%', '40%']就会偏左上 - 若容器宽高不等（比如 800×400 的横屏面板），
center: ['50%', '50%']仍居中，但环形会拉伸变形 —— 此时应固定容器aspect-ratio: 1或用size: '80%'限制最大直径 - 别把
radius写成[40, 70]（像素值），那在响应式容器里会严重错位
最容易被忽略的是：所有这些库的环形图都依赖「数据总和为 100%」的隐含假设。如果传入 [85, 15] 却期望显示「85% 已用」，得手动补零或用 data[0].y 显式指定值，否则 Highcharts 可能按比例重算，ECharts 可能直接报 Invalid data。真实业务中，这个“整体感”往往需要后端预聚合，前端不能盲目信任原始数组。
