南阳市数据可视化大屏
基于 Vue2 + ECharts + Express + SQLite 的南阳市专题数据可视化系统。
功能概览
-
四个专题大屏：交通 / 人口 / 经济 / 农业
-
百度地图地形底图 + 区县指标空间分布（热力圈层）
-
SQLite 持久化；支持 Excel / CSV / JSON 导入导出，以及整库
.db下载 -
前端数据表增删改查
-
登录方式：邮箱密码、手机验证码（演示模式验证码在接口/控制台返回）
-
角色权限：
角色 查看 编辑 导入 导出 用户管理 admin 管理员 ✓ ✓ ✓ ✓ ✓ editor 编辑员 ✓ ✓ ✓ ✓ ✗ viewer 访客 ✓ ✗ ✗ ✓ ✗
快速启动
bash
# 根目录
npm install
cd server && npm install
cd ../client && npm install
# 分别启动（两个终端）
cd server && npm run dev
cd client && npm run serve或在根目录安装 concurrently 后：
bash
npm install
npm run install:all
npm run dev演示账号
| 角色 | 邮箱 | 密码 | 手机号 |
|---|---|---|---|
| 管理员 | admin@nanyang.gov.cn | Admin@123 | 13800000001 |
| 编辑员 | editor@nanyang.gov.cn | Editor@123 | 13800000002 |
| 访客 | viewer@nanyang.gov.cn | Viewer@123 | 13800000003 |
手机登录：先点「获取验证码」，页面会显示演示验证码，再登录。
百度地图密钥
在 client 目录创建 .env.local：
VUE_APP_BAIDU_MAP_AK=你的百度地图密钥密钥可在百度地图开放平台申请。修改后需重启 npm run serve。
未配置或密钥无效时，不会加载百度脚本，大屏自动使用 ECharts 示意图，避免页面报错。
数据管理
登录后右上角「操作」菜单可进入各专题数据管理页：
-
增删改查（需 edit 权限）
-
导入
.xlsx / .csv / .json（需 import 权限） -
导出 Excel / CSV / SQLite-JSON，或下载整库（需 export 权限）
目录结构
Vue2/
client/ # Vue2 前端
server/ # Express + SQLite API
server/data/ # nanyang.db（首次启动自动生成）结果展示：
https://github.com/zhangsansh/-Vue2-ECharts-Express-SQLite-