数据可视化前端工程师 · 深圳 · 5 年经验
luoqingyuan@example.com · 139 0000 0000 · github.com/luoqingyuan
个人优势
- 5 年数据可视化经验，做过运营看板、城市车辆调度地图和工业三维监控，能区分「数据处理慢」和「绘制慢」两类问题
- 熟悉 ECharts、Canvas、WebGL、Three.js 和 deck.gl，按点位数量、交互方式和设备性能选技术，不为三维而三维
- 大数据量渲染有实战：轨迹按可视区裁剪和像素误差抽稀，数万点只需绘制几百个点
- 熟悉 GPU 拾取、实例化渲染和图层优先级管理，点选延迟保持在 100ms 以内
- 三维性能会从资源入手：和建模同事约定面数、材质和纹理预算，glTF 压缩并按楼层拆包，可交互时间从 12 秒降到 4 秒
- 时序数据做过分层采样：缩小保留每桶最值，放大再取原始数据，几十万点也能快速定位突变
- 有 7×24 小时大屏的稳定性经验：内存泄漏排查、WebGL 上下文丢失恢复、断网状态的明确展示
- 重视数字口径和可读性，和数据工程师对齐指标定义，告警同时用颜色、形状和文字表达
- 做过线上问题的录制回放工具，用同一段数据流复现乱序和坐标异常
- 长期参与现场验收，能处理高 DPI 工控屏、集成显卡和老旧浏览器上的兼容问题
- 技术栈：Canvas 2D、WebGL、Three.js、deck.gl、Mapbox GL、ECharts、React、TypeScript、Web Worker
工作经历
某智慧交通公司 · 可视化前端工程师
负责城市交通调度系统的地图与指挥大屏。产品接入车辆、路口与事件流，日常在指挥中心连续运行，前端组 5 人。
- 海量点位：旧方案用 DOM 标记车辆，超过 3000 辆时缩放明显掉帧。把静态道路和实时车辆分层，车辆交给 WebGL 实例化绘制，轨迹按视口范围裁剪；一万点位的缩放交互稳定在 45 帧以上
- 实时更新：消息每秒最多几千条，逐条更新图层导致主线程长期满载。服务端改二进制增量包，Worker 中解码并按 200ms 合帧，主线程只提交最新位置；高峰时网络流量下降约 60%，地图操作不再明显迟滞
- 告警设计：和调度员走访后发现红色告警覆盖底图，看不清附近道路。重新定义严重等级、聚合阈值和选中态，增加键盘定位与文字说明；试点中心查找异常车辆的平均用时缩短约四成
- 稳定运行：定位大屏运行一天后内存增长的问题，发现移除图层时纹理和监听器未释放；建立图层生命周期约定与 72 小时压力测试，上线后大屏不再需要每日人工重启
某工业软件公司 · 前端工程师
参与工厂设备监控产品，设备数据由边缘网关每 5 秒上报一次，客户会在车间触控屏和办公室电脑查看。
- 开发设备状态总览和趋势图，按设备类型建立可复用的量纲、阈值和时间轴组件，避免不同页面把摄氏度与华氏度混用
- 对跨度一年的传感器曲线做分层采样：缩小时保留每桶最值，放大后请求原始数据；数十万点数据仍能快速查看突变点
- 参与现场验收，修复高 DPI 工控屏上点击区域太小和断网后状态被错误显示为“正常”的问题，补上最后更新时间与离线状态
项目经历
城市车辆调度地图
React / TypeScript / Mapbox GL / deck.gl / Web Worker
调度员要同时看实时车辆、历史轨迹、拥堵热区和报警事件，地图会在一块 4K 大屏和普通办公电脑上使用。
- 给图层定义统一输入协议与优先级：底图、热力、轨迹、车辆、告警各自管理数据源；切换业务场景只启用所需图层，降低 GPU 内存占用
- 轨迹数据先按时间窗口和可视区域裁剪，再按像素误差做抽稀；一条数万点的轨迹通常只需绘制几百个点，视觉上仍保留拐弯细节
- 鼠标拾取使用离屏颜色编码而非遍历所有点位，点选延迟保持在 100ms 以内；对低性能终端自动减少装饰图层
- 建立基于录制数据的回放工具，线上问题可用同一段车辆流复现。半年内用于定位 7 次乱序或坐标异常，减少依赖现场视频猜测
工厂设备三维监控
Three.js / TypeScript / glTF / ECharts
客户希望把设备告警定位到厂房楼层和机台，但三维场景必须能在普通办公电脑运行，不能依赖独立显卡。
- 与建模同事约定模型面数、材质数量和纹理尺寸预算；加载前压缩 glTF 并按楼层拆包，首屏只加载当前厂房
- 设备状态通过实例化标记展示，点击机台才加载详细曲线；在集成显卡电脑上首次可交互时间由约 12 秒降到 4 秒
- 为色觉障碍用户提供形状与文字双重告警提示，二维列表与三维视图共用同一份选中状态；项目通过客户现场验收
运营指标看板引擎
ECharts / TypeScript / Web Worker / JSON 配置
运营每周要新增十几个指标图表，原来每个都要前端排期开发。
- 把图表抽象为「数据源 + 指标 + 维度 + 图表类型」的 JSON 配置，运营在界面上配置，渲染端生成 ECharts option
- 同比、环比、占比等派生计算在 Worker 里完成，主线程只渲染；一个看板 20 个图表时切换筛选不再卡顿
- 指标定义统一维护口径说明，图表悬停可查看计算方式，「两个看板数字对不上」类的问题明显减少
- 上线后常规看板需求不再进前端排期，团队每月节省约 40 人时