第一部分：实验背景

1.1 实验目的

本实验基于之前实验加工完成的用户画像统计表（user_profile_stats），完成浏览器用户画像分析大屏的静态布局设计、数据接入与交互配置。通过本实验，掌握：

- 根据用户画像分析需求，合理设计大屏的信息结构与叙事逻辑

- 理解不同图表类型在用户画像分析中的适用场景与分析价值

- 使用蓝图编辑器完成数据接入与筛选器联动配置

- 配置大屏切换、地图点击联动等高级交互功能

1.2 实验环境

- 实验平台：助睿在线实验平台 https://lab.guilian.cn/

- 数据科学平台：助睿数智（Uniplore）

- 可视化工具：助睿Max（数据大屏）

- 数据来源：团队私有数据库（MySQL）

1.3 实验数据

本实验使用上一阶段加工完成的`user_profile_stats` 表，表结构如下：

| 字段 | 类型 | 说明 |

|---|---|---|

| browser_name | VARCHAR(50) | 浏览器名称 |

| gender | VARCHAR(10) | 性别 |

| age | INT | 年龄 |

| age_group | VARCHAR(10) | 年龄段 |

| edu | VARCHAR(50) | 学历 |

| job | VARCHAR(50) | 职业 |

| income | VARCHAR(50) | 收入 |

| city_type | VARCHAR(10) | 居住地类型 |

| province | VARCHAR(50) | 省份 |

| user_count | INT | 用户数 |

---

第二部分：实验步骤

2.1.1 整体设计方案

大屏包含以下核心模块：

| 模块 | 子模块 | 指标项 | 组件 |

|---|---|---|---|

| 数据概览 | 用户概况 | 覆盖用户数、平均年龄、本科以上占比、中高收入占比 | 指标卡 |

| 基本信息 | 人口属性 | 性别分布、年龄分布、学历分布、职业分布、收入分布 | 饼图/柱状图 |

| 地域分布 | 地理信息 | 城市vs乡镇分布、用户省份分布、省份TOP5 | 饼图/地图/列表 |

| 筛选器 | 交互控制 | 浏览器选择 | 下拉多选 |

2.1.2 用户省份分布（中国地图）

1. 添加"基础平面地图"组件，设置好大小、位置

2. 添加"区域热力层"子组件

3. 配置颜色渐变、边界线宽、高亮样式等属性

2.1.3 核心指标

1. 添加4个"数字翻牌器"纵向排列

2. 每个翻牌器使用"单张图片"组件设置背景（背景图链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/mbg.png）

3. 分别配置：用户总数、平均年龄、本科及以上占比、中高收入占比

2.1.4 用户数TOP5省份排行榜

1. 添加"单张图片"组件作为排行榜区域背景（背景图链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/enrollment-data/top-list-bg.png）

2. 添加"通用标题"组件

3. 添加"轮播列表"组件，调整行高、列宽、字体、交替行背景色等样式

2.1.5 各维度分布图表

| 维度 | 图表类型 | 说明 |

|---|---|---|

| 性别分布 | 基础饼图 | 男/女用户占比 |

| 年龄段分布 | 基础柱图 | 按年龄段统计用户数 |

| 学历分布 | 水平基础柱图 | 按学历层次统计用户数 |

| 职业分布 | 基础柱图 | 按职业类别统计用户数 |

| 收入分布 | 水平基础柱图 | 按收入段统计用户数 |

| 居住地类型分布 | 轮播饼图 | 城市/城郊/乡村用户占比 |

2.1.6 筛选器配置

1. 在大屏顶部右侧添加"下拉选择"组件

2. 重命名为"浏览器筛选"

3. 配置6个浏览器选项（IE浏览器、Chrome浏览器等）

4. 设置默认选中"IE浏览器"

2.2.1 前置准备：添加年龄字段

1. 在团队私有数据库中执行SQL，重建 `user_profile_stats` 表，增加 `age` 字段

2. 修改"用户画像表加工"转换流：

- 修改排序记录组件，增加 age 字段的升序排序

- 修改分组组件，分组字段增加 age

- 执行转换流

2.2.2 组件导出到蓝图编辑器

将以下组件依次导出到蓝图编辑器：

- 浏览器筛选器（下拉多选）

- 性别分布饼图

- 年龄段分布柱状图

