纯HTML无法实现动态仪表盘，必须依赖JavaScript渲染；Canvas需显式设置宽高、正确获取上下文并清空画布；Chart.js需传数组且cutout为字符串；ECharts gauge的value是原始值非百分比；手写canvas需处理DPI适配与缓动。
纯 HTML 做不出动态仪表盘——它连“画弧线”都做不到，必须靠 JavaScript 渲染，新手最容易卡在“以为写个 就完事了”，结果 canvas 空白、Chart is not defined、数值不更新，全是因为漏掉了关键链路。
Canvas 画布不显示？先检查这三件事
canvas 是个“哑容器”，没 JS 驱动就是一张透明纸。常见现象：页面有 ，但什么也不画出来。
- 父容器没设宽高：
在 Flex/Grid 里会塌缩为 0×0，必须给父元素显式设width/height，或直接在 canvas 上写width="400" height="400" - 没获取到上下文：
const ctx = document.getElementById('gauge').getContext('2d')返回null，说明 ID 拼错、元素还没加载完（JS 放里就容易出这事） - 没清空画布就重绘：
ctx.fillRect()后直接再画指针，旧图形残留，看起来像糊成一团——每次requestAnimationFrame开头必须加ctx.clearRect(0, 0, canvas.width, canvas.height)
用 Chart.js 快速出环形进度图，但别传单个数字
doughnut 类型能模拟仪表盘读数，但新手常栽在数据格式上：传 { value: 85 } 或 85 会报错，Chart.js 要数组。
- 正确写法是
data: { datasets: [{ data: [85, 15] }]——两个值相加必须为 100，它按比例切片 - 压成环形靠
cutout: '70%'，不是cutout: 70（字符串才生效） - 颜色用
backgroundColor: ['#4CAF50', '#e0e0e0']，第一个色块就是“已用”部分，第二个是底色 - 引入 CDN 必须在
之前：<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
ECharts 的 gauge 才是真仪表盘，注意 value 不是百分比
如果你要显示 “温度 73.5℃”、“压力 2.4MPa” 这类带单位和量程的读数，gauge 系列更合适，但它和 Chart.js 的语义完全不同。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
data: [{ value: 73.5 }]—— 这个value是原始值，不是 0–100 的百分比 - 刻度范围由
min和max控制，比如min: 0, max: 100，那 73.5 就自动落在 73.5% 位置 - 指针动画默认开启，但若数值突变（比如从 20 直接跳到 90），视觉会生硬——可加
animationDuration: 1000缓动 - 别漏掉主题初始化：
echarts.init(document.getElementById('gauge'), 'dark')，否则深色背景上文字看不清
手写 canvas gauge 最可控，但缓动和 DPI 适配不能省
想完全掌控指针转动节奏、刻度粗细、文字抗锯齿？那就得自己算角度、调 requestAnimationFrame、适配高分屏。工业级仪表盘基本都走这条路。
- 角度换算别用度数：
Math.PI / 2是 90°，startAngle + (value / max) * (endAngle - startAngle)才是通用公式 - 高 DPI 屏必须处理：
const dpr = window.devicePixelRatio || 1，然后 canvas.width/height 放大 dpr 倍，ctx.scale(dpr, dpr)缩放绘制 - 指针别硬转：
currentValue += (targetValue - currentValue) * 0.08比currentValue = targetValue更自然 - 文字对齐要手动：
ctx.textAlign = 'center'; ctx.textBaseline = 'middle'之后再fillText，否则数字飘在圈外
真正难的不是“怎么画出来”，而是“怎么让数值变的时候不突兀、不糊、不卡、不偏移”。很多项目上线后才发现指针在旧版 Electron 里跳帧、在 iPad 上文字发虚——这些细节得在第一次渲染时就埋进去，补救成本远高于初始设计。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
