2022前端架构师
密码安全态势感知大屏
Vue3EChartsWebSocket大屏优化
Overview
态势感知大屏是网络安全产品的“门面”，需要在一个屏幕上实时展示海量的告警、流量、资产等安全数据。客户对大屏的视觉效果、实时性和定制化能力要求极高。
Challenges
- 01
性能瓶颈：WebSocket 每秒推送上百条告警数据，ECharts 频繁重绘导致页面卡顿、内存泄漏。
- 02
定制化成本高：不同客户对大屏的布局、图表类型要求不同，每次交付都需要前端修改代码。
- 03
大屏适配：需要在各种奇葩分辨率的拼接屏上完美显示，不能出现拉伸或留白。
Solutions
- 01
性能优化：引入 RequestAnimationFrame 控制渲染帧率，使用 Web Worker 处理数据聚合逻辑，对 ECharts 实例进行池化管理，彻底解决内存泄漏。
- 02
可视化编排：开发了一套大屏可视化编辑器，支持组件拖拽、缩放、数据源绑定，最终导出 JSON 配置，实现大屏的“零代码”交付。
- 03
自适应方案：放弃传统的 rem/vw 方案，采用基于 Transform Scale 的等比例缩放方案，保证在任何分辨率下都能完美还原设计稿。