150-基于Python的中国海洋水质数据可视化分析系统

码界筑梦坊2026-05-28 8:12

中国海洋水质数据可视化分析系统 --- 技术文档

1 系统概述

本系统基于 Django + Vue 技术栈构建，面向中国海洋水质监测数据，提供数据管理、统计分析、机器学习建模、异常检测、聚类分析、时间序列预测、同比环比对比、地理可视化、知识爬取与报告导出等一体化分析能力。

1.1 技术架构

层次 技术 版本
前端框架 Vue 3 + TypeScript 3.x
UI 组件库 Element Plus ---
图表库 ECharts 5.x
地图 高德地图 AMAP ---
HTTP 客户端 Axios ---
后端框架 Django 4.x
数据库 MySQL 5.7+
数据处理 Pandas / NumPy ---
机器学习 Scikit-learn ---
统计检验 SciPy ---
报告导出 ReportLab / OpenPyXL ---
爬虫 Requests + BeautifulSoup ---

1.2 系统架构图

复制代码 
┌─────────────────────────────────────────────────┐
│                   浏览器                         │
│  Vue 3 SPA + Element Plus + ECharts + AMAP      │
└────────────────────┬────────────────────────────┘
                     │ Axios (REST API)
                     ▼
┌─────────────────────────────────────────────────┐
│              Django 后端 (端口 8000)              │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐      │
│  │ users    │  │ core     │  │ analytics│      │
│  │ (认证)   │  │ (数据管理)│  │ (分析页)  │      │
│  └──────────┘  └──────────┘  └──────────┘      │
│         ┌─────────────────────────┐             │
│         │     shared/ 核心模块      │             │
│         │  analysis  stats  reg   │             │
│         │  anomaly  cluster  ts   │             │
│         │  comparative report     │             │
│         │  crawler   predictor    │             │
│         └──────────┬──────────────┘             │
└────────────────────┼────────────────────────────┘
                     │ ORM
                     ▼
              ┌──────────────┐
              │    MySQL     │
              │ design_150_  │
              │water_quality │
              └──────────────┘

2 项目结构

复制代码 
code/
├── backend/                     # Django 后端
│   ├── config.yaml              # 项目配置（所有可变参数）
│   ├── database.py              # 数据库连接与 ORM 初始化
│   ├── run.py                   # 启动入口
│   ├── requirements.txt         # Python 依赖
│   ├── config/                  # Django 项目配置
│   │   ├── settings.py
│   │   ├── urls.py              # 根路由
│   │   └── wsgi.py
│   ├── apps/
│   │   ├── users/               # 用户认证模块
│   │   │   ├── views.py         # 登录/注册/信息
│   │   │   ├── urls.py
│   │   │   └── models.py
│   │   ├── core/                # 核心数据管理模块
│   │   │   ├── views.py         # CRUD / 导入导出 / 仪表盘
│   │   │   ├── urls.py
│   │   │   └── models.py
│   │   └── analytics/           # 分析页模块
│   │       ├── views.py         # 各分析页路由转发
│   │       └── urls.py
│   └── shared/                  # 核心算法模块（不修改，直接调用）
│       ├── analysis_core.py     # 数据分析
│       ├── predictor_core.py    # ML 训练/预测/评估
│       ├── crawler_core.py      # 知识爬虫
│       ├── stats_core.py        # 统计检验
│       ├── regression_core.py   # 回归分析
│       ├── anomaly_core.py      # 异常检测
│       ├── comparative_core.py  # 同比环比
│       ├── clustering_core.py   # 聚类分析
│       ├── timeseries_core.py   # 时间序列
│       └── report_core.py       # 报告导出
│
├── frontend/                    # Vue 3 前端
│   ├── package.json
│   ├── vite.config.ts
│   ├── tsconfig.json
│   └── src/
│       ├── main.ts              # 入口
│       ├── App.vue
│       ├── router/index.ts      # 路由配置
│       ├── stores/               # Pinia 状态管理
│       │   └── user.ts
│       ├── api/index.ts         # Axios 封装 & API 定义
│       ├── utils/request.ts     # 请求拦截器
│       ├── views/               # 页面组件
│       │   ├── Login.vue
│       │   ├── Register.vue
│       │   ├── Layout.vue
│       │   ├── Dashboard.vue
│       │   ├── DataManage.vue
│       │   ├── StatisticalAnalysis.vue
│       │   ├── Regression.vue
│       │   ├── AnomalyDetection.vue
│       │   ├── Comparative.vue
│       │   ├── Clustering.vue
│       │   ├── TimeSeries.vue
│       │   ├── ReportExport.vue
│       │   ├── GeoMap.vue
│       │   └── Knowledge.vue
│       └── assets/              # 静态资源
│
└── data/
    └── 水质数据.csv              # 原始数据集





































