基于Vue 3 + ECharts / ECharts-GL / echarts-wordcloud 的数据可视化大屏——地形与产业数据可视化大屏

地形与产业数据可视化大屏

基于 Vue 3 + ECharts / ECharts-GL / echarts-wordcloud 的数据可视化大屏，支持三种数据源切换：

数据源	说明
数据表格	本地 JSON 文件 `server/data/tables.json`
SQLite	本地数据库 `server/data/dashboard.db`
MySQL	可配置连接，启动时自动建库建表并灌入示例数据

图表

河南省地图 ：ECharts map（src/geo/henan.js）
折线图：月度访问趋势
堆叠柱状图：农业 / 工业 / 服务业 / 文旅
玫瑰饼图：区域资源分布（南丁格尔图）
词云图：热点关键词

快速启动

bash 复制代码

npm install
npm run dev

首次启动会自动生成：

server/data/tables.json（数据表格）
server/data/dashboard.db（SQLite）

连接 MySQL（可选）

复制环境变量并填写密码：

复制代码

copy .env.example .env

确保本机 MySQL 已启动，然后 npm run dev。服务会：

创建数据库 viz_dashboard（可用环境变量修改）
创建图表相关表并写入与 JSON / SQLite 一致的示例数据

若启动时 MySQL 未就绪，可在大屏右上角点击「重连 MySQL」，或：

复制代码

curl -X POST http://localhost:3001/api/sources/mysql/reconnect

也可手动执行 SQL：data/mysql_init.sql（地形网格建议仍由服务自动写入）。

前端数据管理

大屏右上角点击 数据管理：

数据编辑：切换数据源与数据集，在线查看 / 增删改 / 保存
连接字段：配置 MySQL 的 host/port/user/password/database，以及各表字段映射

API

GET /api/sources --- 数据源状态与字段映射
GET /api/data?source=table|sqlite|mysql&chart=all --- 拉取全部图表数据
GET /api/data/:chart?source=... --- 单图表（terrain|line|stacked|rose|wordcloud|kpi）
PUT /api/data/:chart?source=... --- 保存某数据集到指定数据源
PUT /api/config/mysql --- 保存 MySQL 连接并尝试连接
PUT /api/config/field-maps --- 保存表名 / 字段映射
POST /api/sources/mysql/reconnect --- 按已保存配置重连

项目结构

├── data/mysql_init.sql # MySQL 手动初始化脚本

├── server/

│ ├── index.js # Express API

│ ├── data/seedData.js # 统一示例数据源

│ └── db/ # table / sqlite / mysql 适配

└── src/

├── App.vue # 大屏布局

└── components/charts/ # 各类 ECharts 组件

结果展示：

zhangsansh/Vue-3-ECharts-ECharts-GL-echarts-wordcloud: # 地形与产业数据可视化大屏：基于Vue 3 + ECharts / ECharts-GL / echarts-wordcloud的数据可视化大屏，支持三种数据源切换：https://github.com/zhangsansh/Vue-3-ECharts-ECharts-GL-echarts-wordcloud