HTML仪表盘骨架屏核心是结构对齐与无缝替换：须用CSS固定尺寸+绝对定位或Flex/Grid占位，禁用JS动态计算；Canvas类需绘轮廓线而非色块；禁混用v-loading与骨架屏；优先CSS动画替代loading.gif；结束时机须与图表渲染完成强同步。

HTML仪表盘做骨架屏，核心不是“加个动效”，而是让骨架结构与真实数据区域严格对齐、尺寸一致，并在数据加载完成时无缝替换。否则用户看到的是错位、缩放、跳动的“假 loading”。

骨架屏必须用 CSS 定位 + 尺寸锁定，不能靠 JS 动态计算

很多项目用 document.querySelector 读取真实 DOM 宽高再渲染 skeleton，这会导致两次重排：一次是 skeleton 渲染，一次是真实内容替换后重绘。尤其在大屏仪表盘（如 3840×2160）上，卡顿明显。

• 所有骨架元素（如 .gauge-skeleton、.chart-skeleton）必须使用固定宽高 + position: absolute 或 Flex/Grid 占位，和真实组件共用同一容器
• 避免用 % 或 vw/vh 做骨架宽高——它们依赖视口，而仪表盘常嵌在 iframe 或缩放容器中，值会漂移
• 推荐写法：width: 400px; height: 240px;（与 ECharts 实例容器一致），配合 box-sizing: border-box

Canvas 类仪表盘（如 gauge、speedometer）骨架要画“轮廓线”，不是填色块

Canvas 绘制的仪表盘没有 DOM 结构，无法用 ElSkeleton 或 vue-skeleton-loader 直接套用。强行用 div 覆盖会导致指针动画错位或点击穿透。

• 在 Canvas 初始化前，先用 ctx.strokeStyle 和 ctx.lineWidth 绘制一个浅灰（#e0e0e0）的空心圆弧+刻度线，不填充、不画指针
• 不要用 fillRect 盖满整个 canvas 区域——那会遮住后续绘制，且无法体现仪表盘的环形语义
• 加载完成调用 ctx.clearRect(0, 0, canvas.width, canvas.height) 后立即重绘真实内容，避免残留

v-loading 和骨架屏不能混用在同一容器

Vue 项目里常见错误：给仪表盘外层 div 同时加 v-loading="loading" 和内部手动插入 skeleton。结果是骨架被 loading 遮罩盖住，或者遮罩消失后 skeleton 还挂着。

DeepBI DHTML 页面生成器

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

下载

• 二选一：要么全用 v-loading（适合简单表单类仪表控件），要么全用骨架屏（适合图表密集型大屏）
• 若必须过渡，把 v-loading 放在更外层布局容器（如页签页 .tab-pane），骨架屏放在具体图表容器内，层级分离
• 注意 element-loading-text 默认居中，会挡住骨架结构——设为空字符串或用自定义 slot 替换

loading.gif 在大屏上容易糊，优先用 CSS 动画骨架

知识库里提到的 loading.gif 和 loading-1.gif 是 100×100 像素位图，在 4K 大屏下拉伸后边缘发虚，且无法响应分辨率变化。

• 改用纯 CSS 实现流动光效：background: linear-gradient(90deg, transparent, #f0f0f0, transparent); background-size: 200% 100%; animation: shine 1.5s infinite;
• 关键帧里只动 background-position，不触发重排，比 GIF 更轻量
• 如果必须用图片，提供 2x/3x 版本并用 image-set() 或 media query 切换，但不如 CSS 方案省事

最容易被忽略的一点：骨架屏的「结束时机」必须和数据绑定逻辑强同步。比如 ECharts 的 setOption 调用完成 ≠ 图表渲染完成，要监听 chart.on('finished') 或用 setTimeout 留出 16ms 渲染余量，否则 skeleton 消失瞬间内容还没画出来，还是闪一下。

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