- 学历分布条形图

- 职业分布柱状图

- 收入分布柱状图

- 居住地类型饼图

- 用户省份分布地图

- 省份排行榜（轮播列表）

- 核心指标卡（总用户数、平均年龄、中高收入占比）

2.2.3 添加浏览器参数接收节点

1. 添加"并行数据处理"节点，重命名为"浏览器参数接收"

2. 添加两个处理方法：

- 方法一（页面加载时执行）：设置基础URL

- 方法二（筛选器变化时执行）：接收浏览器参数，存储到全局变量 `window.GLOBAL_SELECTED_BROWSER`

2.2.4 添加维度数据SQL请求节点

1. 添加"SQL请求"节点，重命名为"维度数据SQL请求"

2. 编写SQL，使用 UNION ALL 一次性查询所有维度数据（性别、年龄、学历、职业、收入、居住地类型、省份）

3. 输出格式：`(dimension_type, name, value)`

2.2.5 添加核心指标SQL请求节点

1. 添加"SQL请求"节点，重命名为"核心指标SQL请求"

2. 编写SQL，查询四个核心指标（总用户数、平均年龄、本科及以上占比、中高收入占比）

3. 使用 UNION ALL 输出多行格式

2.2.6 添加维度数据分发节点

1. 添加"并行数据处理"节点，重命名为"数据分发"

2. 为每个图表添加处理方法：

- 分支1：性别分布（饼图）- 过滤 dimension_type='gender'

- 分支2：年龄段分布（柱状图）- 过滤 dimension_type='age'，按年龄段排序

- 分支3：学历分布（条形图）- 过滤 dimension_type='edu'，按学历层次排序

- 分支4：职业分布（柱状图）- 过滤 dimension_type='job'

- 分支5：收入分布（柱状图）- 过滤 dimension_type='income'，按收入金额排序

- 分支6：居住地类型分布（饼图）- 过滤 dimension_type='city_type'

- 分支7：省份排行榜TOP5 - 过滤 dimension_type='province'，取前5条

2.2.7 添加核心指标分发节点

1. 添加"并行数据处理"节点，重命名为"核心指标分发"

2. 添加4个分支，分别过滤 total_users、avg_age、high_edu_ratio、high_income_ratio

3. 每个分支输出单个数值给对应指标卡

2.2.8 连接节点

按照蓝图连接示意图，依次连接所有节点：

- 页面加载 → 浏览器参数接收（输入）

- 浏览器筛选器 → 浏览器参数接收（输入）

- 浏览器筛选器 → 维度数据SQL请求（执行SQL）

- 浏览器筛选器 → 核心指标SQL请求（执行SQL）

- 维度数据SQL请求（执行成功） → 维度数据分发（输入）

- 核心指标SQL请求（执行成功） → 核心指标分发（输入）

- 维度数据分发（分支1-8） → 各维度图表组件（导入数据接口）

- 核心指标分发（分支1-4） → 四个核心指标卡（导入数据接口）

2.3.1 配置大屏切换

1. 添加Tab列表组件，设置行数为1，列数为2

2. 将背景色、选中背景色、悬浮背景色的透明度设置为0（透明）

3. 设置两列数据，id分别为1、2，content为空

4. 将"市场分析"组、"用户画像"组、Tab列表组件导出到蓝图编辑器

5. 添加"分支判断"节点，判断条件：`return data.id == 1;`

6. 满足分支：设置"市场分析组"显示，"用户画像组"隐藏

7. 不满足分支：设置"市场分析组"隐藏，"用户画像组"显示

2.3.2 配置地图省份点击联动

1. 提取地区名称（并行数据处理）：

- 接收地图点击事件输出的 data 对象

- 通过映射表将省份全称转换为数据表中的简称

- 存储到全局变量 `window.globalProvinceName`

2. 省份核心指标查询（SQL请求）：

- 根据 `window.GLOBAL_SELECTED_BROWSER` 和 `window.globalProvinceName` 查询数据

- 使用 UNION ALL 输出四个核心指标

3. 省份核心指标分发（并行数据处理）：

- 按 name 字段过滤，将每个指标单独输出

- 分别连接到四个核心指标卡

2.3.3 地图热力层根据用户数渲染颜色

1. 提取 adcode 映射表（并行数据处理）：