3 数据模型

3.1 数据集特征

字段名 中文名 类型 说明
pH pH值 numeric 海水酸碱度 (0--14)
溶解氧 溶解氧 numeric 水中溶解氧含量 (mg/L)
化学需氧量 化学需氧量 numeric COD (mg/L)
无机氮 无机氮 numeric 无机氮含量 (mg/L)
活性磷酸盐 活性磷酸盐 numeric 活性磷酸盐含量 (mg/L)
石油类 石油类 numeric 石油类污染物 (mg/L)
海区 海区 categorical 渤海/黄海/东海/南海
省份 省份 categorical 沿海省份
地市 地市 categorical 沿海地市
监测时间 监测时间 text 采样时间
水质类别 水质类别 categorical Ⅰ/Ⅱ/Ⅲ/Ⅳ/劣Ⅳ
实测经度 实测经度 numeric 采样点经度
实测纬度 实测纬度 numeric 采样点纬度

3.2 用户模型

字段 类型 说明
id int 主键
username varchar 用户名
password varchar 哈希密码
role enum user / admin
create_time datetime 创建时间

4 后端 API 接口

4.1 认证模块 (/api/users/)

方法 路径 说明 权限
POST /api/users/login/ 用户登录 公开
POST /api/users/register/ 用户注册 公开
GET /api/users/info/ 获取当前用户信息 登录
PUT /api/users/info/ 更新用户信息 登录

登录请求示例：

json 复制代码 
{
  "username": "admin",
  "password": "123456"
}

登录响应示例：

json 复制代码 
{
  "code": 200,
  "msg": "登录成功",
  "data": {
    "token": "xxx",
    "role": "admin",
    "username": "admin"
  }
}

4.2 数据管理模块 (/api/core/)

方法 路径 说明 权限
GET /api/core/data/ 分页查询水质数据 登录
POST /api/core/data/ 新增数据 admin
PUT /api/core/data/<id>/ 修改数据 admin
DELETE /api/core/data/<id>/ 删除数据 admin
POST /api/core/import/ CSV 批量导入 admin
GET /api/core/export/ 导出数据 登录
GET /api/core/dashboard/ 仪表盘统计 登录

4.3 分析模块 (/api/analytics/)

方法 路径 说明 权限
POST /api/analytics/statistical/ 统计分析 登录
POST /api/analytics/regression/ 回归分析 登录
POST /api/analytics/anomaly/ 异常检测 登录
POST /api/analytics/comparative/ 同比环比分析 登录
POST /api/analytics/clustering/ 聚类分析 登录
POST /api/analytics/timeseries/ 时间序列预测 登录
POST /api/analytics/predict/ ML 预测 登录
GET /api/analytics/geo/ 地理分布数据 登录
GET /api/analytics/knowledge/ 知识爬取 登录
POST /api/analytics/report/ 报告导出 登录

5 核心算法模块 (shared/)

5.1 analysis_core.py --- 数据分析

提供水质数据的基础统计分析能力。

函数 说明 参数 返回
descriptive_stats(df, columns) 描述性统计 DataFrame, 列名列表 均值/中位数/标准差/分位数
distribution_analysis(df, column) 分布分析 DataFrame, 列名 直方图数据+正态性检验
correlation_analysis(df, columns) 相关性分析 DataFrame, 列名列表 相关系数矩阵
group_comparison(df, group_col, value_col) 分组对比 DataFrame, 分组列, 数值列 各组统计量

