侧边栏壁纸
博主头像
九玄凰 博主等级

行动起来，活在当下

  • 累计撰写 3 篇文章
  • 累计创建 1 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

《数据可视化》项目建议书

yanhanv
yanhanv
2026-05-18 / 0 评论 / 2 点赞 / 53 阅读 / 0 字

《数据可视化》项目建议书

（2026-夏）

题目：基于 ECharts 的全球气候与空气质量时空可视化分析系统

小组名称： 格式塔意识

成员姓名： 贺文轩

成员姓名： 石青松

成员姓名： 程康凌

成员姓名： 弋君豪

成员姓名： 李兴杰

指导教师： 刘子杰

提交时间：二〇二六年五月二十二日

声 明

本团队声明所呈交的项目建议书是本团队成员进行的项目讨论的相关结果。据我所知，除了文中特别加以标注引用和致谢的地方外，建议书中不包含其他人已经发表或撰写过的研究成果。团队成员对本项目建议书所做的任何贡献均已在作了明确的说明。本项目建议书是本团队在四川大学锦江学院读书期间在任课教师指导下取得的，论文成果归四川大学锦江学院所有，特此声明。

项目建议书团队成员签名： 贺文轩 石青松 程康凌 弋君豪 李兴杰

签字日期： 2026 年 5 月 20 日

摘 要

随着全球工业化和城市化进程加速，气候变化与空气污染已成为21世纪人类面临的两大交织型环境挑战。极端天气事件频发与城市空气质量恶化不仅威胁人类健康，还对全球生态系统与经济发展构成系统性风险。然而，当前气候数据与空气质量数据多分散存储于不同平台，缺乏有效的数据融合与综合分析工具，严重制约了"气象-污染"耦合机制的研究与公众认知。

针对上述问题，本项目基于 Kaggle 全球天气数据集（Global Weather Repository），整合全球多国多城市的温度、降水、湿度、风速风向、气压等气象要素与六项核心空气污染物（CO、O₃、NO₂、SO₂、PM2.5、PM10）监测数据，采用 ECharts 6.0（echarts.min.js）搭载 GL 高级渲染模块，构建全球气候与空气质量时空可视化分析系统。系统通过 3D 地球（globe）、3D 柱状图（bar3D）、3D 散点图（scatter3D）、旭日图（sunburst）、桑基图（sankey）、主题河流图（themeRiver）、相关系数热力图（heatmap）、平行坐标图（parallel）等高级交互式可视化技术，配合 GL 粒子动画与 WebGL 实时渲染，实现气候-污染时空分布规律的三维沉浸式呈现与气象因子对空气质量驱动效应的多维度定量解析。

本项目的创新点主要体现在四个方面：首先，创新性地将全球气象数据与多维度空气质量指标进行时空对齐与融合分析，打破了传统气象分析或空气污染分析的单一维度局限；其次，采用三屏协同架构——宏观 3D 地球总览屏、区域对比与多维分析屏、关联分析与预警监控屏，形成"全球概览→区域对比→深度归因"的递进分析链路；再次，深度集成 ECharts GL 三维渲染能力（3D 地球、3D 柱状/散点图、粒子流动线），以 WebGL 硬件加速实现大规模地理空间数据的流畅交互；最后，引入 EPA 与 DEFRA 双标准空气质量评估框架，结合桑基图揭示"气象因子→大气过程→污染物浓度"的因果流向，为不同国家和地区的空气质量管理提供可对比的决策参考。

预计项目将于2026年6月完成开发并交付使用。研究成果不仅可为环境科学研究者提供气候-污染耦合分析的实证数据，还能为政府部门制定精准化空气质量管理政策提供可视化决策支持，为公众了解气候与空气质量的时空规律提供直观的交互式探索工具。

关键词： ECharts 6.0；ECharts GL；3D地球；全球气候；空气质量；时空可视化；三屏联动；PM2.5

目 录

  • 声 明
  • 摘 要
  • 目 录
  • 第1章 引言
    • 1.1 选题背景及意义
    • 1.2 文献综述
    • 1.3 研究目的与实施方案
  • 第2章 数据来源与描述
    • 2.1 数据来源
    • 2.2 数据描述
  • 第3章 研究内容与实施方案
    • 3.1 任务定义
    • 3.2 研究目标
      • 3.2.1 数据方面
      • 3.2.2 可视化方面
      • 3.2.3 系统交互方面
      • 3.2.4 应用方面
    • 3.3 研究内容与技术路线
      • 3.3.1 数据的结构化处理
      • 3.3.2 可视化方面的研究
      • 3.3.3 可视化模型的设计
      • 3.3.4 可视化交互系统的构建
  • 第4章 可视化设计与整体框架
    • 4.1 可视化设计
    • 4.2 整体框架
  • 第5章 预期效果与进度计划
    • 5.1 预期效果
    • 5.2 进度计划
      • 5.2.1 时间安排
      • 5.2.2 团队分工
  • 参考文献

第1章 引言

1.1 选题背景及意义

近年来，全球气候变化加剧与空气质量持续恶化已成为国际社会共同关注的重大环境议题。世界卫生组织（WHO）报告指出，全球超过99%的人口生活在空气质量超出其指导限值的地区，每年约有700万人因空气污染相关疾病过早死亡。与此同时，联合国政府间气候变化专门委员会（IPCC）第六次评估报告强调，全球平均气温较工业化前已上升约1.1°C，极端高温、暴雨、干旱等极端天气事件频率与强度显著增加。

气候条件与空气质量之间存在复杂而密切的相互作用关系——高温促进地面臭氧（O₃）的光化学生成，静稳天气（低风速、无降水）导致颗粒物（PM2.5、PM10）的积聚富集，强降水则通过湿沉降过程冲刷大气污染物。然而，当前大多数研究将气象分析与空气污染分析作为独立课题处理，缺乏对"气象因子 → 大气物理化学过程 → 污染物浓度变化"这一完整因果链的系统性可视化呈现，尤其是缺乏利用三维地理空间技术与高级交互图表进行沉浸式分析的平台。公众和决策者在面对分散的气象数据和空气质量数据时，难以快速洞察二者之间的内在联系。

