.chart-box { height: 320px; }
.chart-box .skeleton { height: 100%; }
进报表页先看到 240 高的骨架,图表画出来变成 320,下面内容整体下移 80px,连切三次都在跳。先别急着动参数,把报错原文和时间点记下来,顺序反了容易白折腾。
原因不复杂,骨架和图表容器用了不同高度,图表初始化后按默认比例撑开。容器没定高,resize 时又改了一遍。
「图表加载尺寸跳变」改完先别急着全量,挑一台机器放半天,真有问题这段时间就能看出来。改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。
验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。
报错里带路径的,先去看那个路径在不在、权限对不对。
处理上按这个顺序:骨架和图表容器共用同一个高度变量;图表容器显式写死高度 不让内容撑开;网络限速到 3G 观察整个加载过程。
改完只确认一件事:限速加载时骨架与图表高度一致,页面内容不再上下跳。