5.2 stats_core.py --- 统计检验

提供统计假设检验能力。

函数 说明 参数 返回
t_test(sample1, sample2) 独立样本 t 检验 两组数据 t 值, p 值
anova_test(groups) 单因素方差分析 多组数据 F 值, p 值
chi_square_test(observed) 卡方检验 观测频数表 χ² 值, p 值
normality_test(data) 正态性检验 (Shapiro-Wilk) 样本数据 W 值, p 值
mann_whitney_u(sample1, sample2) Mann-Whitney U 检验 两组数据 U 值, p 值

5.3 regression_core.py --- 回归分析

提供多种回归建模能力。

函数 说明 参数 返回
linear_regression(X, y) 线性回归 特征矩阵, 目标变量 系数, R², 预测值
polynomial_regression(X, y, degree) 多项式回归 特征, 目标, 阶数 系数, R², 预测值
ridge_regression(X, y, alpha) 岭回归 特征, 目标, 正则化系数 系数, R²
lasso_regression(X, y, alpha) Lasso 回归 特征, 目标, 正则化系数 系数, R²
evaluate_model(y_true, y_pred) 模型评估 真实值, 预测值 MSE, RMSE, MAE, R²

5.4 anomaly_core.py --- 异常检测

提供基于多种策略的异常值识别能力。

函数 说明 参数 返回
zscore_detection(df, column, threshold) Z-Score 异常检测 数据, 列名, 阈值 异常值索引及分数
iqr_detection(df, column, factor) IQR 异常检测 数据, 列名, 倍数 异常值索引
isolation_forest(df, columns, contamination) 孤立森林检测 数据, 列名列表, 污染比例 异常标签及分数
dbscan_detection(df, columns, eps, min_samples) DBSCAN 密度检测 数据, 列名列表, 半径, 最小样本 噪声点标签

5.5 clustering_core.py --- 聚类分析

提供无监督聚类能力。

函数 说明 参数 返回
kmeans(X, n_clusters) K-Means 聚类 特征矩阵, 簇数 标签, 质心, 惯性
hierarchical_clustering(X, n_clusters) 层次聚类 特征矩阵, 簇数 标签, 树状图数据
dbscan_clustering(X, eps, min_samples) DBSCAN 聚类 特征矩阵, 半径, 最小样本 标签, 核心样本索引
evaluate_clustering(X, labels) 聚类评估 特征矩阵, 标签 轮廓系数, CH 指数
elbow_method(X, max_k) 肘部法则 特征矩阵, 最大簇数 各 K 值对应的惯性

5.6 timeseries_core.py --- 时间序列

提供时间序列分析与预测能力。

函数 说明 参数 返回
decompose(df, column, period) 时序分解 数据, 列名, 周期 趋势/季节/残差
moving_average(df, column, window) 移动平均 数据, 列名, 窗口 平滑序列
arima_forecast(df, column, order, steps) ARIMA 预测 数据, 列名, 阶数, 步数 预测值, 置信区间
seasonal_analysis(df, column) 季节性分析 数据, 列名 季节指数

5.7 comparative_core.py --- 同比环比

提供时间维度的对比分析能力。

函数 说明 参数 返回
yoy_analysis(df, column, time_col) 同比分析 数据, 列名, 时间列 各期同比变化率
mom_analysis(df, column, time_col) 环比分析 数据, 列名, 时间列 各期环比变化率
period_comparison(df, column, time_col, period1, period2) 自定义时段对比 数据, 列名, 时间列, 两时段 差异及变化率

5.8 predictor_core.py --- ML 训练/预测/评估

提供完整的机器学习建模流水线。

函数 说明 参数 返回
train_model(X, y, model_type, params) 训练模型 特征, 标签, 模型类型, 参数 训练好的模型
predict(model, X) 预测 模型, 特征 预测结果
evaluate(model, X, y) 评估模型 模型, 特征, 标签 评估指标
cross_validate(X, y, model_type, cv) 交叉验证 特征, 标签, 模型类型, 折数 各折得分