基于此，构建基于 ECharts 6.0 + ECharts GL 的全球气候与空气质量时空可视化分析系统具有重要的理论价值与实践意义。理论上，系统可通过 GL 三维渲染引擎实现物理级真实的地球模型，将多维气候-污染数据的时空融合提升至立体空间维度，配合桑基图、旭日图等高级图表揭示不同气候带下气象条件对空气质量的差异化驱动机制。实践上，系统可实现三大应用突破——为政府部门提供"气候-污染"协同监测看板以支撑空气质量管理政策的精准制定，为环境科研机构提供开放的数据探索工具以加速"气象-污染"耦合模型的构建，为公众提供直观易懂的三维沉浸式可视化界面以提升环境意识与健康防护能力。

1.2 文献综述

现有研究在气象数据可视化和空气质量分析领域已取得一定进展，但存在以下核心不足：

在气象数据可视化方面，李芳（2020）基于 Tableau 构建了区域气候趋势展示平台，实现了温度与降水的时序可视化，但其交互性有限且缺乏空气质量维度集成；王明等（2021）利用 GIS 技术实现了中国城市气温空间分布的可视化，但未突破单一气象要素的分析框架。在空气质量可视化领域，Zhang et al.（2022）基于 D3.js 开发了城市PM2.5时空动态监测系统，实现了单污染物的精细化展示，但未能将气象条件（温度、湿度、风速）纳入分析模型，导致无法解释污染事件的成因。

在跨领域数据融合方面，Liu et al.（2023）尝试利用机器学习方法建立气象条件与PM2.5浓度的预测模型，但结果以统计表格和散点图呈现，缺乏直观的时空可视化表达，制约了模型结果的传播与决策应用。陈伟等（2022）基于 ECharts 构建了城市环境质量综合展示平台，涵盖了气象与空气质量指标，但其分析停留在简单的并列展示层面，未进行气象-污染关联性的定量可视化。

针对上述不足——气象与空气质量数据融合深度不够、气象-污染因果链缺乏可视化表达、全球化视角缺失、三维空间分析能力欠缺、双标准（EPA/DEFRA）对比分析空白——本项目创新性地提出基于 ECharts 6.0 + ECharts GL 的全球多维度三维可视化分析方案：通过 3D 地球与 3D 柱状/散点图构建"全球空间分布→区域对比"宏观三维视图，配合桑基图、旭日图、主题河流图与平行坐标图实现气象-污染因果流向与城市级微观归因分析，填补跨领域耦合可视化的研究缺口。

1.3 研究目的与实施方案

本项目致力于构建一个以 ECharts 6.0 + ECharts GL 为核心的全球气候与空气质量时空三维可视化分析系统，系统性地整合全球多国多城市的气象要素（温度、湿度、降水、风速风向、气压、能见度、UV指数）与六项核心空气污染物（CO、O₃、NO₂、SO₂、PM2.5、PM10）监测数据，通过 GL 三维渲染与高级交互图表技术实现以下研究目标：（1）以 3D 地球为载体，揭示全球不同气候带下温度、降水、湿度等核心气象要素的三维空间分布与时间演变规律；（2）通过 3D 柱状/散点图识别全球高污染热点区域，对比不同国家/城市的空气质量差异，评估EPA与DEFRA双标准的适用性；（3）利用桑基图、旭日图和相关系数热力图，定量分析温度、湿度、风速等气象因子与各污染物浓度的因果流向与关联强度；（4）通过主题河流图与GIS热力层，自动识别极端天气与高污染异常事件的时空演变模式，为污染预警提供可视化依据。

小组全体成员负责设计本系统，合理分配数据处理、后台开发和前端开发任务。本项目作为《数据可视化》课程的小组项目，各项进度与课程要求对齐。预计于2026年5月底交付首个版本，2026年6月交付最终版本及相关文档。

第2章 数据来源与描述

2.1 数据来源

本研究数据源自 Kaggle 平台的 "Global Weather Repository (Daily Updating)" 公开数据集。该数据集通过整合全球多个气象数据源与空气质量监测网络，每日更新全球各主要城市的实时天气与空气质量监测快照。

数据获取地址：https://www.kaggle.com/datasets/nelgiriyewithana/global-weather-repository

2.2 数据描述

本数据集当前包含约 140,925 条记录，数据时间范围覆盖 2024年5月至2026年5月，涵盖 全球约200+个国家和地区的主要城市。每条记录代表某一城市在特定时刻的天气与空气质量快照，共包含 41 个字段，按属性类别可分为以下五大类：

（1）基础地理信息字段（6个）

  • country：国家名称
  • location_name：城市/地点名称
  • latitude：纬度坐标
  • longitude：经度坐标
  • timezone：时区
  • last_updated：数据最后更新时间（本地时间）

（2）核心气象要素字段（14个）

  • temperature_celsius / temperature_fahrenheit：温度（℃ / ℉）
  • feels_like_celsius / feels_like_fahrenheit：体感温度（℃ / ℉）
  • humidity：相对湿度（%）
  • precip_mm / precip_in：降水量（mm / in）
  • pressure_mb / pressure_in：气压（毫巴 / 英寸汞柱）
  • wind_mph / wind_kph：风速（mph / km/h）
  • wind_degree：风向角度（°）
  • wind_direction：风向（16方位罗盘）
  • gust_mph / gust_kph：阵风风速
  • condition_text：天气状况描述（如 "Sunny"、"Partly cloudy"、"Moderate or heavy rain with thunder"）
  • cloud：云量（%）
  • visibility_km / visibility_miles：能见度（km / miles）
  • uv_index：紫外线指数

（3）空气质量监测字段（8个）

  • air_quality_Carbon_Monoxide：一氧化碳（CO）浓度
  • air_quality_Ozone：臭氧（O₃）浓度
  • air_quality_Nitrogen_dioxide：二氧化氮（NO₂）浓度
  • air_quality_Sulphur_dioxide：二氧化硫（SO₂）浓度
  • air_quality_PM2.5：细颗粒物（PM2.5）浓度
  • air_quality_PM10：可吸入颗粒物（PM10）浓度
  • air_quality_us-epa-index：美国 EPA 空气质量指数等级（1-5）
  • air_quality_gb-defra-index：英国 DEFRA 空气质量指数等级（1-10）

