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

说明

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

相关推荐
java1234_小锋7 小时前
Vue3专题 - 条件渲染
前端·javascript·vue.js
鸽鸽7 小时前
Vue 3 API 完全指南:从 Options 到 Composition 的进阶之路
前端·vue.js
肉肉不吃 肉7 小时前
无渲染组件和组合式函数
前端·javascript·vue.js
其美杰布-富贵-李7 小时前
01 从项目结构开始认识 Vue 3
javascript·vue.js·ecmascript
snow@li8 小时前
Vue Axios封装与SpringBoot Payload封装全景关联分析(前后端数据交互底层闭环)
前端·vue.js·spring boot
用户83134859306988 小时前
Vue3+Cesium实现阴天乌云+下雨天气特效
vue.js·webgl·cesium
做好一个小前端8 小时前
ECharts 折线图大数据量性能优化参考
前端·性能优化·echarts
无人生还8 小时前
从 Vue3 到 React · 快速上手系列第 13 篇:工程化与综合实战(Vite + Todo 应用)
前端·vue.js·react.js
paopaokaka_luck9 小时前
基于springboot3+vue3的云南本土影视文旅推荐平台(协同过滤算法、Echarts图形化分析)
前端·spring boot·学习·算法·echarts·mybatis
zcmodeltech10 小时前
智慧城市沙盘模型多系统协同控制系统设计:基于STM32与Modbus RTU的园区-城市-数字孪生联动方案
服务器·数据库·人工智能·stm32·嵌入式硬件·信息可视化·智慧城市