- 从地图组件内置的 GeoJSON 中提取每个省份的 adcode 和标准名称

- 建立映射表 `globalProvinceAdcode`

2. 查询所有省份的用户数（SQL请求）：

- 根据当前选中的浏览器，统计每个省份的用户总数

- 按用户数降序排列

3. 地图数据映射（并行数据处理）：

- 将 SQL 查询结果中的省份名称与 adcode 映射表匹配

- 输出格式 `{ name, value, area_id }`

4. 导入地图热力层：

- 将映射后的数据导入"区域热力层"子组件的"导入热力值数据接口"

第三部分：实验结果

3.1 静态布局完成结果

- ✅ 大屏整体布局完成，包含10个功能模块

- ✅ 所有图表组件配置完成，样式统一

- ✅ 图层管理完成，市场分析与用户画像两组内容共存

3.2 数据接入完成结果

- ✅ 所有图表成功接入真实数据

- ✅ 浏览器筛选器联动正常，切换浏览器时所有图表自动刷新

- ✅ 数据格式正确，各图表展示符合预期

3.3 交互功能完成结果

- ✅ 大屏切换功能正常，点击tab可在市场分析与用户画像之间切换

- ✅ 地图省份点击联动正常，点击省份后核心指标卡自动更新

- ✅ 地图热力层渲染正常，颜色深浅反映用户数多少

3.4 数据验证结果

- 总用户数：[根据实际查询结果填写]

- 平均年龄：[根据实际查询结果填写]

- 本科及以上占比：[根据实际查询结果填写]

- 中高收入占比：[根据实际查询结果填写]

- 用户数TOP5省份：[根据实际查询结果填写]

---

第四部分：问题与解决

4.1 问题1：计算器组件plus函数报错

问题描述：

```

The 'plus' function only works on numeric data and Strings.

```

问题原因：

- 未在「计算」列选择具体的计算函数，Hop默认尝试加法运算

- 字段A选错（选了session_id而非时间字段）

- 类型不匹配导致加法运算失败

解决方案：

- 在「计算」列选择「日期 A 的一天中的小时」函数

- 字段A选择 `session_start_time`（会话开始时间字段）

- 值类型设置为 Integer

解决结果：Pipeline成功运行，处理118,293条数据，错误数为0。

4.2 问题2：省份名称不匹配

问题描述：地图点击后返回的省份名称是全称（如"江苏省"、"广西壮族自治区"），但数据表中存储的是简称（"江苏"、"广西"），导致SQL查询无结果。

解决方案：

- 添加省份名称映射处理

- 建立特殊映射表处理直辖市、自治区、特别行政区

- 通用处理：去除末尾的"省"、"自治区"、"市"

解决结果：所有省份点击均能正确查询到对应数据。

4.3 问题3：地图热力层颜色不显示

问题描述：地图组件加载后，省份颜色没有根据用户数渲染深浅。

问题原因：缺少adcode 映射，热力层数据格式不正确。

解决方案：

- 从地图GeoJSON中提取 adcode 映射表

- 将省份名称与 adcode 匹配，生成 `{ name, value, area_id }` 格式

- 导入到区域热力层的"导入热力值数据接口"

解决结果：地图热力层正常渲染，颜色深浅正确反映用户数多少。

---

第五部分：实验总结

5.1 收获

1. 大屏设计能力：掌握了数据大屏的信息架构设计，理解了不同图表类型的适用场景

2. 数据接入能力：学会了使用蓝图编辑器进行数据接入，掌握了并行数据处理、SQL请求、数据分发等核心节点的使用

3. 交互配置能力：掌握了大屏切换、地图点击联动、热力层渲染等高级交互功能的配置方法

4. 问题排查能力：学会了分析和解决ETL流程、数据接入、交互配置中的常见问题

5.2 不足

1. 对蓝图编辑器的高级功能（如条件分支、循环处理）了解还不够深入

2. SQL查询优化能力有待提升，当前使用UNION ALL的方式在数据量大时可能性能不足

3. 大屏视觉设计还可以进一步优化，如动画效果、配色方案等

5.3 改进方向

1. 深入学习蓝图编辑器的所有节点功能，掌握更复杂的交互逻辑

2. 学习SQL性能优化技巧，提升大数据量下的查询效率

3. 学习数据可视化设计原则，提升大屏的视觉表现力和用户体验