（4）天文信息字段（6个）

  • sunrise / sunset：日出 / 日落时间
  • moonrise / moonset：月出 / 月落时间
  • moon_phase：月相（如 "Waxing Gibbous"、"Full Moon"）
  • moon_illumination：月面照度百分比

数据经标准化预处理后，按气候带（热带、亚热带、温带、寒带）和地理区域（亚洲、欧洲、非洲、北美洲、南美洲、大洋洲）进行分层抽样，筛选出覆盖各纬度和气候类型的代表性城市样本。核心分析维度包括：气象要素（温度、降水、湿度、风速、气压）、空气质量（六项污染物浓度与双标准指数）、时空属性（经纬度、时区、时间戳）及地理分类（大洲、气候带）。

第3章 研究内容与实施方案

3.1 任务定义

系统设计为三屏递进式大屏架构：大屏1（宏观3D地球总览，内容稀疏，突出视觉冲击）、大屏2（区域对比与多维分析，内容密集）、大屏3（关联分析与预警监控，内容密集），三屏之间通过城市/国家点击事件实现联动下钻。

任务 1：基于 3D 地球的气候-污染宏观总览（大屏1——稀疏布局）

  • 目标：以 3D 地球为核心载体，实现全球气候要素与空气污染的三维沉浸式空间总览
  • 步骤：
    1. 使用 ECharts GL globe 组件构建 3D 地球，以 WGS-84 经纬度坐标映射全球城市点位，地球表面叠加温度热力纹理层（蓝→红渐变），支持鼠标旋转/缩放/倾斜交互
    2. 在 3D 地球上空使用 GL scatter3D 气泡层，气泡高度（Y轴）编码 PM2.5 浓度、气泡颜色映射 EPA 指数等级（绿→红），形成"污染立柱"视觉
    3. 使用 GL 粒子动效（particle）在大气环流路径上渲染 PM2.5 传输粒子流，以 WebGL 硬件加速实现大规模粒子实时动画，直观呈现污染物跨区域传输方向
    4. 屏幕四角辅以数字飞牌（CSS 动画计数器），实时展示全球平均温度、PM2.5 均值、覆盖城市数、今日最高污染城市四项关键指标

任务 2：三维区域对比与多维特征分析（大屏2——密集布局）

  • 目标：通过 3D 图表与多维度统计图表实现气候-污染的跨大洲对比与城市多维特征深度分析
  • 步骤：
    1. 使用 GL bar3D 三维柱状图，X轴为六大洲、Z轴为六项污染物（CO/O₃/NO₂/SO₂/PM2.5/PM10），Y轴（高度）编码平均浓度，支持旋转视角对比不同大洲污染轮廓，一键切换"按洲展示"与"按污染物展示"双重视角
    2. 使用 GL scatter3D 三维散点图，X轴温度、Y轴湿度、Z轴 PM2.5 浓度，散点颜色映射大洲，构建"气象-污染"三维特征空间，支持刷选（brush）高亮异常城市群
    3. 使用 sunburst 旭日图实现数据分层钻取——内圈为大洲，中圈为国家，外圈为城市，扇区大小编码 PM2.5 浓度、颜色映射 EPA 等级，点击扇区实现逐级下钻与地图联动
    4. 使用 parallel 平行坐标图，平行轴包含温度、湿度、风速、PM2.5、O₃、NO₂ 六维，每条折线代表一个城市样本，颜色区分大洲，支持 brush 刷选联动其他图表
    5. 使用分组柱状图（bar）并列展示六大洲六项污染物的标准化对比，配合 dataZoom 滑块处理污染物标签

任务 3：因果流向析因与空气质量预警监控（大屏3——密集布局）

  • 目标：揭示气象因子→大气过程→污染物浓度的因果流向，构建多维度空气质量预警监控面板
  • 步骤：
    1. 使用 sankey 桑基图构建"气象因子（温度/湿度/风速/气压）→ 大气过程（光化学反应/颗粒物积聚/湿沉降/扩散稀释）→ 污染物浓度（PM2.5/O₃/NO₂/SO₂/CO）"三级因果流向图，节点大小编码各因子贡献度，流向宽度映射 Spearman |r| 值
    2. 使用 themeRiver 主题河流图，横轴为时间（2024年5月~2026年5月），河流宽度/颜色编码各污染物浓度变化趋势，直观呈现季节性污染事件与跨年度演变规律
    3. 使用相关系数热力图（heatmap）——10×10 Spearman 矩阵展示温度/湿度/风速/气压 × CO/O₃/NO₂/SO₂/PM2.5/PM10 两两关联强度，对称色带[-1,+1]，visualMap 驱动渐变色
    4. 使用仪表盘组（gauge × 2）——左侧 EPA 仪表盘（1-5级）与右侧 DEFRA 仪表盘（1-10级），红色指针指示选定城市当前等级，灰色基准指针标注全球中位数
    5. 使用雷达图（radar）——五维雷达轴（极端高温日数/暴雨日数/静稳日数/高PM2.5日数/高O₃日数），多边形对比不同城市极端事件特征
    6. 使用日历热力图（calendar + heatmap）——逐日单元格颜色按 EPA 指数映射绿/黄/橙/红/紫预警色阶，visualMap 分段配色，快速识别污染高发季节与持续重污染事件

3.2 研究目标

3.2.1 数据方面

  1. 数据获取与预处理：从 Kaggle 平台下载 Global Weather Repository 数据集，进行缺失值检测与填充（对数值型字段使用中位数或均值填充，对类别型字段保留原值）、异常值过滤（基于IQR方法剔除温度< -50°C或>55°C等物理不合理值）、重复记录去重，构建高质量结构化数据库。

  2. 时空标准化：统一时间戳字段 last_updated 为标准 ISO 8601 格式并提取年、月、日、小时维度；统一地理坐标系为 WGS-84，确保与 ECharts 地图组件的坐标兼容；对温度单位统一为摄氏度，降水量统一为毫米。

  3. 数据分层与抽样：按大洲和气候带对城市进行分层编码，确保分析样本覆盖热带、亚热带、温带、寒带四大气候类型，避免分析偏差。

  4. 指标工程：基于原始字段构建衍生指标——"极端高温阈值"（温度 > Q3 + 1.5×IQR）、"暴雨阈值"（precip_mm > 50mm/日）、"静稳天气标识"（风速 < 5 km/h 且 无降水），为极端事件分析提供判断依据。

