基于 Vue 3 + ECharts + Express + SQLite 的世界数据可视化大屏系统——世界态势数据可视化大屏

世界态势数据可视化大屏

基于 Vue 3 + ECharts + Express + SQLite 的世界数据可视化大屏系统，面向全球宏观态势展示、地区下钻分析与后台数据运维。

一、项目简介

本系统以「世界情况」为主题，将国家/地区宏观指标（人口、GDP、碳排放、人类发展指数 HDI、预期寿命等）存入 SQLite，通过 Vue3 前端大屏进行多页可视化展示，并提供完整的用户权限、数据 CRUD、导入导出与数据库连接配置能力。

适用于：课程设计 / 毕业设计 / 数据可视化演示 / 大屏原型展示。

二、技术栈

层级	技术
前端	Vue 3、Vite、Vue Router、Pinia、Element Plus、ECharts、vue-echarts、Axios
后端	Node.js、Express
数据库	SQLite（better-sqlite3）
认证	JWT + bcrypt 密码哈希
文件	multer 上传、xlsx 导入导出

三、功能总览

3.1 登录与权限

支持 账号密码登录 与 手机号 + 密码登录
三角色权限隔离：
- admin（管理员）：用户管理、数据库设置、数据读写删、导入导出、全部大屏
- editor（编辑者）：数据读写删、导入导出、查看大屏；不可管理用户/库配置
- viewer（访客）：仅可查看大屏与只读数据

3.2 可视化大屏（四页 + 地区下钻）

页面	路由	内容
第一页 · 世界地图	`/screen/world`	世界等值区划图、散点、KPI、大洲对比、HDI/GDP 排行、饼图；点击国家进入地区大屏
第二页 · 经济趋势	`/screen/economy`	大数据量面积图、渐变堆叠面积、归一化堆叠柱、瀑布图、全球趋势；可筛选国家并切换为该国数据
第三页 · 高级图表	`/screen/advanced`	缓动函数、矩阵微型图、堆叠变化动画；可筛选国家并切换同洲对比视角
第四页 · 地理流式	`/screen/geo-stream`	地理等值区划+散点、流式视觉映射、纽约街道高密度线图；可筛选/点选国家定位高亮
地区详情大屏	`/screen/region/:code`	单国 KPI、历年趋势、同洲对比、HDI、雷达图

国家选择（第二/三/四页统一能力）

按大洲筛选 + 国家搜索下拉
选中后图表自动切换为该国（或同洲对比）数据
一键「进入该国大屏」跳转地区详情页
第四页支持地图点击选中国家；美国选中时纽约街道图高亮增强

3.3 系统管理

功能	路由	说明
数据管理	`/admin/data`	对 `world_regions` / `region_metrics` / `chart_series` 增删改查、分页、搜索
导入导出	`/admin/import-export`	支持 JSON / CSV / Excel 导入导出
用户管理	`/admin/users`	添加/编辑/删除用户，设置角色与手机号（仅管理员）
数据库设置	`/admin/db`	查看/切换 SQLite 文件路径并重新连接（仅管理员）

四、快速启动

4.1 环境要求

Node.js 18+（推荐 20.x）
npm 8+

4.2 安装与运行

复制代码

# 在项目根目录 Vue6/ 下执行

# 一次性安装根目录、前端、后端依赖
npm run install:all

# 同时启动后端 API (3001) + 前端开发服务器 (5173)
npm run dev

也可分开启动：

复制代码

npm run server    # 后端 http://localhost:3001
npm run client    # 前端 http://localhost:5173

浏览器访问：http://localhost:5173

首次启动会自动创建 data/world_viz.db 并写入演示账号与约 50 个国家/地区的种子数据。

4.3 仅重新灌入种子数据

复制代码

npm run seed

五、演示账号

用户名	密码	手机号	角色
admin	admin123	13800000001	管理员
editor	editor123	13800000002	编辑者
viewer	viewer123	13800000003	访客

手机号登录示例：手机号 13800000001，密码 admin123。

六、目录结构

复制代码

