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 沙箱 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 消失瞬间内容还没画出来，还是闪一下。