3.2.2 可视化方面

  1. 多模态三维可视化设计：提供 GL 三维图表（3D 地球/globe、3D 柱状图/bar3D、3D 散点图/scatter3D、GL 粒子动效）、空间映射图表（旭日图/sunburst、桑基图/sankey）、统计图表（主题河流图/themeRiver、分组柱状图、雷达图）、关系与监控图表（相关系数热力图/heatmap、平行坐标图/parallel、仪表盘组/gauge、日历热力图/calendar）共四大类 13 种可视化形式，覆盖从三维沉浸式概览到因果归因分析的完整需求。

  2. 三屏递进展示架构：设计三屏协同展示模式——大屏 1（宏观3D地球总览，稀疏布局） 以 3D 地球为核心，辅以 GL 粒子污染流线和数字飞牌关键指标，提供沉浸式全球气候-污染三维总览；大屏 2（区域对比与多维分析，密集布局） 以 3D 柱状图、3D 散点图、旭日图和平行坐标图为主体，实现跨大洲污染轮廓对比与多维特征空间分析；大屏 3（因果流向与预警监控，密集布局） 以桑基图、主题河流图、相关系数热力图、仪表盘组和日历热力图为核心，揭示气象→污染的因果流向并构建预警监控面板。三屏通过城市点击事件实现联动下钻。

  3. 配色与视觉编码：采用科学渐进色编码方案（温度→蓝-橙冷暖色带，AQI→绿-黄-橙-红-紫-褐六色国际预警色阶），GL 三维图表采用半透明材质与光照渲染增强立体感，确保跨文化、跨语言的可读性；所有图表统一使用 ECharts 6.0 + ECharts GL 主题配色，保持视觉一致性。

3.2.3 系统交互方面

  1. 用户界面设计：采用三屏递进式深色主题UI布局——大屏1（稀疏布局）为 3D 地球全屏沉浸风格，四角悬浮数字飞牌；大屏2（密集布局）为 3×2 多图网格风格，左侧 3D 图占比最大；大屏3（密集布局）为 2×3 分析面板+仪表盘监控风格。顶部全局导航栏提供三屏 Tab 切换、数据时间范围选择（时间滑块）、大洲/国家/城市级联筛选功能。

  2. 交互功能开发：实现核心交互功能——（a）3D 地球旋转下钻：在 3D 地球上点击某城市柱体/气泡，大屏2和大屏3自动更新为该城市的分析视图，地球自动旋转至该城市经纬度；（b）GL 视角控制：3D 图表支持鼠标旋转/缩放/倾斜，一键复位视角按钮；（c）旭日图分层钻取：点击旭日图扇区实现大洲→国家→城市逐级下钻，所有图表联动更新；（d）时间轴动画播放：主题河流图支持时间轴自动播放（timeline 组件），展示 2024-2026 年污染物演变动画；（e）多图联动刷选：在平行坐标图或 3D 散点图中刷选数据子集，其他图表同步高亮对应样本；（f）悬停详情：鼠标悬停图表元素时弹出详细数据信息框（含气象+污染数值和时间戳）。

  3. 跨平台兼容性：采用前后端分离架构，前端基于 HTML5 + CSS3 + JavaScript，加载 echarts.min.js 核心库及 echarts-gl.min.js GL扩展，采用 WebGL 硬件加速渲染 3D 图表，适配 Chrome、Edge、Firefox 主流浏览器（需支持 WebGL 1.0+）；采用响应式布局（CSS Grid/Flexbox + resize 监听），确保在不同屏幕尺寸下良好的展示效果。

3.2.4 应用方面

  1. 环境监测与决策支持：系统可作为区域空气质量管理的可视化监控平台，通过仪表盘组实时展示目标城市的EPA/DEFRA指数与全球基准值的对比，识别空气质量恶化趋势并及时触发管理响应。

  2. 科研分析工具：系统提供的桑基图、相关系数热力图与平行坐标图可作为研究"气象-污染"耦合机制的分析工具，支持研究者快速探索气候因子对特定污染物的驱动效应与因果流向，为大气环境模型的构建提供假设验证依据。

  3. 公众环境教育：系统直观的 3D 地球污染总览、GL 粒子传输动画和逐日日历热力图可用于公众环境教育，帮助公众通过三维沉浸式体验理解不同气候条件下空气质量变化的规律，提升健康防护与环境参与意识。

3.3 研究内容与技术路线

3.3.1 数据的结构化处理

下载 Kaggle Global Weather Repository 原始CSV文件，进行数据读取与初步探索。对41个字段进行属性分类与元数据梳理，建立字段类型（数值型/类别型/时间型/地理型）映射表。数据清洗环节包括：缺失值检测并记录缺失比例、异常值基于物理边界和统计边界双重过滤、重复城市-时间戳组合去重。清洗后，按大洲（6大洲）和气候带（热带/亚热带/温带/寒带）对城市进行分层编码，构造分析用分层抽样数据集。数据导出为结构化CSV和JSON两种格式，CSV用于后端数据处理，JSON用于前端ECharts直接消费，减少数据格式转换开销。

3.3.2 可视化方面的研究

研究适用于多变量时空数据的气候-空气质量三维耦合可视化方法，重点探索以下技术方案：（1）ECharts GL 三维地理空间渲染性能优化——测试 globe 组件在不同城市数据量级（100/500/2000+ 点位）下的帧率表现，调整 displacementMap 纹理分辨率和 scatter3D 采样率以平衡视觉质量与性能；（2）GL 粒子系统在污染传输可视化中的应用——研究 particle 组件的轨迹参数控制（速度、生命周期、颜色渐变）及其与气象风场数据的绑定方案；（3）高级图表的因果表达——利用桑基图（sankey）的三级节点结构编码"气象因子→大气过程→污染物浓度"因果链，通过旭日图（sunburst）的分层扇区编码大洲→国家→城市的空间层级；（4）时间序列的多粒度聚合与动画展示——设计主题河流图（themeRiver）的平滑带宽编码策略，配合 timeline 组件实现污染物浓度演变的自动播放动画；（5）WebGL 与 Canvas 混合渲染策略——3D 图表使用 WebGL 渲染管线（echarts-gl.js），2D 图表使用 Canvas 渲染（echarts.min.js），合理分配GPU资源避免性能瓶颈。

