大屏可视化项目 - 难点亮点汇总
一、大屏适配方案
| 方案 | 原理 | 优点 | 缺点 |
|---|---|---|---|
| Scale 缩放 | 根据屏幕大小等比缩放整个容器 | 实现简单，一劳永逸 | 留白、字体模糊、事件热区偏移 |
| vw/vh 方案 | 将 px 按比例转为 vw/vh | 动态计算，不会留白 | 每个元素需单独适配，较繁琐 |
简历写法：
封装大屏适配组件，支持 2K/4K/8K 等多分辨率场景，在团队多个项目中复用，提升研发效率。
二、ECharts 封装与优化
| 难点 | 解决方案 |
|---|---|
| 每个图表重复写完整 option，冗余 | 统一封装图表组件，业务数据与样式配置分离 |
| 窗口缩放图表变形 | 监听 resize 事件，统一调用 chart.resize() |
| 全量引入 ECharts 体积大 | 按需引入，打包体积减少约 1/3 |
简历写法：
统一封装 ECharts 图表组件，实现配置与数据分离；按需引入减少打包体积 30%+；统一解决窗口缩放适配问题。
三、内存泄漏排查与解决
| 问题现象 | 原因分析 | 解决方案 |
|---|---|---|
| 页面运行几天后崩溃 | 定时器内重复 echarts.init()，实例未销毁 | 复用实例 + getInstanceByDom + setOption |
| 内存持续增长 | 事件监听未解绑、定时器未清理 | 组件销毁时调用 dispose()、解绑事件、清理定时器 |
clear() vs dispose()
- clear()：清空配置，保留实例，适合重绘
- dispose()：彻底销毁实例，释放内存
简历写法：
排查并解决 ECharts 图表内存泄漏问题，通过复用实例 + 正确销毁机制，保障大屏 7×24 小时稳定运行。
面试话术（STAR）：
- S：客户现场大屏运行几天后崩溃
- T：排查内存泄漏原因
- A：Chrome DevTools 监控内存 → 发现定时器重复 init → 改用
getInstanceByDom复用实例 +dispose销毁 - R：部署后运行一周，内存稳定
四、十万级数据渲染优化
| 优化方向 | 具体方案 |
|---|---|
| 分段渲染 | 使用 dataZoom 限制初始渲染范围（start/end/maxSpan） |
| 降采样 | 配置 sampling: 'lttb'，保留趋势与极值，减少绑定点数 |
| 前后端协同 | 接口 gzip 压缩、服务端数据聚合、精简字段 |
| Web Worker | 数据处理放 Worker，避免阻塞主线程 |
简历写法：
负责十万级数据可视化性能优化，结合 Web Worker + ECharts Sampling（LTTB 算法）+ DataZoom 分段渲染，渲染性能提升 5 倍+，实现毫秒级区间切换。
面试追问应对
| 问题 | 回答 |
|---|---|
| 为什么不用虚拟列表？ | ECharts 是 Canvas 绑制，优化重点是降采样，不是 DOM 节点 |
| LTTB 算法优势？ | 保留趋势和极值，视觉上最接近原始数据 |
| 百万级怎么办？ | 前后端协同 + WebGL 渲染（如 echarts-gl） |
五、WebSocket 实时数据联动
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 渲染大量节点卡顿 | 运行时内存占用过高 | 虚拟列表、分批渲染、Canvas 替代 DOM |
| 数据推送快于渲染 | 推送频率 > 渲染速度 | 合并数据、节流渲染、等最后一次数据再渲染 |
| 长 JS 任务阻塞主线程 | 单线程 JS 执行 | Web Worker / requestIdleCallback |
实时通信方案对比
| 方案 | 特点 |
|---|---|
| 短轮询 | 定时请求，简单但浪费资源 |
| 长轮询 | hold 住连接，等待返回 |
| SSE | 服务端单向推送 |
| WebSocket | 双向通信，实时性最好 |
| MQTT | 基于 WebSocket，内置心跳重连 |
简历写法：
基于 WebSocket 实现设备数据实时联动，结合节流渲染与数据合并策略，解决高频推送导致的渲染延迟问题。
📝 简历项目经历模板
智慧停车可视化大屏 | 核心开发 | 2024.3 - 至今
基于高德地图 SDK + ECharts 构建智慧停车数据大屏
技术栈：Vue 3、Vite、Element Plus、ECharts、高德地图 SDK、WebSocket、TypeScript、Pinia、UnoCSS
项目职责：
大屏多分辨率适配方案：封装大屏适配组件，采用 Scale 整体缩放 + vw/vh 混合方案，解决 1080P 至 4K/8K 场景下的布局兼容问题，组件在团队多项目中复用，显著提升研发效率
ECharts 图表组件封装与优化：统一封装 ECharts 图表组件，实现业务数据与样式配置分离；采用按需引入策略，打包体积减少 30%+；监听 resize 事件统一处理窗口缩放场景，解决图表变形问题
大屏内存泄漏排查与治理：在客户现场 7×24 小时运行环境下，排查定时器重复
echarts.init()导致的内存泄漏问题。通过getInstanceByDom复用实例 +dispose正确销毁机制，保障大屏长时间稳定运行十万级数据渲染性能优化：针对半年内停车数据一次性渲染场景，采用 ECharts
dataZoom分段渲染 +sampling: 'lttb'降采样策略，结合 Web Worker 异步数据处理，渲染性能提升 5 倍+，实现毫秒级区间切换WebSocket 实时数据推送与渲染优化：基于 WebSocket 实现多路段车位状态实时推送，设计消息聚合与差量更新机制，仅传输变化数据；针对高频推送导致的渲染延迟问题，采用节流策略 + 数据合并方案，解决渲染性能追不上推送速度的问题
地图与业务数据联动：基于高德地图 SDK 实现停车场点位标注与信息展示，支持地图缩放/拖拽时点位的动态聚合与分散，点击停车场触发弹窗展示实时车位信息、占用率、收入数据等
3D 车位可视化组件：使用 CSS 3D + Canvas 实现车位立体展示，支持车位状态（空闲/占用/预约）实时更新，提供车牌号、入场时间、停车时长等信息查看