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 --- 重置初始数据

说明

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

相关推荐
ly768911 小时前
Vue 3 从入门到工程实践:基础语法、组件化、路由、状态管理与项目部署
前端·javascript·vue.js
梅孔立13 小时前
Pi-Agent 终极极简配置文档(Java+Vue+Python爬虫 4-5千文件项目)
java·vue.js·python
码视野15 小时前
基于 Vue3 + Element Plus 的【智慧社区洗车养车与上门流动洗车预约调度系统】设计与实现(含PRD/三端源码/大屏)
前端·javascript·vue.js·人工智能·vue3
码视野15 小时前
基于 Vue3 + Element Plus 的【无人值守共享自习室与空间智能预约系统】设计与实现(含PRD/三端源码/大屏)
前端·javascript·vue.js·人工智能·vue3
Su米苏16 小时前
针对使用@vue-office 出现的包异常找不到问题
前端·javascript·vue.js
用户831348593069816 小时前
Cesium实现动态流动火烧云晚霞效果(可用slider调整火烧云浓度)
vue.js·webgl·cesium
码视野16 小时前
基于 Vue3 + Element Plus 的【青少年心理健康智能测评与 AI 情绪树洞陪护干预系统】设计与实现(含PRD/三端源码/大屏)
前端·vue.js·人工智能·vue3
张人玉16 小时前
茶树 NeRF(Neural Radiance Fields,神经辐射场)三维重建与数据分析可视化系统——基于神经辐射场的茶树三维重建方法实现可视化大屏
python·数据挖掘·数据分析·echarts·three.js
daols8817 小时前
vue 表格vxe-table 实现紧凑型表格的方式
前端·javascript·vue.js
Java搬码工17 小时前
VUE3使用教程
前端·javascript·vue.js