3.3.3 可视化模型的设计

设计符合气候-空气质量三维耦合分析需求的可视化模型体系：（1）三维空间分布模型：以 ECharts GL globe 为基底，叠加 scatter3D 污染柱体层（PM2.5浓度编码柱体高度和颜色）、GL 粒子轨迹层（PM2.5传输方向），配合 displacementMap 地形纹理，实现气象与污染的三维空间共表达；（2）层级分解模型：通过旭日图（sunburst）实现"大洲→国家→城市"三级空间层级分解，扇区大小与颜色分别编码 PM2.5 浓度与 EPA 等级，实现从宏观到微观的逐级数据探索；（3）因果流向模型：以桑基图（sankey）为核心，构建"气象因子（4类）→大气过程（4种）→污染物浓度（6项）"的三级因果流向网络，节点大小编码贡献度、流向带宽编码 Spearman |r| 值，平行坐标图补充个体城市在温度/湿度/风速/PM2.5/O₃/NO₂六维上的特征轮廓；（4）时序演变模型：通过主题河流图（themeRiver）展示 2024-2026 年各污染物浓度的时序演变与季节性波动，配合 timeline 自动播放实现动态叙事；日历热力图展示单城市逐日污染等级的全年分布；（5）三维对比模型：通过 bar3D 三维柱状图实现六大洲×六项污染物的立体对比，scatter3D 三维散点图构建"温度-湿度-PM2.5"三维特征空间，支持旋转视角探索数据聚类；（6）预警监控模型：通过雷达图对比城市极端指标轮廓，仪表盘组并排展示 EPA/DEFRA 双标准等级，日历热力图呈现逐日预警色阶。

在配色编码方面，温度采用蓝（冷）-橙（热）双色渐变，AQI 相关指标采用绿（优）-黄（良）-橙（轻度）-红（中度）-紫（重度）-褐（严重）六色渐变的国际通用预警色阶；GL 三维图表采用 Lambert 光照材质和半透明渲染增强立体层次；粒子轨迹线按传输强度渐变，确保跨文化、跨语言的可读性。

3.3.4 可视化交互系统的构建

采用前后端分离架构：（1）前端：使用 HTML5 + CSS3 + JavaScript 构建三屏深色主题用户界面，核心可视化库选用 ECharts 6.0（echarts.min.js） + ECharts GL 扩展，利用 WebGL 硬件加速实现 3D 地球、3D 柱状/散点图和粒子特效的流畅渲染（60fps）。辅助使用 ECharts 的 dataZoom（缩放）、brush（刷选）、visualMap（视觉映射）、timeline（时间动画）、tooltip（悬停详情）组件实现强交互功能。三屏之间通过 JavaScript 事件总线（EventBus）实现跨屏联动——大屏1 3D 地球城市点击触发大屏2/大屏3 数据过滤，旭日图层级钻取触发 3D 地球旋转定位。（2）后端：采用 Python Flask 轻量级框架，负责数据读取、预处理API（数据聚合、过滤、统计计算）和静态文件服务。数据处理使用 Pandas 进行高效的数据操作与统计分析（如 Spearman 相关系数计算、桑基图因果矩阵构建），计算结果通过 RESTful API 以 JSON 格式返回前端。（3）数据流：原始CSV → Pandas清洗与聚合 → Flask API接口 → 前端 Ajax/fetch 请求 → ECharts GL/Canvas 渲染。针对 GL 渲染性能，后端提供分级数据接口——全球视图返回聚合级数据（500条），城市级视图返回详细数据（1000条），避免大规模数据传输导致页面卡顿。系统具备良好的可扩展性，支持后续接入实时天气API进行动态数据更新。

第4章 可视化设计与整体框架

4.1 可视化设计

系统共设计 14 张核心图表，按三屏架构分配——大屏1稀疏布局（3张 + 数字飞牌，突出 3D 视觉冲击）、大屏2密集布局（5张）、大屏3密集布局（6张）。

（1）大屏1——宏观3D地球总览（图4.1-4.3 + CSS数字飞牌）

序号 图表类型 功能描述 技术方案
图4.1 GL 3D地球 + 污染柱体 以 globe 组件构建 3D 地球，叠加 scatter3D 污染柱体层（柱体高度编码PM2.5浓度，颜色映射EPA等级绿→红），支持鼠标旋转/缩放/倾斜，点击城市联动下钻 globe + scatter3D + visualMap（visualMap3D），displacementMap 地形纹理，Lambert 光照
图4.2 GL 粒子污染传输流线 使用 particle 组件沿大气环流路径渲染 PM2.5 传输粒子流，粒子速度/生命周期/颜色渐变绑定风场数据，WebGL 实时动画 GL particle 系列，dynamicLine 模式，颜色渐变映射传输强度
图4.3 CSS 数字飞牌（四角） 屏幕四角悬浮 CSS 动画数字计数器，实时展示：全球均温、PM2.5均值、覆盖城市总数、今日最高污染城市（滚动名称） CSS @keyframes + countUp.js 数字动画，绝对定位四角布局

（2）大屏2——三维区域对比与多维分析（图4.4-4.8）

序号 图表类型 功能描述 技术方案
图4.4 GL 3D柱状图 X轴六大洲、Z轴六项污染物（CO/O₃/NO₂/SO₂/PM2.5/PM10），Y轴高度编码浓度，支持旋转视角，一键切换"按洲展示"/"按污染物展示"双重视角 GL bar3D，visualMap3D 颜色映射，viewControl 视角切换按钮
图4.5 GL 3D散点图 X轴温度、Y轴湿度、Z轴PM2.5浓度，散点颜色映射大洲，构建"气象-污染"三维特征空间，支持 brush 刷选高亮异常城市群 GL scatter3D，brush 组件（GL兼容），symbolSize 编码数据量
图4.6 旭日图 内圈大洲→中圈国家→外圈城市三级扇区，扇区大小编码PM2.5浓度，颜色映射EPA等级，点击扇区逐级下钻并与大屏1联动 sunburst 系列，nodeClick 事件下钻，visualMap 分段配色
图4.7 平行坐标图 温度/湿度/风速/PM2.5/O₃/NO₂六维平行轴，每条折线为城市样本，颜色区分大洲，brush 刷选联动其他图表 parallel 坐标系，brush 组件，六轴 parallelAxis 配置
图4.8 分组柱状图 六大洲横轴分组，每组6根柱对应六项污染物均值，点击图例高亮某污染物进行跨洲对比，dataZoom 处理标签 bar 系列，dataZoom 滑块，图例交互

