数据可视化大屏开发实战

项目背景

某智慧城市指挥中心需要一块综合数据大屏，实时汇聚交通、安防、能耗等多源数据，辅助决策。大屏分辨率 4K（3840×1080），要求图表炫酷、数据实时、适配稳定，且 7×24 小时不间断运行。我们用 Vue3 + ECharts 承载可视化，WebSocket 推送实时数据，落地一套可复用的大屏工程方案。

大屏的第一要务是信息密度与可读性的平衡，炫酷不能盖过数据本身。

技术选型

大屏场景对图表表现力与稳定性要求极高，选型如下：

• 核心框架：Vue3 + TypeScript，组件化拆分每个图表面板
• 图表库：ECharts 5，覆盖柱状、折线、地图、关系图等 20+ 类型
• 实时通信：WebSocket，秒级推送业务指标
• 适配方案：rem + scale 缩放，保证任意分辨率满屏不变形
• 地图组件：ECharts geo + 高德 GeoJSON，省市区三级下钻
• 动效辅助：CSS3 动画 + 数字滚动插件，强化数据呼吸感

架构设计

大屏按业务域拆分为多个独立图表面板，统一通过数据总线分发实时数据。适配是大屏的根基，核心是 scale 等比缩放方案：

// 大屏自适应：等比缩放铺满屏幕
function fitScreen() {
  const designWidth = 3840
  const designHeight = 1080
  const scale = Math.min(
    window.innerWidth / designWidth,
    window.innerHeight / designHeight
  )
  const screen = document.getElementById('screen')
  screen.style.transform = `scale(${scale})`
  screen.style.transformOrigin = 'center center'
}
window.addEventListener('resize', fitScreen)

该方案保证设计稿比例不变，任何分辨率都能完整展示，黑边通过背景装饰填充。

难点解决

实时数据推送

大屏数据要求秒级更新，传统轮询延迟高、压力大。我们用 WebSocket 建立长连接，服务端主动推送，前端按频道订阅：

// WebSocket 实时数据订阅
const ws = new WebSocket('wss://screen.example.com/realtime')

ws.onmessage = (event) => {
  const { channel, data } = JSON.parse(event.data)
  // 按频道分发到对应图表面板
  eventBus.emit(channel, data)
}

// 图表组件订阅自己关注的频道
eventBus.on('traffic:flow', (data) => {
  chart.setOption({ series: [{ data }] })
})

大屏适配与稳定运行

长时间运行出现内存增长与图表卡顿。通过定时 setOption 合并而非全量替换、销毁离开视口图表、关闭无意义动画，内存稳定在 300MB 以内。

地图下钻

省→市→区三级下钻需要动态加载 GeoJSON，我们做懒加载与缓存，点击省份时按需请求对应市级地图数据，避免首屏加载全部地图。

项目成果

大屏上线后稳定运行，20+ 图表面板秒级刷新，7×24 小时不崩溃，成为指挥中心日常决策的核心工具。整套适配与数据分发方案沉淀为团队大屏脚手架，后续大屏项目交付周期缩短一半。

• 图表面板：20+，秒级刷新
• 运行稳定性：7×24 小时不崩溃
• 内存占用：稳定 300MB 以内
• 后续交付周期：缩短 50%