支持的模型类型：

  • random_forest --- 随机森林
  • svm --- 支持向量机
  • knn --- K 近邻
  • decision_tree --- 决策树
  • logistic_regression --- 逻辑回归
  • gradient_boosting --- 梯度提升

5.9 crawler_core.py --- 知识爬虫

提供水质相关知识内容的爬取能力。

函数 说明 参数 返回
crawl(keyword, max_results) 爬取知识 关键词, 最大结果数 标题/摘要/来源列表
parse_content(url) 解析页面内容 URL 正文文本

5.10 report_core.py --- 报告导出

提供分析结果的多格式导出能力。

函数 说明 参数 返回
generate_pdf(data, template) 生成 PDF 报告 数据, 模板 PDF 文件流
generate_excel(data, sheets) 生成 Excel 报告 数据, 工作表配置 Excel 文件流
generate_word(data, template) 生成 Word 报告 数据, 模板 Word 文件流

6 前端页面说明

6.1 页面路由

路径 组件 说明 权限
/login Login.vue 登录页 公开
/register Register.vue 注册页 公开
/ Layout.vue 主布局 登录
/dashboard Dashboard.vue 数据仪表盘 登录
/data-manage DataManage.vue 数据管理 登录
/statistical-analysis StatisticalAnalysis.vue 统计分析 登录
/regression Regression.vue 回归分析 登录
/anomaly-detection AnomalyDetection.vue 异常检测 登录
/comparative Comparative.vue 同比环比 登录
/clustering Clustering.vue 聚类分析 登录
/timeseries TimeSeries.vue 时间序列 登录
/report-export ReportExport.vue 报告导出 登录
/geo-map GeoMap.vue 地理可视化 登录
/knowledge Knowledge.vue 知识库 登录

6.2 页面功能详解

Dashboard（仪表盘）
  • 水质类别分布饼图
  • 各海区监测站点数柱状图
  • 关键指标趋势折线图
  • 数据概览统计卡片（总记录数、监测站点数、最新监测时间）
DataManage（数据管理）
  • 水质数据表格（分页、排序、筛选）
  • 新增/编辑/删除数据行（admin 权限）
  • CSV 批量导入
  • 数据导出
StatisticalAnalysis（统计分析）
  • 描述性统计：均值、中位数、标准差、四分位数
  • 相关性热力图
  • 分组统计（按海区/省份/水质类别）
  • 正态性检验与分布直方图
Regression（回归分析）
  • 线性/多项式/岭/Lasso 回归模型选择
  • 特征选择与目标变量配置
  • 回归拟合图与残差图
  • 模型评估指标（R²、MSE、RMSE、MAE）
AnomalyDetection（异常检测）
  • Z-Score / IQR / 孤立森林 / DBSCAN 四种检测方法
  • 异常值散点图标注
  • 异常数据列表与导出
  • 阈值参数可调
Comparative（同比环比）
  • 按年/季/月维度对比
  • 同比变化率与环比变化率图表
  • 自定义时段对比
  • 变化率热力图
Clustering（聚类分析）
  • K-Means / 层次聚类 / DBSCAN 三种方法
  • 肘部法则自动推荐簇数
  • 聚类散点图与雷达图
  • 轮廓系数评估
TimeSeries（时间序列）
  • 时序分解（趋势/季节/残差）
  • ARIMA 预测及置信区间
  • 移动平均平滑
  • 季节性分析图
GeoMap（地理可视化）
  • 高德地图底图上标注监测站点
  • 按水质类别着色标记
  • 站点详情弹窗（各指标值）
  • 海区边界展示
Knowledge（知识库）
  • 输入关键词爬取海洋水质相关知识
  • 知识列表与全文检索
  • 来源链接追溯
ReportExport（报告导出）
  • 选择分析模块与时间范围
  • PDF / Excel / Word 三种导出格式
  • 图表嵌入报告

7 配置说明 (config.yaml)

项目所有可变参数集中在 backend/config.yaml，新增分析页只需在 analysis_pages 添加配置即可。

配置结构