（3）大屏3——因果流向析因与预警监控（图4.9-4.14）

序号 图表类型 功能描述 技术方案
图4.9 桑基图 三级因果流向——"气象因子（温度/湿度/风速/气压）→ 大气过程（光化学反应/颗粒物积聚/湿沉降/扩散稀释）→ 污染物（PM2.5/O₃/NO₂/SO₂/CO）"，节点编码贡献度，流向宽编码 r
图4.10 主题河流图 横轴2024.5~2026.5时间轴，河流宽度/颜色编码各污染物浓度趋势，展示季节性波动与跨年演变，timeline 支持自动播放动画 themeRiver 系列，timeline 组件，color 渐变色带
图4.11 相关系数热力图 10×10 Spearman矩阵（4气象+6污染物），对称色带[-1,+1]，单元格标注系数值，点击单元格弹出散点详情 heatmap，visualMap 对称色带，tooltip 详情
图4.12 仪表盘组 左侧EPA（1-5级）+右侧DEFRA（1-10级）双仪表盘，红色指针指示选定城市，灰色基准指针标全球中位数 gauge × 2，不同 axisLine 配色区分两套标准
图4.13 雷达图 五维雷达轴（极端高温日/暴雨日/静稳日/高PM2.5日/高O₃日），多边形对比不同城市极端事件轮廓 radar 系列，indicator 五轴配置，多 series 叠加
图4.14 日历热力图（预警版） 逐日单元格按EPA指数映射绿/黄/橙/红/紫预警色阶，识别污染高发季节与持续重污染事件 calendar + heatmap，visualMap 分段 piecewise 配色

4.2 整体框架

本系统基于 Kaggle 全球天气公开数据集，设计了一个前后端分离的模块化三维可视化分析平台，其核心架构如下：

flowchart TD
    A[Kaggle GlobalWeatherRepository.csv] --> B[数据预处理层 - Python Pandas]
    
    B --> B1[缺失值填充与异常值过滤]
    B --> B2[时空标准化 - WGS-84 + ISO 8601]
    B --> B3[分层编码 - 大洲 / 气候带]
    B --> B4[衍生指标计算 - 极端阈值 / 统计量 / 因果矩阵]
    
    B1 & B2 & B3 & B4 --> C[(结构化数据层 - JSON / CSV)]
    
    C --> D[Python Flask 后端服务层]
    D --> D1[数据查询API - 按国家/城市/时间筛选]
    D --> D2[聚合统计API - 按大洲/气候带/月份聚合]
    D --> D3[关联分析API - Spearman相关系数矩阵]
    D --> D4[因果矩阵API - 桑基图因果流矩阵]
    D --> D5[异常检测API - 极端事件标记]
    
    D1 & D2 & D3 & D4 & D5 --> E[RESTful JSON API - 分级数据传输]
    
    E --> F[前端 ECharts 6.0 + ECharts GL 可视化交互层]
    
    F --> G1[大屏1 - 宏观3D地球总览 / 稀疏布局]
    F --> G2[大屏2 - 三维区域对比与多维分析 / 密集布局]
    F --> G3[大屏3 - 因果流向析因与预警监控 / 密集布局]
    
    G1 --> H1[GL 3D地球 + scatter3D污染柱体 / GL粒子传输流线 / CSS数字飞牌]
    G2 --> H2[GL bar3D三维柱状图 / GL scatter3D三维特征空间 / 旭日图 / 平行坐标图 / 分组柱状图]
    G3 --> H3[桑基图 / 主题河流图 / 相关系数热力图 / 仪表盘组 / 雷达图 / 日历热力图]
    
    G1 --> I[用户交互层 - EventBus事件总线]
    G2 --> I
    G3 --> I
    I --> I1[3D地球城市点击旋转下钻]
    I --> I2[旭日图层级钻取联动]
    I --> I3[timeline时间轴自动播放]
    I --> I4[多图联动刷选与高亮]
    I --> I5[指标切换与视角控制]

架构说明：

  1. 数据预处理层：使用 Python Pandas 对原始CSV进行清洗、标准化、分层编码和衍生指标计算，新增桑基图因果流矩阵构建，输出结构化JSON文件供前端直接消费。

  2. 后端服务层：Flask 提供 RESTful API，包括数据查询接口（按国家/城市/时间范围筛选）、聚合统计接口（按大洲/气候带/月份维度聚合均值/中位数/标准差）、关联分析接口（计算 Spearman 相关系数矩阵）、因果矩阵接口（构建"气象因子→大气过程→污染物"三级因果流数据）和异常检测接口（基于IQR方法标记极端事件）。采用分级数据传输策略，全球视图500条、城市级视图1000条。

  3. 前端可视化交互层：采用 ECharts 6.0 + ECharts GL 构建三屏可视化界面。大屏1（稀疏布局）以 3D 地球为核心，提供沉浸式全球气候-污染三维总览；大屏2（密集布局）整合 3D 柱状图、3D 散点图、旭日图、平行坐标图和分组柱状图，提供跨大洲污染轮廓对比与多维特征空间分析；大屏3（密集布局）聚焦桑基图、主题河流图、相关系数热力图、仪表盘组、雷达图和日历热力图，揭示因果流向并构建预警监控面板。三屏通过 JavaScript EventBus 事件总线联动——大屏1 3D地球城市点击触发大屏2/大屏3数据过滤，旭日图层级钻取触发 3D 地球旋转定位。

  4. 用户交互层：提供 3D 地球旋转下钻、旭日图层级钻取联动、时间轴自动播放、多图联动刷选、指标切换与 GL 视角控制等交互功能，支持用户从全球尺度到城市尺度的多层次自由探索。GL 渲染部分利用 WebGL 硬件加速，Canvas 渲染部分负责 2D 图表，合理分配 GPU 与 CPU 资源。

