大屏适配应统一使用vh/vw单位而非%或px，echarts需手动监听resize并节流，禁用optimizelegibility提升字体清晰度，websocket更新应局部合并数据并处理断连补数。
大屏适配用 vh 和 vw，别用 % 或固定 px
浏览器窗口一变，大屏就错位、文字挤成一团——根本原因是用了 % 做高度或写了死的 px 值。真正稳定的做法是：容器高度统一用 100vh，宽度用 100vw，所有子元素尺寸基于 vw/vh 计算。
比如 1920×1080 屏幕下，想让一个标题占屏幕宽的 15%，直接写 width: 15vw；字体大小设为屏幕宽的 0.8%，就是 font-size: 0.8vw。这样缩放时所有元素等比变化，不会失真。
注意点：
-
vh在移动端 Safari 中可能把地址栏高度也算进去，导致“抖动”，上线前务必真机测试 - 不要混用
rem+vw，容易叠加缩放，优先选纯视口单位 - 如果后端返回的是固定像素图表（如 ECharts 导出图），需在容器上加
transform: scale(1.2)并配合transform-origin: top left对齐
ECharts 初始化必须用 resize() 监听窗口变化
初始化时图表能画出来，但窗口一拉伸，图表就变形、坐标轴错位、文字糊成一片——这是没监听尺寸变化。ECharts 不会自动响应 resize 事件，必须手动绑定。
实操写法：
const chart = echarts.init(document.getElementById('main'));
chart.setOption({ /* 配置项 */ });
<p>window.addEventListener('resize', () => {
chart.resize(); // 必须调用，且无参数
});</p>
常见坑：
- 在 Vue 中用
ref拿到 DOM 后立刻 init，但 DOM 可能还没渲染完成，建议加nextTick包一层 - 多个图表共存时，每个都要单独绑定
resize，不能只绑一个 - 用
setTimeout延迟 resize 是掩耳盗铃，resize事件本身是高频触发的，要用throttle节流（例如 Lodash 的throttle(chart.resize, 200)）
字体模糊？关掉 text-rendering: optimizeLegibility
Chrome 下大屏文字发虚、边缘锯齿明显，尤其小字号数字和英文，大概率是 CSS 里写了 text-rendering: optimizeLegibility 或用了 font-smooth: auto。这两个属性在高分辨率大屏上反而干扰系统字体渲染。
正确做法：
- 全局重置：给
body加text-rendering: geometricPrecision - 禁用抗锯齿干扰：
-webkit-font-smoothing: subpixel-antialiased（仅 WebKit 内核生效） - 中文字体优先指定
"PingFang SC", "Microsoft YaHei"，避免 fallback 到模糊的泛型字体
验证方法：打开 Chrome DevTools → Elements → 左上角三个点 → More Tools → Rendering → 勾选 “Paint flashing”，拖动窗口看文字区域是否频繁重绘。如果闪得太勤，说明字体渲染策略有问题。
WebSocket 推送数据时，setOption 别直接全量替换
实时大屏每秒收 5–10 条数据，每次收到都调 chart.setOption(option, true)（第二个参数 true 表示不合并），会导致图表闪烁、CPU 占用飙升、甚至卡死。真实场景下，90% 的更新只是改几个数值，不是重绘整个配置。
应该这么做：
- 用
chart.setOption({ series: [{ data: newData }] }, { replaceMerge: ['series'] })，明确只合并 series 数据 - 对折线图/柱状图，优先用
chart.addData()方法追加单点，比全量 setOption 快 3 倍以上 - 如果数据结构复杂（如多维指标联动），先用
JSON.stringify(newData) === JSON.stringify(oldData)做浅比较，避免无意义刷新
还有个硬伤：WebSocket 断连重连后，前端没做数据补偿，图表就停在旧数据上。得在 onclose 里记录最后时间戳，重连成功后主动请求补数，不能只等推送。
大屏最麻烦的从来不是“怎么画出来”，而是“怎么在各种分辨率、各种网络波动、各种浏览器渲染策略下稳住”。很多问题要靠真机反复切窗口、断网、切缩放比例才能暴露，光跑通 demo 没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
