Vue 3 + ECharts 智慧城市大屏——赣州智慧城市数据可视化平台

赣州智慧城市数据可视化平台

Vue 3 + ECharts 智慧城市大屏，后端使用 Express + SQLite 存储赣州城市数据，前端可对数据表进行增删改查。

功能

• 智慧城市大屏：展示赣州市基本信息、区县 GDP、产业结构、交通、环境、人口、旅游等指标

• SQLite 数据存储：7 张业务表，首次启动自动写入演示数据

• 数据管理页：选择数据表后支持查询、新增、编辑、删除、批量删除、重置初始数据

技术栈

层级	技术
前端	Vue 3、Vite、ECharts、Element Plus、Vue Router
后端	Express、better-sqlite3
数据库	SQLite（server/data/ganzhou.db）

快速开始

1. 安装依赖

cd server
npm install
​
cd ../client
npm install

2. 启动后端（端口 3001）

cd server
npm run dev

3. 启动前端（端口 5173）

新开一个终端：

cd client
npm run dev

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

• 大屏首页：/

• 数据管理：/manage

数据表说明

表名	说明
city_info	城市基本信息
districts	区县信息
economy	历年经济指标
traffic	交通基础设施
environment	空气质量等环境数据
tourism	旅游景点
population_trend	人口与城镇化趋势

数据源

源	说明
sqlite	SQLite 文件 server/data/ganzhou.db
sheet	数据表格 JSON：server/data/sheets/*.json，可独立维护

大屏顶部与数据管理页均可切换数据源；修改后大屏图表与地图会读取对应源的数据。

导入导出

在「数据管理」页：

• 导出：Excel (.xlsx) 或 CSV

• 导入 ：上传 .xlsx / .xls / .csv（表头可用中文列名或英文字段名），会覆盖当前源中该表全部数据

• 从 SQLite 同步：将数据库内容写回数据表格文件

API 概览

• GET /api/dashboard?source=sqlite|sheet --- 大屏聚合数据

• GET /api/tables?source=... --- 表列表

• GET /api/data/:table?source=... --- 分页查询

• POST/PUT/DELETE /api/data/:table... --- 增删改

• GET /api/export/:table?source=...&format=xlsx|csv --- 导出

• POST /api/import/:table?source=... --- 导入（multipart file）

• POST /api/sheet/sync-from-sqlite --- SQLite → 数据表格

• POST /api/db/reset --- 重置初始数据

说明

演示数据为公开统计口径的近似/整理值，用于可视化展示，非正式官方报表。