第5章 预期效果与进度计划

5.1 预期效果

大屏 1（Figure 1）——宏观3D地球气候-污染总览（稀疏布局）

大屏1以单个 3D 地球占据画面主体（约占屏幕70%面积），辅以粒子流线和四角数字飞牌，形成强烈视觉冲击：

  • GL 3D地球 + 污染柱体（主体，图4.1）：深色星空背景下，一颗带有地形纹理（displacementMap）的 3D 地球缓缓自转。全球约500个城市上空悬浮着彩色污染柱体——柱体越高表示 PM2.5 浓度越大，颜色从绿色（EPA=1，优）渐变至深红色（EPA=5，危险）。用户可鼠标旋转地球至任意角度、缩放拉近观察特定区域、倾斜视角获取立体感。地球表面叠加半透明温度热力纹理层，蓝（冷区）→橙（热区）渐变，直观展示全球温度带分布与高污染热点（如南亚、东亚、西非）的空间重叠关系。

  • GL 粒子传输流线（图4.2）：沿大气环流主要路径（如东亚冬季风路径、撒哈拉沙尘传输带），彩色粒子群以动画形式流动，粒子颜色由青（弱）到紫红（强）渐变表示 PM2.5 传输强度，直观说明"污染无国界"的跨区域传输特征。

  • CSS 数字飞牌（图4.3，四角）：左上角大字体显示"全球均温：15.3°C"，左下角"PM2.5均值：28.4 μg/m³"，右上角"覆盖城市：500+"，右下角滚动显示"今日最高污染：Delhi, India"。数字以 CSS countUp.js 动画滚动入场，增强数据看板的实时感。

点击地球上任意城市柱体，地球自动旋转使该城市面向用户，同时大屏2和大屏3加载该城市的详细分析数据。

大屏 2（Figure 2）——三维区域对比与多维特征分析（密集布局，3×2网格）

大屏2以 3×2 密集网格布局，左侧两个 3D 图占比最大，右侧和下方为辅图：

  • GL 3D柱状图（左上大块，图4.4）：一片由彩色柱体构成的"城市天际线"——X轴排列六大洲（Asia/Europe/Africa/N.America/S.America/Oceania），Z轴排列六项污染物，柱体高度代表浓度。默认"按洲展示"视角下各洲污染轮廓一目了然（亚洲PM2.5和NO₂柱体显著高耸），点击切换按钮后转为"按污染物展示"视角，同种污染物的跨洲柱体并列对比。支持鼠标旋转探索任意角度。

  • GL 3D散点图（左下大块，图4.5）：X轴温度、Y轴湿度、Z轴PM2.5的三维特征空间，每个散点代表一个城市，颜色按大洲区分。预期发现：高温-高湿-中等PM2.5区域集中了东南亚和南亚城市群，低温-低湿-低PM2.5区域为北欧和北美城市。支持 brush 框选异常城市群并联动其他图表高亮。

  • 旭日图（右上，图4.6）：从内到外依次为六大洲→各国→各城市的三级扇区环。扇区面积编码 PM2.5 浓度（面积越大污染越重），颜色编码 EPA 等级。用户点击"Asia"扇区展开亚洲各国→点击"China"展开中国各城市，实现无缝层级下钻。

  • 平行坐标图（右中，图4.7）：温度/湿度/风速/PM2.5/O₃/NO₂六条平行轴，约500条半透明折线穿越六轴，颜色区分大洲。用户可以清晰地观察热带城市（红/橙色线）集中在高温-高湿轴段，而温带城市（蓝/绿色线）分布更分散。支持 brush 在任意轴上拖动选择范围，联动其他图表。

  • 分组柱状图（右下，图4.8）：六大洲分组的标准化对比柱状图，每组6根柱对应六项污染物。点击"PM2.5"图例会高亮所有大洲的PM2.5柱，用户可快速对比跨洲差异。

大屏 3（Figure 3）——因果流向析因与预警监控（密集布局，2×3网格）

大屏3以 2×3 密集网格布局，聚焦"为什么污染"的因果归因：

  • 桑基图（左上大块，图4.9）：三级节点从左向右流动——最左列"气象因子"（温度/湿度/风速/气压 4节点）→ 中间列"大气过程"（光化学反应/颗粒物积聚/湿沉降/扩散稀释 4节点）→ 最右列"污染物"（PM2.5/O₃/NO₂/SO₂/CO 5节点）。流向带宽正比于 Spearman |r| 值。预期可见：温度→光化学反应→O₃的宽流向（|r|≈0.6），风速→扩散稀释→PM2.5的中等流向（|r|≈0.4），湿度→湿沉降→PM2.5的窄流向（|r|≈0.2）。鼠标悬停各节点显示贡献度百分比。

  • 主题河流图（右上横跨，图4.10）：横轴覆盖 2024年5月至2026年5月，多条彩色"河流"平行流动，河流宽度和颜色代表各污染物浓度的时序变化。支持 timeline 自动播放按钮，点击后河流自左向右流动动画，展示两年间污染物的季节性涨落（如冬季PM2.5河流明显膨胀、夏季O₃河流增宽）。

  • 相关系数热力图（左中，图4.11）：10×10 Spearman 矩阵，深蓝色（r≈-0.6，如风速-PM2.5）到深红色（r≈+0.7，如温度-O₃），对称色带清晰展示"谁与谁关联"。点击任意单元格（如温度-O₃）弹出该对变量的散点详情图。

  • 仪表盘组（右中，图4.12）：左右并排两个仪表盘，左侧EPA仪表盘（绿黄橙红紫五色分区，1-5级刻度），右侧DEFRA仪表盘（1-10级精细刻度）。选定"Beijing"时，EPA指针指向红色区域（等级4），DEFRA指针指向等级8，灰色基准指针标注全球中位数（EPA≈2）。

  • 雷达图（左下，图4.13）：五维雷达轴（极端高温日数/暴雨日数/静稳日数/高PM2.5日数/高O₃日数），叠加3-5个代表性城市的多边形。预期 Delhi 在"高PM2.5日数"和"极端高温日数"两个维度上显著突出，而 London 在"暴雨日数"维度偏高。

  • 日历热力图（右下，图4.14）：2025年全年365个单元格排列，颜色从绿（EPA=1-2）渐变至黄（EPA=3）、橙（EPA=4）、红（EPA=5）。快速识别污染高发季节——如北京冬季（12-2月）红色区块密集、夏季（6-8月）以黄绿为主。