yaml 复制代码 
# 数据库配置
database:
  engine: django.db.backends.mysql
  name: design_150_water_quality
  host: 127.0.0.1
  port: 3306
  user: root
  password: ""

# 服务器配置
server:
  port: 8000

# 数据集配置
dataset:
  path: data/水质数据.csv
  target_col: null          # 分析型项目，无目标列
  features:
    - name: pH
      type: numeric
    - name: 溶解氧
      type: numeric
    - name: 化学需氧量
      type: numeric
    - name: 无机氮
      type: numeric
    - name: 活性磷酸盐
      type: numeric
    - name: 石油类
      type: numeric
    - name: 海区
      type: categorical
    - name: 省份
      type: categorical
    - name: 地市
      type: categorical
    - name: 监测时间
      type: text
    - name: 水质类别
      type: categorical
    - name: 实测经度
      type: numeric
    - name: 实测纬度
      type: numeric

# 角色体系
roles:
  - user
  - admin

# 已启用模块
modules:
  - auth
  - analytics
  - data_manage
  - dashboard
  - statistical_analysis
  - regression
  - anomaly_detection
  - comparative
  - clustering
  - timeseries
  - report_export
  - geo_map
  - knowledge

# 分析页配置（新增分析页只需在此添加）
analysis_pages:
  - key: statistical_analysis
    name: 统计分析
    module: statistical_analysis
  - key: regression
    name: 回归分析
    module: regression
  - key: anomaly_detection
    name: 异常检测
    module: anomaly_detection
  - key: comparative
    name: 同比环比
    module: comparative
  - key: clustering
    name: 聚类分析
    module: clustering
  - key: timeseries
    name: 时间序列
    module: timeseries

8 部署指南

8.1 环境要求

  • Python 3.9+
  • Node.js 16+
  • MySQL 5.7+
  • npm 或 yarn

8.2 后端部署

bash 复制代码 
# 1. 创建虚拟环境
python -m venv venv
source venv/bin/activate       # Linux/Mac
venv\Scripts\activate          # Windows

# 2. 安装依赖
cd backend
pip install -r requirements.txt

# 3. 配置数据库
# 修改 config.yaml 中 database 配置项
# 创建 MySQL 数据库
mysql -u root -p -e "CREATE DATABASE design_150_water_quality DEFAULT CHARACTER SET utf8mb4;"

# 4. 执行迁移
python manage.py makemigrations
python manage.py migrate

# 5. 导入初始数据
python manage.py import_data data/水质数据.csv

# 6. 创建超级用户
python manage.py createsuperuser

# 7. 启动服务
python run.py
# 服务运行在 http://127.0.0.1:8000

8.3 前端部署

bash 复制代码 
# 1. 安装依赖
cd frontend
npm install

# 2. 开发模式启动
npm run dev

# 3. 生产构建
npm run build
# 构建产物在 dist/ 目录，由 Django 的 static 配置托管

8.4 生产部署建议

bash 复制代码 
# 使用 Gunicorn 作为 WSGI 服务器
pip install gunicorn
gunicorn config.wsgi:application --bind 0.0.0.0:8000 --workers 4

