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

郑州交通数据可视化大屏基于Vue3 ECharts Express SQLite的智慧交通数据可视化系统支持用户权限登录、数据增删改查、导入导出与数据库连接配置。功能概览用户登录账号密码 / 手机号密码 / 短信验证码演示环境直接返回验证码角色权限admin管理员、editor编辑员、viewer访客后台管理用户添加与维护、数据表 CRUD、Excel/JSON 导入导出、SQLite 连接设置可视化大屏4 页态势地图郑州区划等值图 监测点散点/涟漪特效趋势结构大数据量面积图、渐变堆叠面积图、缓动函数可视化、分时柱状图分区对比矩阵微型折线图、堆叠柱归一化切换、阶梯瀑布图、流式视觉映射路网映射地理等值区划散点、二维视觉映射、大规模路网线图渲染快速启动1. 安装依赖cd backend npm install cd ../frontend npm install2. 启动后端默认端口 3001cd backend npm run dev首次启动会自动初始化 SQLite 数据库并写入演示数据backend/data/traffic.db3. 启动前端默认端口 5173cd frontend npm run dev浏览器打开http://localhost:5173演示账号用户名密码手机号角色adminadmin12313800000001管理员全部权限editoreditor12313800000002编辑员数据读写/导入导出viewerviewer12313800000003访客查看/导出技术栈前端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:*用户管理仅 admindata:*数据增删改查 / 导入导出db:config数据库连接配置仅 admin