5.2 进度计划

5.2.1 时间安排

结合项目考核要求及标准，本团队进行了如下项目进度安排设计：

周次 主要任务 交付物
第一周 团队组建，讨论选题，明确项目方向，确定选题，下载数据并进行初步探索分析，撰写项目建议书 项目建议书完整稿
第二周 数据清洗与预处理（缺失值填充、异常值过滤、时空标准化、分层编码），数据库/JSON数据结构设计，完成 Spearman 相关系数矩阵的预计算，桑基图因果流矩阵构建，衍生指标计算 清洗后数据集 + 统计分析结果
第三周 后端Flask API开发（数据查询、聚合统计、关联分析、因果矩阵、异常检测五大API接口）与前端ECharts 6.0 + GL界面设计实现（搭建三屏深色主题布局框架，完成GL 3D地球+污染柱体+粒子流线、GL bar3D/scatter3D、旭日图、平行坐标图、分组柱状图、桑基图、主题河流图、相关系数热力图、仪表盘组、雷达图、日历热力图等全部14张图表的WebGL/Canvas动态渲染），前后端数据接口对接，交互功能开发（3D地球旋转下钻、旭日图层级钻取、timeline自动播放、多图刷选联动、悬停详情等） 完整可交互三维可视化系统原型

表5.1 时间安排

5.2.2 团队分工

根据项目具体需求，本团队进行讨论做出了明确的分工。在项目具体实施过程中会有额外的任务调整。

人员 主要任务
贺文轩（组长） 【复杂困难任务】 统筹安排与项目进度管理；前端GL 3D复杂图表实现——GL 3D地球+scatter3D污染柱体（图4.1）、GL粒子传输流线（图4.2）、GL bar3D三维柱状图（图4.4）、GL scatter3D三维散点图（图4.5）、桑基图（图4.9）；数据复杂指标计算——Spearman相关系数矩阵预计算、桑基图因果流矩阵构建、衍生指标构建（极端高温阈值、暴雨阈值、静稳天气标识）；EventBus事件总线跨屏联动架构设计与实现
石青松 【中等难度任务】 获取Kaggle数据集；数据清洗与预处理——缺失值填充、异常值过滤（IQR方法）、时空标准化（WGS-84 + ISO 8601）、分层编码（大洲/气候带）；数据库/JSON结构化数据设计；前端中等图表实现——旭日图（图4.6）、分组柱状图（图4.8）、主题河流图（图4.10）
程康凌 【中等难度任务】 GL与Canvas渲染方案技术选型与性能评估（WebGL帧率测试、数据量级/渲染策略权衡）；后端Flask API五大接口开发——数据查询接口、聚合统计接口、关联分析接口、因果矩阵接口、异常检测接口；前后端数据分级传输接口对接与联调
弋君豪 【简单任务】 项目建议书编写与文档维护；前端界面设计与响应式布局——HTML5 + CSS3三屏深色主题框架搭建（稀疏/密集布局切换）、顶部导航栏与级联筛选控件实现、CSS Grid/Flexbox响应式适配；前端基础图表实现——CSS数字飞牌（图4.3）、日历热力图（图4.14）、仪表盘组（图4.12）
李兴杰 【中等难度任务】 数据基础统计量计算——各维度均值、中位数、标准差、IQR等统计量汇总；前端中等图表实现——平行坐标图（图4.7）、相关系数热力图（图4.11）、雷达图（图4.13）；交互功能开发——3D地球旋转下钻联动、旭日图层级钻取联动、timeline时间轴自动播放、多图刷选高亮联动、GL视角控制与悬停详情弹窗

表5.2 团队分工

参考文献

[1] Kaggle. Global Weather Repository (Daily Updating). https://www.kaggle.com/datasets/nelgiriyewithana/global-weather-repository

[2] World Health Organization. WHO Global Air Quality Guidelines: Particulate Matter (PM2.5 and PM10), Ozone, Nitrogen Dioxide, Sulfur Dioxide and Carbon Monoxide. Geneva: WHO, 2021.

[3] IPCC. Climate Change 2023: Synthesis Report. Contribution of Working Groups I, II and III to the Sixth Assessment Report of the Intergovernmental Panel on Climate Change. Geneva: IPCC, 2023.

[4] U.S. Environmental Protection Agency. Air Quality Index (AQI) Basics. https://www.airnow.gov/aqi/aqi-basics/

[5] UK Department for Environment, Food & Rural Affairs. Daily Air Quality Index. https://uk-air.defra.gov.uk/air-pollution/daqi

[6] ECharts 官方文档. Apache ECharts 6.0. https://echarts.apache.org/

[7] ECharts GL 官方文档. Apache ECharts GL. https://echarts.apache.org/zh/option-gl.html

[8] 李芳. 基于 Tableau 的区域气候趋势数据可视化研究. 计算机应用与软件, 2020, 37(8): 45-51.

[9] Zhang Y, Li X, Wang H. Urban PM2.5 Spatiotemporal Monitoring System Based on D3.js. Environmental Modelling & Software, 2022, 148: 105-118.

[10] Liu J, Chen W, Zhao T. Machine Learning Approaches for Meteorological-Driven Air Pollution Prediction: A Comparative Study. Atmospheric Environment, 2023, 295: 119-131.

[11] 陈伟, 王磊, 张明. 基于 ECharts 的城市环境质量综合可视化平台设计. 地理信息世界, 2022, 29(3): 78-85.

文档版本： v2.0
编写日期： 2026年5月
适用范围： 四川大学锦江学院《数据可视化》课程期末项目

2
版权归属： yanhanv
本文链接： http://yanhanv.com/archives/shu-ju-ke-shi-hua-xiang-mu-jian-yi-shu
许可协议： 本文使用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议授权

评论区