Vue6/
├── client/                      # Vue3 前端
│   ├── public/maps/world.json   # 本地世界地图 GeoJSON（避免 CDN 失效）
│   └── src/
│       ├── api/                 # Axios 封装
│       ├── components/          # 图表面板、国家筛选条等
│       ├── composables/         # 国家聚焦逻辑
│       ├── layouts/             # 主布局（侧栏 + 顶栏）
│       ├── router/              # 路由与权限守卫
│       ├── stores/              # Pinia（登录态）
│       ├── styles/              # 全局深色大屏样式
│       ├── utils/               # 图表工具、地图加载
│       └── views/
│           ├── LoginView.vue
│           ├── admin/           # 用户/数据/导入导出/库设置
│           └── screen/          # 四页大屏 + 地区详情
├── server/                      # Express API
│   ├── index.js                 # 入口
│   ├── db.js                    # SQLite 连接与建表
│   ├── auth.js                  # JWT 与权限中间件
│   ├── seed.js                  # 演示数据灌入
│   └── routes/
│       ├── auth.js              # 登录、用户 CRUD
│       └── data.js              # 业务数据、导入导出、库设置
├── data/                        # SQLite 数据库文件目录
├── package.json                 # 根脚本（dev / install:all / seed）
└── README.md

七、数据说明

7.1 主要数据表

表名	用途
`users`	用户账号、手机号、角色、密码哈希
`permissions`	角色-资源权限（辅助说明）
`world_regions`	国家/地区主数据（人口、GDP、HDI 等）
`region_metrics`	分年指标（gdp / population / carbon / hdi / trade）
`chart_series`	图表专用序列（面积图、堆叠、瀑布、矩阵、视觉映射等）
`db_settings`	当前数据库路径配置

7.2 种子数据规模（默认）

约 50 个国家/地区，覆盖亚/欧/北美/南美/非/大洋洲
2015--2024 年多指标时间序列
多类 ECharts 演示序列（大数据量面积、堆叠、瀑布、矩阵等）

八、API 概要

基址：http://localhost:3001/api（开发环境下前端通过 Vite 代理 /api）

方法	路径	说明
POST	`/auth/login`	账号或手机号登录
GET	`/auth/me`	当前用户信息
GET/POST/PUT/DELETE	`/auth/users`	用户管理（管理员）
GET	`/dashboard/overview`	全球总览
GET	`/dashboard/region/:code`	单国详情
GET/POST/PUT/DELETE	`/regions` 等	地区与指标 CRUD
GET	`/export/:table`	导出 json/csv/xlsx
POST	`/import/:table`	上传导入
GET/POST	`/db-settings`	数据库路径（管理员）

除登录外，业务接口需在 Header 携带：Authorization: Bearer <token>。

九、使用指引

使用演示账号登录系统
左侧进入「第一页 · 世界地图」，点击国家进入地区大屏
在第二/三/四页顶部使用「国家/地区筛选」切换聚焦国家，观察图表变化
管理员可在「用户管理」添加账号，在「数据管理」维护表格，在「导入导出」批量处理数据
如需更换 SQLite 文件，在「数据库设置」填写绝对/相对路径并保存连接

十、常见问题

Q: 世界地图不显示？ A: 请确认 client/public/maps/world.json 存在。系统优先加载本地地图，不再依赖失效的旧 CDN 路径。

Q: 管理表格文字看不清？ A: 已适配深色主题表格样式；若仍异常，请强制刷新（Ctrl+F5）清除旧缓存。

Q: 端口被占用？ A: 后端默认 3001，前端 5173。可先结束占用进程，或设置环境变量 PORT 再启动后端。

Q: 访客看不到用户管理/数据库设置？ A: 属正常权限控制，请使用 admin 账号。

十一、生产构建（可选）

复制代码

npm run build
# 产物在 client/dist，可由 server 静态托管（已配置）
# 仅启动后端即可同时提供 API 与前端页面：
npm run server

然后访问 http://localhost:3001

https://github.com/zhangsansh/Vue3-ECharts-Express-SQLite1.githttps://github.com/zhangsansh/Vue3-ECharts-Express-SQLite1.git