基于 Vue3 + ECharts + Express + SQLite 的智慧交通数据可视化系统——郑州交通数据可视化大屏

张人玉2026-07-19 8:11

郑州交通数据可视化大屏

基于 Vue3 + ECharts + Express + SQLite 的智慧交通数据可视化系统，支持用户权限登录、数据增删改查、导入导出与数据库连接配置。

功能概览

用户登录：账号密码 / 手机号密码 / 短信验证码（演示环境直接返回验证码）
角色权限：admin 管理员、editor 编辑员、viewer 访客
后台管理：用户添加与维护、数据表 CRUD、Excel/JSON 导入导出、SQLite 连接设置
可视化大屏（4 页）
1. 态势地图：郑州区划等值图 + 监测点散点/涟漪特效
2. 趋势结构：大数据量面积图、渐变堆叠面积图、缓动函数可视化、分时柱状图
3. 分区对比：矩阵微型折线图、堆叠柱归一化切换、阶梯瀑布图、流式视觉映射
4. 路网映射：地理等值区划+散点、二维视觉映射、大规模路网线图渲染

快速启动

1. 安装依赖

复制代码

cd backend && npm install
cd ../frontend && npm install

2. 启动后端（默认端口 3001）

复制代码

cd backend
npm run dev

首次启动会自动初始化 SQLite 数据库并写入演示数据：backend/data/traffic.db

3. 启动前端（默认端口 5173）

复制代码

cd frontend
npm run dev

浏览器打开：http://localhost:5173

演示账号

用户名	密码	手机号	角色
admin	admin123	13800000001	管理员（全部权限）
editor	editor123	13800000002	编辑员（数据读写/导入导出）
viewer	viewer123	13800000003	访客（查看/导出）

技术栈

前端：Vue 3、Vite、Pinia、Vue Router、Element Plus、ECharts、vue-echarts
后端：Node.js、Express、better-sqlite3、JWT、bcryptjs、xlsx
数据：SQLite 本地文件库，配置可在「数据库设置」页面修改

目录结构

复制代码

Vue5/
├── backend/                 # API 服务与 SQLite
│   ├── config/              # 数据库配置
│   ├── data/                # SQLite 文件
│   └── src/
│       ├── db/              # 连接与初始化
│       ├── middleware/      # JWT 鉴权与权限
│       └── routes/          # 登录/用户/数据/大屏/设置
└── frontend/                # Vue3 可视化前端
    └── src/
        ├── views/screen/    # 四页大屏
        ├── views/admin/     # 后台管理
        └── utils/           # 郑州 GeoJSON 等

权限说明

dashboard:view 查看大屏
user:* 用户管理（仅 admin）
data:* 数据增删改查 / 导入导出
db:config 数据库连接配置（仅 admin）