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

张

张建站

2026/5/28 5:24:03

10分钟阅读

中国海洋水质数据可视化分析系统 — 技术文档1 系统概述本系统基于 Django Vue 技术栈构建面向中国海洋水质监测数据提供数据管理、统计分析、机器学习建模、异常检测、聚类分析、时间序列预测、同比环比对比、地理可视化、知识爬取与报告导出等一体化分析能力。1.1 技术架构层次技术版本前端框架Vue 3 TypeScript3.xUI 组件库Element Plus—图表库ECharts5.x地图高德地图 AMAP—HTTP 客户端Axios—后端框架Django4.x数据库MySQL5.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 数据集特征字段名中文名类型说明pHpH值numeric海水酸碱度 (0–14)溶解氧溶解氧numeric水中溶解氧含量 (mg/L)化学需氧量化学需氧量numericCOD (mg/L)无机氮无机氮numeric无机氮含量 (mg/L)活性磷酸盐活性磷酸盐numeric活性磷酸盐含量 (mg/L)石油类石油类numeric石油类污染物 (mg/L)海区海区categorical渤海/黄海/东海/南海省份省份categorical沿海省份地市地市categorical沿海地市监测时间监测时间text采样时间水质类别水质类别categoricalⅠ/Ⅱ/Ⅲ/Ⅳ/劣Ⅳ实测经度实测经度numeric采样点经度实测纬度实测纬度numeric采样点纬度3.2 用户模型字段类型说明idint主键usernamevarchar用户名passwordvarchar哈希密码roleenumuser/admincreate_timedatetime创建时间4 后端 API 接口4.1 认证模块 (/api/users/)方法路径说明权限POST/api/users/login/用户登录公开POST/api/users/register/用户注册公开GET/api/users/info/获取当前用户信息登录PUT/api/users/info/更新用户信息登录登录请求示例{username:admin,password:123456}登录响应示例{code:200,msg:登录成功,data:{token:xxx,role:admin,username:admin}}4.2 数据管理模块 (/api/core/)方法路径说明权限GET/api/core/data/分页查询水质数据登录POST/api/core/data/新增数据adminPUT/api/core/data/id/修改数据adminDELETE/api/core/data/id/删除数据adminPOST/api/core/import/CSV 批量导入adminGET/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 页面路由路径组件说明权限/loginLogin.vue登录页公开/registerRegister.vue注册页公开/Layout.vue主布局登录/dashboardDashboard.vue数据仪表盘登录/data-manageDataManage.vue数据管理登录/statistical-analysisStatisticalAnalysis.vue统计分析登录/regressionRegression.vue回归分析登录/anomaly-detectionAnomalyDetection.vue异常检测登录/comparativeComparative.vue同比环比登录/clusteringClustering.vue聚类分析登录/timeseriesTimeSeries.vue时间序列登录/report-exportReportExport.vue报告导出登录/geo-mapGeoMap.vue地理可视化登录/knowledgeKnowledge.vue知识库登录6.2 页面功能详解Dashboard仪表盘水质类别分布饼图各海区监测站点数柱状图关键指标趋势折线图数据概览统计卡片总记录数、监测站点数、最新监测时间DataManage数据管理水质数据表格分页、排序、筛选新增/编辑/删除数据行admin 权限CSV 批量导入数据导出StatisticalAnalysis统计分析描述性统计均值、中位数、标准差、四分位数相关性热力图分组统计按海区/省份/水质类别正态性检验与分布直方图Regression回归分析线性/多项式/岭/Lasso 回归模型选择特征选择与目标变量配置回归拟合图与残差图模型评估指标R²、MSE、RMSE、MAEAnomalyDetection异常检测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添加配置即可。配置结构# 数据库配置database:engine:django.db.backends.mysqlname:design_150_water_qualityhost:127.0.0.1port:3306user:rootpassword:# 服务器配置server:port:8000# 数据集配置dataset:path:data/水质数据.csvtarget_col:null# 分析型项目无目标列features:-name:pHtype: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_analysisname:统计分析module:statistical_analysis-key:regressionname:回归分析module:regression-key:anomaly_detectionname:异常检测module:anomaly_detection-key:comparativename:同比环比module:comparative-key:clusteringname:聚类分析module:clustering-key:timeseriesname:时间序列module:timeseries8 部署指南8.1 环境要求Python 3.9Node.js 16MySQL 5.7npm 或 yarn8.2 后端部署# 1. 创建虚拟环境python-mvenv venvsourcevenv/bin/activate# Linux/Macvenv\Scripts\activate# Windows# 2. 安装依赖cdbackend pipinstall-rrequirements.txt# 3. 配置数据库# 修改 config.yaml 中 database 配置项# 创建 MySQL 数据库mysql-uroot-p-eCREATE 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:80008.3 前端部署# 1. 安装依赖cdfrontendnpminstall# 2. 开发模式启动npmrun dev# 3. 生产构建npmrun build# 构建产物在 dist/ 目录由 Django 的 static 配置托管8.4 生产部署建议# 使用 Gunicorn 作为 WSGI 服务器pipinstallgunicorn gunicorn config.wsgi:application--bind0.0.0.0:8000--workers4# Nginx 反向代理配置示例server{listen80;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 新增分析页只需两步在config.yaml的analysis_pages添加配置项在frontend/src/views/创建对应 Vue 组件并注册路由后端路由由analytics/views.py统一转发到shared/核心模块无需新增 Django view。9.2 调用核心模块# views.py 中调用示例fromshared.stats_coreimportt_test,anova_testdefstatistical_view(request):dfget_dataframe()resultt_test(df[pH],df[溶解氧])returnJsonResponse(result)9.3 编码规范禁止蓝紫渐变配色使用单一主题色同色系调色板禁止 N1 查询列表页使用 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)Django4.0 mysqlclient2.1 pandas1.5 numpy1.23 scikit-learn1.2 scipy1.10 reportlab3.6 openpyxl3.0 requests2.28 beautifulsoup44.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.013 常见问题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已添加对应路由且组件路径正确。