# Nginx 反向代理配置示例
server {
    listen 80;
    server_name your-domain.com;

    location /api/ {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location / {
        root /path/to/frontend/dist;
        try_files $uri $uri/ /index.html;
    }

    location /static/ {
        alias /path/to/backend/static/;
    }
}

9 开发规范

9.1 新增分析页

只需两步：

  1. 在 config.yaml 的 analysis_pages 添加配置项
  2. 在 frontend/src/views/ 创建对应 Vue 组件并注册路由

后端路由由 analytics/views.py 统一转发到 shared/ 核心模块，无需新增 Django view。

9.2 调用核心模块

python 复制代码 
# views.py 中调用示例
from shared.stats_core import t_test, anova_test

def statistical_view(request):
    df = get_dataframe()
    result = t_test(df['pH'], df['溶解氧'])
    return JsonResponse(result)

9.3 编码规范

  • 禁止蓝紫渐变配色：使用单一主题色同色系调色板
  • 禁止 N+1 查询：列表页使用 JOIN 或批量查询，分页在 SQL 层 LIMIT/OFFSET
  • 代码复用：3 处以上相似代码必须重构为可复用单元
  • CSS 变量：使用 CSS 变量和复用 class，不写多份相同样式
  • 核心模块不修改 ：业务逻辑调用 shared/ 核心模块，Web 层只做路由转发和模板渲染

10 安全设计

安全措施 说明
JWT 认证 基于令牌的无状态认证
角色权限 user / admin 二级角色体系
CORS 配置 跨域请求白名单
SQL 注入防护 Django ORM 参数化查询
XSS 防护 Vue 模板自动转义 + 后端输入校验
CSRF 防护 Django 中间件默认启用
密码存储 bcrypt/PBKDF2 哈希

11 数据流

复制代码 
用户操作 (Vue)
    │
    ├─ 选择分析参数 ──→ Axios POST ──→ Django View
    │                                        │
    │                                        ├─ 参数校验
    │                                        ├─ 读取数据 (ORM)
    │                                        ├─ 调用 shared/ 核心模块
    │                                        └─ 返回 JSON 结果
    │                                              │
    │◄──────────────── JSON Response ◄─────────────┘
    │
    └─ ECharts / AMAP 渲染图表

12 关键依赖版本

Python 依赖 (requirements.txt)

复制代码 
Django>=4.0
mysqlclient>=2.1
pandas>=1.5
numpy>=1.23
scikit-learn>=1.2
scipy>=1.10
reportlab>=3.6
openpyxl>=3.0
requests>=2.28
beautifulsoup4>=4.11

前端依赖 (package.json)

复制代码 
vue: ^3.3
vue-router: ^4.2
pinia: ^2.1
element-plus: ^2.4
echarts: ^5.4
axios: ^1.6
typescript: ^5.0
vite: ^5.0

13 常见问题

Q: 数据库连接失败？

确认 MySQL 服务已启动，config.yaml 中数据库配置正确，且 design_150_water_quality 库已创建。

Q: 前端页面空白？

确认后端服务在 8000 端口运行，前端 vite.config.ts 中代理配置指向 http://127.0.0.1:8000。

Q: 地图不显示？

高德地图需要 API Key，在 GeoMap.vue 中替换为你自己的 Key。

Q: 新增分析页后前端路由不生效？

确认 router/index.ts 已添加对应路由，且组件路径正确。

相关推荐
yugi9878382 小时前
基于Qt的图像处理系统
开发语言·图像处理·qt
chushiyunen2 小时前
golang笔记、go
开发语言·笔记·golang
青枣八神2 小时前
Trae IDE 终端 JDK 版本与系统不一致的解决方案
java·开发语言·ide
稳如磐石.2 小时前
北京研华上架式工控机
大数据·人工智能·python
Shadow（⊙ｏ⊙）2 小时前
Linux内核级文件系统分析——文件系统入门内核级文章！
linux·运维·服务器·开发语言·c++
cjhbachelor2 小时前
C/C++内存管理
c语言·开发语言·c++
噜噜大王_2 小时前
C++ 类和对象（中）：默认成员函数全解
开发语言·c++
草莓啵啵～3 小时前
pywinauto-打开程序+连接已打开的程序
开发语言·python
羊羊小栈3 小时前
基于多时间序列模型和大语言模型的航海轨迹预测分析预警系统( LSTM、GRU、Transformer、CNN-LSTM、DLinear)
人工智能·语言模型·cnn·gru·毕业设计·lstm·transformer
热门推荐
01GitHub 镜像站点02【AI】2026 年具身智能模型和世界模型总结03Codex 接入 DeepSeek API 完整配置文档04【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法05裂开！ChatGPT 居然开始要手机号验证，附详细解决方法062026年AI编程工具终极横评：Cursor vs Claude Code vs Copilot07CC-Switch & Claude 基于 Linux 服务器安装使用指南08Codegraph 实战：用知识图谱让 AI 编程效率翻倍09CC-Switch 全平台下载、安装与使用全指南（Windows/macOS/Linux）10Codex使用DeepSeek API的方法（cc switch + codex bridge方案）