纯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 DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 启用 allowOverlap: false（默认为 true）强制避让，但可能让部分 label 直接隐藏
• 用 distance 调整 label 到圆心的距离，负值向内、正值向外，避免挤在弧线上
• 配合 formatter 过滤掉占比 的 label：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。真实业务中，这个“整体感”往往需要后端预聚合，前端不能盲目信任原始数组。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！