打造实时电商数据大屏：Vue 3 + FastAPI + WebSocket

1.前言

在数据驱动决策的时代，实时数据大屏已成为企业监控业务状态的核心工具。本文构建一个高性能的电商实时数据大屏，涵盖前端可视化、后端数据推送和全端响应式适配等关键技术点。

2.项目概览

本项目是一个前后端分离的实时电商数据大屏，采用以下技术栈：

1）前端：Vue 3 + Vite + ECharts（按需引入）

2）后端：FastAPI + WebSocket + 异步数据模拟

3）数据流：后端定时生成数据 → WebSocket 推送实时数据 → 前端渲染大屏

核心功能模块

复制代码

电商大屏/

├── 实时订单量折线图 - 每秒刷新，展示订单趋势

├── 用户地域分布地图 - 中国省份热力图

├── 商品类别销售 Top5 - 横向柱状图

├── 库存预警仪表盘 - 仪表盘 + 预警列表

└── 实时交易滚动列表 - 滚动展示最新交易

3.后端架构：FastAPI + WebSocket

后端采用 FastAPI 构建，利用其原生的异步支持和高性能特性。

核心设计思路

python 复制代码

# backend/main.py

# 1. 模拟真实业务数据
def generate_order_count(now: datetime) -> int:
    """生成符合真实分布的订单量"""
    base = 60 * day_factor(now)  # 基础订单量受时段影响
    burst = 10 * math.sin(2 * math.pi * (now.minute / 60))  # 分钟级脉冲
    noise = random.gauss(0, 6)  # 高斯噪声模拟随机波动
    return max(6, int(base + burst + noise))

WebSocket 实时推送

python 复制代码

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket) -> None:
    """持续推送实时数据到前端"""
    await websocket.accept()
    clients.append(websocket)
    try:
        await websocket.send_json(snapshot_payload())
        while True:
            await websocket.receive_text()  # 保持连接
    except WebSocketDisconnect:
        clients.remove(websocket)

关键技术点

1）使用 clients列表管理所有 WebSocket 连接

2）定时任务 update_state_loop()`每秒更新数据并广播

3）支持断线重连，后端自动清理断开的客户端

数据模拟算法

为了让大屏展示更加真实，这里实现了：

1）时段因子：day_factor()模拟白天订单多、夜晚订单少的规律

2）品类权重：不同时段用户偏好不同（如早晨偏好食品生鲜，晚间偏好数码家电）

3）长尾分布：交易金额使用对数正态分布，符合真实消费规律

4.前端架构：Vue 3 + ECharts

前端采用 Vue 3 组合式 API，ECharts 按需引入以减小包体积。

javascript 复制代码

### 按需引入 ECharts

import * as echarts from "echarts/core";
import { BarChart, GaugeChart, LineChart, MapChart } from "echarts/charts";
import { GridComponent, TooltipComponent, VisualMapComponent, GeoComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

// 只注册需要的模块
echarts.use([
  LineChart, BarChart, MapChart, GaugeChart,
  GridComponent, TooltipComponent, VisualMapComponent, GeoComponent,
  CanvasRenderer,
]);

相比全局引入，按需引入可减少约 70% 的包体积。

中国地图渲染

javascript 复制代码

import chinaGeojson from "china-geojson";

// 注册地图数据
const chinaMap = chinaGeojson.China;
echarts.registerMap("china", chinaMap);

// 配置热力图效果
mapChart.setOption({
  visualMap: {
    inRange: { color: ["#d8e4ff", "#6ea8ff", "#1d4ed8"] },
  },
  geo: {
    map: "china",
    roam: false,
    itemStyle: { areaColor: "#1a2548", borderColor: "#2f3c6e" },
  },
});

WebSocket 状态管理

javascript 复制代码

const connectWebSocket = () => {
  socket = new WebSocket("ws://localhost:8000/ws");

  socket.onopen = () => {
    status.connection = "已连接";
  };

  socket.onmessage = (event) => {
    const payload = JSON.parse(event.data);
    applyPayload(payload);
  };

  socket.onclose = () => {
    status.connection = "已断开，重连中";
    setTimeout(connectWebSocket, 2000);  // 自动重连
  };
};

响应式布局

使用 CSS Grid 实现自适应布局：

css 复制代码

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  padding: 16px;
}

@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
  }
}

5.核心实现细节

数据快照机制

javascript 复制代码

// 冷启动获取
const fetchSnapshot = async () => {
  const response = await fetch("http://localhost:8000/snapshot");
  const data = await response.json();
  applyPayload(data);
};

首次加载时，前端通过 HTTP 获取完整快照，后续通过 WebSocket 增量更新：

交易列表滚动

javascript 复制代码

const startTradeScroll = () => {
  scrollTimer = window.setInterval(() => {
    container.scrollTop += 1;
    if (container.scrollTop >= container.scrollHeight - container.clientHeight) {
      container.scrollTop = 0;  // 循环滚动
    }
  }, 60);
};

使用 setInterval 实现平滑滚动效果

库存预警逻辑

javascript 复制代码

inventory_list = [
    {
        "name": name,
        "stock": data["stock"],
        "warning": data["warning"],
        "percent": round(data["stock"] / max(data["warning"], 1) * 100, 1),
        "alert": data["stock"] <= data["warning"],  # 预警标记
    }
    for name, data in inventory.items()
]

当库存低于预警值时，列表项显示红色警示。

6.运行项目

后端启动，以下是其中一种方法

bash 复制代码

cd backend
uv venv -p 3.10 .venv
source .venv/bin/activate
uv pip install -r requirements.txt
uvicorn main:app --reload --port 8000

前端启动

bash 复制代码

cd frontend
npm install --registry=https://registry.npmmirror.com
npm run dev

访问 `http://localhost:5173` 即可看到实时数据大屏。

7.技术亮点

特性	实现方案	收益
实时数据推送	WebSocket	秒级延迟，数据实时可见
按需加载 ECharts	模块化引入	包体积减少 70%
响应式布局	CSS Grid	适配桌面 / 移动端
自动重连	WebSocket 状态管理	网络波动时自动恢复
真实数据模拟	时段因子 + 权重算法	大屏展示更加可信

8.扩展方向

1）数据持久化：接入真实数据库，替换模拟数据

2）多端适配：添加手机端专用布局

3）告警通知：当指标异常时推送邮件/短信

4）数据导出：支持导出报表到 Excel/PDF

9.结语

通过本文的讲解，你已经掌握了一个完整的实时数据大屏从后端数据推送，到前端可视化渲染的全流程。感兴趣的读者可以在此思路上进行二次开发，打造属于你自己的数据大屏！

10.成果展示

电脑展示效果

手机展示效果

平板展示效果

创作不易，禁止抄袭，转载请附上原文链接及标题