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

说明

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

相关推荐
尾善爱看海7 小时前
Vue 面试收官篇:SSR、性能优化落地、30 道高频面试题精讲(附标准答案)
前端·javascript·vue.js·面试·vue
weixin_BYSJ19877 小时前
【计算机毕设】基于SpringBoot与Vue的文物保护档案管理系统08621
vue.js·spring boot·spring cloud·微服务·架构·django·课程设计
Bs_MoneyMagnet8 小时前
基于springboot+vue的个人健康管理系统的设计与实现 源码+文档
java·vue.js·spring boot·后端·vue3·springboot3·计算机毕业设计
Bs_MoneyMagnet11 小时前
基于springboot+vue的心理咨询预约与随访平台的设计与实现 源码+文档
vue.js·spring boot·后端·spring·毕业设计·旅游·计算机毕业设计
行者全栈架构师13 小时前
Spring Boot 接入 MaxKey 单点登录:6 个内部系统,一次登录全通行
java·vue.js·后端
万敏13 小时前
Vue3 全栈实战第九周:Node.js + Express 后端从零搭建实战记录
vue.js·node.js·全栈
雪芽蓝域zzs14 小时前
第四十七节:驾驶舱大屏 ECharts 图表集成
前端·javascript·vue.js
白雾茫茫丶15 小时前
Vibecoding 一个主题切换动画库:13 种揭幕方式
前端·vue.js·react.js
雪芽蓝域zzs15 小时前
第四十九节:TagsView 右键菜单(带三角箭头)给每个 tag 增加**鼠标右键菜单**(右键标签弹出:关闭、关闭其他、关闭全部)
前端·javascript·vue.js
志尊宝16 小时前
Vue3 零基础每日笔记(024):组件的创建与使用——从 import 到自动导入
前端·vue.js·笔记·前端框架·html5