基于 Vue3 + ECharts + Express + SQLite 的智慧交通数据可视化系统——郑州交通数据可视化大屏
郑州交通数据可视化大屏
基于Vue3 + ECharts + Express + SQLite的智慧交通数据可视化系统，支持用户权限登录、数据增删改查、导入导出与数据库连接配置。
功能概览
用户登录：账号密码 / 手机号密码 / 短信验证码（演示环境直接返回验证码）
角色权限：
admin管理员、editor编辑员、viewer访客后台管理：用户添加与维护、数据表 CRUD、Excel/JSON 导入导出、SQLite 连接设置
可视化大屏（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）