浏览器市场与用户画像分析-数据加工(2)+市场分析数据大屏制作
浏览器市场与用户画像分析–数据加工（2）+市场分析数据大屏制作
一、实验背景
1.1实验目的
本报告依据三个浏览器市场分析实验手册整理实验内容，覆盖数据加工、数据大屏静态布局制作和大屏数据接入三个环节。文档保留手册中的实验步骤文字描述，并按原始顺序呈现步骤中的文字、表格、代码块和被抽取保留的图片。
1.2实验环境
·实验平台：助睿在线实验平台https://lab.guilian.cn/
本次实验使用助睿数智（Uniplore）作为一站式数据科学平台。该平台覆盖从数据接入、ETL处理、机器学习建模到可视化展示的全链路零代码功能，适用于数据分析教学与企业数据加工场景。
助睿数智官网为https://www.uniplore.com/
·数据处理：助睿 ETL 数据集成平台
·建模平台：助睿 AI 人工智能平台
·数据规模：1000 用户，800 万 + 条行为记录，约 825MB
1.3实验数据
本实验基于上个实验《浏览器用户行为分析与流失预测–数据加工》产出的数据，以及原始数据demographic用户属性表。
上个实验已输出的数据：
·daily_browser_detail：用户–日–浏览器–小时明细表（将在本实验第4.1节中输出）
·browser_coverage：浏览器市场覆盖率统计表
·browser_hourly：浏览器时段活跃统计表
二、实验内容
1. 浏览器市场与用户画像分析–数据加工（2）
1 实验目的
本实验基于“用户–日–浏览器–小时”明细表，完成数据大屏所需的各项统计表加工，包括：
•浏览器市场格局统计（覆盖率、使用时长）
•浏览器周活跃趋势统计
•浏览器使用频率分布统计
•用户浏览器使用数量分布统计
•浏览器工作日与周末使用对比统计
•用户画像统计（性别、年龄、学历、职业、收入、居住地类型、省份分布）
2 实验环境
•实验平台：助睿在线实验平台https://lab.guilian.cn/
本次实验使用助睿数智（Uniplore）作为一站式数据科学平台。该平台覆盖从数据接入、ETL处理、机器学习建模到可视化展示的全链路零代码功能，适用于数据分析教学与企业数据加工场景。
助睿数智官网为https://www.uniplore.com/
•数据处理：助睿 ETL 数据集成平台
•建模平台：助睿 AI 人工智能平台
•数据规模：1000 用户，800 万 + 条行为记录，约825MB
3 实验数据
本实验基于上个实验《浏览器用户行为分析与流失预测–数据加工》产出的数据，以及原始数据demographic用户属性表。
上个实验已输出的数据：
•daily_browser_detail：用户–日–浏览器–小时明细表（将在本实验第4.1节中输出）
•browser_coverage：浏览器市场覆盖率统计表
•browser_hourly：浏览器时段活跃统计表
4 整体分析框架
4.1 我们要回答什么业务问题？
在制作数据大屏之前，我们需要先明确一个问题：大屏上要展示什么？
大屏的每个图表、每个数字，都需要有对应的数据来源。我们不能在大屏上直接查询原始明细表（ behavior_events），因为：
1.原始明细表数据量大，查询慢，影响大屏加载速度
2.大屏需要的是聚合后的统计结果，不是原始明细
3.多个图表可能共用同一份聚合数据，提前加工可以避免重复计算
因此，在设计大屏之前，我们首先需要明确：我们要通过数据分析回答哪些业务问题？
|
业务问题 |
为什么重要 |
|
哪个浏览器用户最多？ |
了解市场领导者，判断自身产品的市场地位 |
|
哪个浏览器用户用得最久？ |
用户数多不代表粘性高，使用时长方能反映真实依赖度 |
|
用户活跃度在增长还是下降？ |
判断产品生命周期，及时发现衰退信号 |
|
用户什么时候最活跃？ |
优化推送和运营时机，在正确时间触达用户 |
|
用户是重度使用还是偶尔打开？ |
区分核心用户和边缘用户，制定差异化运营策略 |
|
用户同时用几个浏览器？ |
了解用户忠诚度，判断是否存在被竞品替代的风险 |
|
用户还用什么其他浏览器？ |
识别主要竞争对手，制定针对性竞争策略 |
|
工作日和周末使用习惯有何不同？ |
区分工作场景和娱乐场景，优化产品功能 |
|
核心用户是谁？（性别、年龄、职业） |
明确目标用户群体，指导产品设计和营销方向 |
|
用户的教育水平如何？ |
影响产品复杂度设计，高学历用户可能接受更复杂的功能 |
|
用户的收入水平如何？ |
影响商业化策略，高收入用户付费意愿更强 |
|
用户分布在哪里？（城市、省份） |
指导区域市场拓展和资源投放 |
4.2 选择哪些分析维度来回答这些问题？
根据上述业务问题，我们可以分为2个部分：市场分析与用户画像，这2个部分可以选择以下分析维度：
大屏一：浏览器市场行为分析
|
维度 |
回答的业务问题 |
核心指标 |
|
市场格局 |
哪个浏览器用户最多？哪个用得最久？ |
用户数、使用时长占比、人均时长 |
|
周活跃趋势 |
用户活跃度在增长还是下降？ |
每周活跃用户数 |
|
时段偏好 |
用户什么时候最活跃？ |
24小时活跃分布 |
|
使用频率 |
用户是重度还是轻度使用？ |
轻/中/重度用户占比 |
|
浏览器使用数量 |
用户同时用几个浏览器？ |
1种/2种/3种及以上用户占比 |
|
竞品重叠 |
用户还用什么其他浏览器？ |
同时使用两个浏览器的用户数 |
|
工作日vs周末 |
工作和娱乐时使用习惯有何不同？ |
工作日/周末使用时长对比 |
大屏一：浏览器用户画像分析
|
维度 |
回答的业务问题 |
核心指标 |
|
性别分布 |
男女用户比例如何？ |
男性/女性用户数及占比 |
|
年龄分布 |
哪个年龄段的用户最多？ |
各年龄段用户数及占比 |
|
学历分布 |
用户教育水平如何？ |
各学历层次用户数及占比 |
|
职业分布 |
哪些职业的用户最多？ |
各职业用户数及占比 |
|
收入分布 |
用户收入水平如何？ |
各收入段用户数及占比 |
|
居住地类型分布 |
城市用户还是乡镇用户多？ |
城市/城郊/乡村用户占比 |
|
地域分布 |
用户分布在哪些省份？ |
各省份用户数 |
4.3 需要加工哪些目标表？
根据上述分析维度，我们反推出需要加工的目标表：
大屏一目标表：
|
目标表 |
对应维度 |
数据来源 |
|
browser_overview |
核心指标 |
daily_browser_detail |
|
browser_coverage |
市场格局 |
daily_browser_detail |
|
browser_weekly_active |
周活跃趋势 |
daily_browser_detail |
|
browser_hourly |
时段偏好 |
daily_browser_detail |
|
browser_frequency_stats |
使用频率 |
daily_browser_detail |
|
browser_multi_usage |
浏览器使用数量 |
daily_browser_detail |
|
browser_cooccurrence |
竞品重叠 |
daily_browser_detail |
|
browser_weekday_weekend |
工作日vs周末 |
daily_browser_detail |
大屏二目标表：
|
目标表 |
对应维度 |
数据来源 |
|
user_profile_stats |
性别、年龄、学历、职业、收入、省份、居住地类型 |
demographic、daily_browser_detail |
4.4 目标表与数据来源关系
暂时无法在飞书文档外展示此内容
5 各目标表加工说明
|
目标表 |
用途 |
加工逻辑 |
数据来源 |
|
browser_coverage |
回答“哪个浏览器用户最多？哪个用得最久？” |
按 browser_name 分组，统计用户数、总时长、人均时长 |
daily_browser_detail（已在上个实验输出） |
|
browser_hourly |
回答“用户什么时候最活跃？” |
按 browser_name、hour 分组，统计活跃用户数 |
daily_browser_detail（已在上个实验输出） |
|
browser_weekly_active |
回答“用户活跃度在增长还是下降？” |
按 browser_name 和周编号分组，统计每周活跃用户数 |
daily_browser_detail |
|
browser_frequency_stats |
回答“用户是重度还是轻度使用？” |
计算每个用户的周使用时长，按阈值（轻度<3h、中度3-10h、重度>10h）划分等级，再按浏览器分组统计 |
daily_browser_detail |
|
browser_multi_usage |
回答“用户同时用几个浏览器？” |
统计每个用户使用多少种不同的浏览器，按1种、2种、3种及以上分组 |
daily_browser_detail |
|
browser_cooccurrence |
回答“用户还用什么其他浏览器？” |
统计每对浏览器被同一用户使用的人数 |
daily_browser_detail |
|
browser_weekday_weekend |
回答“工作日和周末使用习惯有何不同？” |
按浏览器和日期类型（工作日/周末）分组，统计人均使用时长 |
daily_browser_detail |
|
user_profile_stats |
回答“核心用户是谁？用户教育/收入水平如何？”… |
按性别、年龄、学历、职业、收入、省份、居住地类型分组统计 |
demographic、daily_browser_detail |
6 实验步骤
6.1 准备用户–日–浏览器–小时明细表
上个实验中的“互联网用户行为日志数据清洗抽取”转换流已经包含了生成明细数据的完整逻辑，但只输出了分支A和B（browser_coverage和browser_hourly）。我们需要将其复制一份，改为输出明细表，作为本实验后续加工的基础。
6.1.1 创建用户_日_浏览器_小时明细表
首先，我们先在团队私有数据库中创建用于存放用户–日–浏览器–小时明细表的数据表
打开上个实验创建的项目“互联网用户行为日志”
新建转换流“创建用户_日_浏览器_小时明细表”，拖入“执行一个SQL脚本”组件
双击“执行一个SQL脚本”组件，数据库连接选择“团队私有数据库”，并输入以下SQL：
|
CREATE TABLE IF NOT EXISTS `daily_browser_detail` ( `user_id` VARCHAR(50) NOT NULL COMMENT ‘用户ID’, `usage_date` DATE NOT NULL COMMENT ‘使用日期‘, `browser_name` VARCHAR(50) NOT NULL COMMENT ‘浏览器名称‘, `hour` TINYINT NOT NULL COMMENT ‘小时‘, `total_duration_sec` INT NOT NULL COMMENT ‘总使用时长(秒)’, `active_count` INT NOT NULL COMMENT ‘活跃次数‘ ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT=’用户_日_浏览器_小时明细表‘; |
点击“运行”按钮，执行转换流
6.1.2 复制转换流
在上个实验的项目中，找到“互联网用户行为日志数据清洗抽取”转换流，右键选择“复制”
右键根目录，点击“粘贴”
粘贴后右键重命名为“输出用户日浏览器小时明细表”
这里注意：上个实验中“排序记录 1”组件仅按照process_name 升序排序，而分组组件的分组字段是：user_id、usage_date、process_name、hour，所以，需要更正“排序记录 1”组件的排序字段与分组组件的分组字段一致，否则会出现多条重复数据
6.1.3 浏览器名称映射
在分组组件后添加“值映射”组件，“值映射”组件连接到原分支A的分组 1组件、复制发送到原分支B的排序记录 2组件
值映射组件按照以下添加映射
|
进程名 |
说明 |
|
iexplore.exe |
IE浏览器 |
|
360chrome.exe |
360极速 |
|
360se.exe |
360se |
|
chrome.exe |
|
|
sogouexplorer.exe |
搜狗 |
|
QQBrowser.exe |
QQ浏览器 |
这里需要注意：上个实验的“4.5.3 过滤记录：筛选进程为主要浏览器的数据”步骤中
•如果匹配条件是 process_name IN LIST “iexplore.exe;360chrome.exe;360se.exe;chrome.exe;sogouexplorer.exe;QQBrowser.exe”，则继续下一步骤
•如果匹配条件与以上不同，则删除匹配值中的EXCEL.EXE、WINWORD.EXE、AlilM.exe，因为这3个不是浏览器
另外，转换流中的分组组件中聚合字段的聚合类型是“个数”的，需要改成“统计不同值的数量(N)”，并在分支A的“分组 1”组件前添加排序记录组件，按 process_name 升序排序
6.1.5 添加表输出组件
拖拽“表输出”组件到画布中，值映射组件连接到“表输出”组件
双击“表输出”组件，配置如下：
•数据库连接：选择“团队私有数据库”
•目标表：daily_browser_detail
•勾选“裁剪表”，清空原有数据
•勾选“指定数据库字段”，建立字段映射
6.1.6 执行转换流
击“运行”按钮，执行转换流
6.2 创建目标数据表
在团队私有数据库中创建本实验需要输出的目标表
新建转换流“创建浏览器大屏分析目标数据表”，拖拽“执行一个SQL脚本”组件
双击“执行一个SQL脚本”组件，数据库连接选择“团队私有数据库”，并输入以下SQL，使用DROP TABLE可以避免需要重新建表时语句报错：
|
— 1. 核心指标概览表 DROP TABLE IF EXISTS `browser_overview`; CREATE TABLE `browser_overview` ( `metric_name` VARCHAR(50) NOT NULL COMMENT ‘指标名称‘, `metric_value` DECIMAL(12,2) NOT NULL COMMENT ‘指标值‘ ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT=’核心指标概览表‘; — 2. 各浏览器周活跃趋势表 DROP TABLE IF EXISTS browser_weekly_active; CREATE TABLE `browser_weekly_active` ( `browser_name` VARCHAR(50) NOT NULL COMMENT ‘浏览器名称‘, `week_range` VARCHAR(20) NOT NULL COMMENT ‘周日期范围‘, `active_user_count` INT NOT NULL COMMENT ‘活跃用户数‘ ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT=’各浏览器周活跃趋势表‘; — 3. 浏览器使用频率分布表 DROP TABLE IF EXISTS browser_frequency_stats; CREATE TABLE `browser_frequency_stats` ( `browser_name` VARCHAR(50) NOT NULL COMMENT ‘浏览器名称‘, `usage_level` VARCHAR(10) NOT NULL COMMENT ‘使用等级‘, `user_count` INT NOT NULL COMMENT ‘用户数‘ ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT=’浏览器使用频率分布表‘; — 4. 用户使用浏览器数量分布表 DROP TABLE IF EXISTS browser_multi_usage; CREATE TABLE `browser_multi_usage` ( `browser_count` VARCHAR(10) NOT NULL COMMENT ‘使用浏览器数量‘, `user_count` DECIMAL(5,2) NOT NULL COMMENT ‘用户数量‘ ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT=’用户使用浏览器数量分布表‘; — 5. 浏览器工作日周末对比表 DROP TABLE IF EXISTS browser_weekday_weekend; CREATE TABLE `browser_weekday_weekend` ( `browser_name` VARCHAR(50) NOT NULL COMMENT ‘浏览器名称‘, `day_type` VARCHAR(10) NOT NULL COMMENT ‘工作日/周末‘, `avg_duration_sec` INT NOT NULL COMMENT ‘人均使用时长(秒)’, `total_duration_hour` BIGINT NOT NULL COMMENT ‘总使用时长(小时)’, `user_count` INT NOT NULL COMMENT ‘用户数‘ ) COMMENT ‘浏览器工作日周末对比表‘; — 6. 用户画像统计表 DROP TABLE IF EXISTS `user_profile_stats`; CREATE TABLE `user_profile_stats` ( `browser_name` VARCHAR(50) NOT NULL COMMENT ‘浏览器名称‘, `gender` VARCHAR(10) COMMENT ‘性别‘, `age_group` VARCHAR(10) COMMENT ‘年龄段‘, `edu` VARCHAR(50) COMMENT ‘学历‘, `job` VARCHAR(50) COMMENT ‘职业‘, `income` VARCHAR(50) COMMENT ‘收入‘, `city_type` VARCHAR(10) COMMENT ‘居住地类型‘, `province` VARCHAR(50) COMMENT ‘省份‘, `user_count` INT NOT NULL COMMENT ‘用户数‘ ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT=’用户画像统计表‘; |
点击“运行”按钮，执行转换流
6.3 各浏览器周活跃趋势表数据抽取执行
目标：统计每个浏览器在第1-4周的每周活跃用户数
新建转换流“各浏览器周活跃趋势表数据抽取”，拖拽“表输入”组件画布中，数据库连接选择“团队私有数据库”，点击“获取SQL查询语句”，选择daily_browser_detail 获取所有查询语句
这里我们需要将每个浏览器的使用日期转为周：5/7-5/13、6/4-6/10、7/2-7/8、8/6-8/12，可以使用值映射组件完成，但是在此之前，需要使用字段选择组件对usage_date进行格式转换。
拖拽字段选择组件到画布中，创建表输入组件到字段选择组件的连线
双击字段选择组件，点击“元数据”，右键插入，输入字段名称usage_date，类型为Date，格式为“yyyy-MM-dd”
再拖拽值映射组件，字段选择组件连接值映射组件
双击值映射组件，使用的字段名选择“usage_date”，目标字段名（空=覆盖）输入“week_range”，表示创建新字段week_range用来存储映射结果，接下来就插入行，将每个日期映射为对应的周区间
接下来我们按各浏览器、周分组统计用户数，分组之前需要对数据进行排序，避免统计结果出错。拖拽排序记录组件到画布中，创建值映射组件到排序记录组件的连线
排序记录组件设置为按照browser_name、week_range 升序排序
排序后拖拽分组组件，排序记录组件连接到分组组件
分组字段为browser_name、week_range，聚合时对user_id进行去重计数，得到active_user_count，因此，聚合配置中输入字段“active_user_count”，subject 为“user_id”，类型为“统计不同值的数量(N)”
最后拖入表输出组件，将分组聚合结果入库，表输出组件配置为：
•数据库连接：选择“团队私有数据库”
•目标表：browser_weekly_active
•勾选“裁剪表”，清空原有数据
•勾选“指定数据库字段”，建立字段映射
执行转换流：
6.4 各浏览器使用频率分布表数据抽取
目标：按轻/中/重度划分用户使用频率
新建转换流“使用频率分布数据抽取”，拖拽“表输入”组件画布中，数据库连接选择“团队私有数据库”，点击“获取SQL查询语句”，选择daily_browser_detail 获取所有查询语句
接下来，我们统计每个用户使用各浏览器的使用时长，拖拽排序记录组件到画布中，创建表输入组件到排序记录组件的连线
排序记录组件设置为按照 user_id、browser_name 升序排序
排序后拖拽分组组件，排序记录组件连接到分组组件
分组组件的分组字段为 user_id、browser_name，总使用时长 = 每天总使用时长total_duration_sec 求和
这样计算的总时长单位是秒，我们将其转换为小时更直观，小时 = 秒 ÷ 3600，由于我们的数据中没有3600这个字段，所以需要先增加这个常量字段。拖拽增加常量组件到画布中，分组组件连接到增加常量组件
增加常量组件配置中增加新字段“hour_m_s”，将其类型设置为 Integer ，并且值固定为3600，如下
接下来，拖入计算器组件
通过计算器，计算小时，新增使用时长单位为小时的字段“total_hours”，计算公式为“A / B”，字段A为“total_seconds”，字段B为“hour_m_s”，保留2位小数
接下来，我们为使用频率划分等级。拖入JavaScript代码组件，计算器组件连接到JavaScript代码组件
双击JavaScript代码组件，如下以下代码，点击”获取变量”，自动获取代码中的变量
|
var total_hours = total_hours; var usage_level = ”; if (total_hours < 3) { usage_level = ‘轻度‘; } else if (total_hours >= 3 && total_hours < 10) { usage_level = ‘中度‘; } else { usage_level = ‘重度‘; } |
usage_level这个字段我们需要在之前的增加常量组件中新增：
接下来，我们就可以统计每个浏览器的各使用等级的用户数了
同样的，先拖入排序记录组件，将数据按照 browser_name、usage_level升序排序
再拖入分组组件，按 browser_name、usage_level分组，统计 user_count（user_id去重计数）
最后拖入表输出组件，将分组聚合结果入库，表输出组件配置为：
•数据库连接：选择“团队私有数据库”
•目标表：browser_frequency_stats
•勾选“裁剪表”，清空原有数据
•勾选“指定数据库字段”，建立字段映射
执行转换流：
6.5 各浏览器使用数量分布表数据抽取
目标：统计用户使用1种、2种、3种及以上浏览器的用户数
新建转换流“浏览器使用数量分布数据抽取”，拖拽“表输入”组件画布中，数据库连接选择“团队私有数据库”，点击“获取SQL查询语句”，选择daily_browser_detail 获取所有查询语句
接下来，我们统计每个用户使用各浏览器的种类数量，拖拽排序记录组件到画布中，创建表输入组件到排序记录组件的连线
排序记录组件设置为按照 user_id 升序排序
排序后拖拽分组组件，排序记录组件连接到分组组件
分组组件的分组字段为 user_id，使用浏览种类数量 = 浏览器名称去重计数
接下来，我们划分浏览器数量等级。拖入JavaScript代码组件，计算器组件连接到JavaScript代码组件
双击JavaScript代码组件，如下以下代码，点击”获取变量”，自动获取代码中的变量
|
var browser_cnt = browser_cnt; var browser_count = ”; if (browser_cnt == 1) { browser_count = ‘1种‘; } else if (browser_cnt == 2) { browser_count = ‘2种‘; } else { browser_count = ‘3种及以上‘; } |
接下来，我们就可以统计使用1种、2种、3种浏览器的用户数了
同样的，先拖入排序记录组件，将数据按照 browser_count 升序排序
再拖入分组组件，按 browser_count 分组，统计user_count（user_id去重计数）
最后拖入表输出组件，将分组聚合结果入库，表输出组件配置为：
•数据库连接：选择“团队私有数据库”
•目标表：browser_multi_usage
•勾选“裁剪表”，清空原有数据
•勾选“指定数据库字段”，建立字段映射
执行转换流：
6.6 各浏览器工作日周末对比表数据抽取
目标：统计各浏览器工作日周末使用时长对比
新建转换流“浏览器工作日周末对比数据抽取”，拖拽“表输入”组件画布中，数据库连接选择“团队私有数据库”，点击“获取SQL查询语句”，选择daily_browser_detail 获取所有查询语句
接下来，根据使用日期获取星期几，拖拽JavaScript代码组件到画布中，表输入组件连接JavaScript代码组件
双击JavaScript代码组件，如下以下代码，点击”获取变量”，自动获取代码中的变量
|
// 获取日期 var date = usage_date; // 获取星期几（0=周日, 1=周一, …, 6=周六） var dayOfWeek = date.getDay(); // 判断工作日还是周末 var day_type = “”; if (dayOfWeek >= 1 && dayOfWeek <= 5) { day_type = “工作日“; } else { day_type = “周末“; } |
接下来，我们就可以统计工作日和周末的使用时长和用户数了
同样的，先拖入排序记录组件
将数据按照browser_name、 day_type升序排序
再拖入分组组件，按 browser_name、 day_type 分组
聚合：
•avg_seconds= 平均使用时长（秒）
•total_seconds= 总使用时长（秒）
•user_count= COUNT(DISTINCT user_id)
平均使用时长单位是秒的数值不会太大，是比较好观察，但是总使用时长的单位是秒的话数值很大，不够直观，所以将其转为小时，参考“6.4 各浏览器使用频率分布表数据抽取”种计算小时的方法，使用增加常量组件和计算器组件来实现
在计算过程中出现了一些中间字段，我们使用字段选择组件来删除冗余字段
最后拖入表输出组件，将分组聚合结果入库，表输出组件配置为：
•数据库连接：选择“团队私有数据库”
•目标表：browser_weekday_weekend
•勾选“裁剪表”，清空原有数据
•勾选“指定数据库字段”，建立字段映射
执行转换流：
6.7 核心指标数据抽取
目标：将大屏顶部四个指标卡的数据存入一张通用的键值对表中
在以上数据抽取中，我们已经获取了各浏览器的用户数、使用时长、活跃用户数、重度用户数，但我们设计的核心指标是全局数据，除了使用时长，其他用户数相关的数据在不同浏览器之间是存在重叠的，所以需要重新计算。
用一个表输入组件，直接SQL一次性算出所有指标，然后通过列转行将一行转为四行
新建转换流“”，拖入表输入组件，数据库连接团队私有数据库，在SQL语句框中输入以下SQL：
|
SELECT ROUND(SUM(total_duration_sec) / 3600, 2) AS total_hours, ROUND(SUM(total_duration_sec) / 3600 / COUNT(DISTINCT user_id), 2) AS avg_hours, ROUND( (SELECT COUNT(DISTINCT user_id) FROM daily_browser_detail WHERE usage_date BETWEEN ‘2012-08-06’ AND ‘2012-08-12’ ) * 100.0 / COUNT(DISTINCT user_id), 2 ) AS active_ratio, ROUND( (SELECT COUNT(*) FROM ( SELECT user_id FROM daily_browser_detail WHERE usage_date BETWEEN ‘2012-05-07’ AND ‘2012-07-08’ GROUP BY user_id HAVING SUM(total_duration_sec) / 3600 > 30 ) t) * 100.0 / COUNT(DISTINCT user_id), 2 ) AS heavy_ratio FROM daily_browser_detail |
接下来使用行转列组件将字段名称转为指标名称，字段值转为指标值
|
字段名称 |
key值 |
value字段 |
|
total_hours |
total_hours |
metric_value |
|
avg_hours |
avg_hours |
metric_value |
|
active_ratio |
active_ratio |
metric_value |
|
heavy_ratio |
heavy_ratio |
metric_value |
接下来使用值映射组件将指标名称映射为中文
最后使用表输出组件写入目标表 browser_overview
最后哦执行转换流即可
6.8 用户画像表加工
目标：统计每个浏览器按性别、年龄、学历、职业、收入、居住地类型的用户分布
6.8.1 获取人口属性信息表
用户画像表需要用户的属性信息，行为日志的数据中仅包含行为数据，缺少用户属性数据，因此需要获取数据集中的人口属性信息表 demographic.csv，行为日志数据与人口属性数据通过用户ID关联
本次实验已经将 demographic.csv 预先存放在实验平台的公共空间数据资源中，可以直接导出到我们的项目文件目库中
点击“公共空间”
点击tab选项“数据资源”，可以看到 demographic.csv
点击 demographic.csv 卡片右上角的“更多” – “导出”
选择导出到的目录，例如根目录
最后点击“确定”
刷新文件库的根目录，即可看到 demographic.csv
6.8.2 CSV文件输入：读取人口属性数据
新建转换流“用户画像表加工”，拖拽“CSV文件输入”组件到画布中
双击“CSV文件输入”组件，点击“浏览文件”按钮，在弹出的窗口中选择 demographic.csv，然后点击“确定”
列分隔符和封闭符保持不变，编码选择“UTF-8”
往下滑一点，在空白表格处右键点击“获取字段”
字段获取成功后点击“确认”
6.8.3 年龄分段
原人口属性数据中没有年龄字段，但是有出生年份，因此我们可以通过计算获取用户的年龄属性
首先我们拖入增加常量组件，增加常量字段“year”，值设为“2012”（数据是2012年的）
拖入“计算器”组件来计算用户在2012年的年龄，年龄 = 2012 – 出生年份，即：age = year – BIRTHDAY
接下来我们将年龄划分为四段：<18、18-25、26-35、>35
拖入JavaScript代码组件，计算器组件连接到JavaScript代码组件
双击JavaScript代码组件，输入以下代码，点击“获取变量”，自动获取代码输出的变量
|
var age_group = ”; if (age < 18) { age_group = ‘<18’; } else if (age <= 25) { age_group = ’18-25′; } else if (age <= 35) { age_group = ’26-35′; } else { age_group = ‘>35’; } |
6.8.4 表输入：读取用户_日_浏览器_小时明细数据
拖入“表输入”组件到画布中
双击“表输入”组件，数据库连接选择“团队私有数据库”，点击“获取SQL查询语句”
在弹出的窗口中，选择用户_日_浏览器_小时明细表daily_browser_detail
系统提示选择“确认”
获取SQL查询语句后点击“确认”、
6.8.5 关联用户属性
记录集连接组件可以将两个表进行连接，就是数据库中的join操作。数据连接时注意两个连接的数据集是否存在同一个字段。
“记录集连接”组件之前需要先对数据进行排序，否则可能出错
我们先拖拽2个“排序记录”组件到画布中，分别创建“表输入”组件到“排序记录 1”组件的连线、“CSV文件输入”组件到“排序记录”组件的连线，其中“CSV文件输入”组件到“排序记录”组件的连线类型选择“主输出步骤”
双击“排序记录 1”组件，命名为“明细数据按用户ID排序”，在空白表格处右键点击“获取字段”
仅保留“user-id”，其他字段选中后右键点击“删除选中的行”
设置 user_id 升序排序后点击“确认”
同样的双击“排序记录”组件，命名为“用户属性数据按用户ID排序”，设置按 USERID升序排序
接下来，两个数据就可以通过记录集连接组件来关联了，拖拽“记录集连接”组件到画布中，2个排序记录组件分别连接到记录集连接组件，因为数据已经排序了，右上角的提示可以忽略
双击“记录集连接”组件，第一个Transform选择“明细数据按用户ID排序”，第二个Transform选择“用户属性数据按用户ID排序”，连接类型选择“LEFT OUTER”
分别点击两个“获得连接字段”按钮，获取2个数据的字段
2个数据是通过用户ID关联的，所以第一个Transform的连接字段保留“user_id”，第二个Transform的连接字段保留“USERID”，其他字段通过删除选中的行来删除
6.8.6 统计用户数
分组统计之前，需要先对数据进行排序，拖入排序记录组件，记录集连接组件连接到排序记录组件，按照等下分组聚合的分组字段升序排序，即：browser_name、GENDER、EDU、JOB、INCOME、PROVINCE、ISCITY、age_group
拖入分组组件，排序记录组件连接到分组组件，按 browser_name、GENDER、EDU、JOB、INCOME、PROVINCE、ISCITY、age_group 分组，聚合user_count = user_id （统计不同值的数量(N)）
6.8.7 表输出
拖入表输出组件，将分组聚合结果入库，表输出组件配置为：
•数据库连接：选择“团队私有数据库”
•目标表：user_profile_stats
•勾选“裁剪表”，清空原有数据
•勾选“指定数据库字段”，建立字段映射
6.8.8 执行转换流
点击“运行”按钮
6.8.9 查看结果数据
点击“元数据”tab选项，右键团队私有数据库，点击“加载元数据”
点击“数据探查”，查看以上生成的目标表是否符合预期
2. 浏览器市场分析–大屏静态布局制作
1 实验目的
本实验基于上两个实验《浏览器市场与用户画像分析–数据加工》产出的各项统计表，使用助睿Max 数据大屏制作浏览器市场行为分析大屏。
通过本实验，学生应掌握：
•根据业务问题设计大屏布局与图表选型
•将已加工的聚合表接入可视化工具
•生成可交互的数据大屏，并提炼业务结论
2 实验环境
•实验平台：助睿在线实验平台https://lab.guilian.cn/
本次实验使用助睿数智（Uniplore）作为一站式数据科学平台。该平台覆盖从数据接入、ETL处理、机器学习建模到可视化展示的全链路零代码功能，适用于数据分析教学与企业数据加工场景。
助睿数智官网为https://www.uniplore.com/
•可视化工具：助睿Max（数据大屏）
3 实验数据
本实验直接使用上一实验加工完成的大屏一（市场行为分析）目标表，聚焦浏览器本身的市场格局、使用行为、时段偏好、竞争关系。
|
模块 |
子模块 |
指标项 |
组件 |
关联数据表 |
备注 |
|
数据概览 |
浏览器市场 |
总使用时长 |
指标卡 |
browser_coverage |
所有用户累计使用时长（小时） |
|
人均使用时长 |
指标卡 |
browser_coverage |
总使用时长 / 覆盖用户数（小时/周） |
||
|
活跃用户占比 |
指标卡 |
browser_coverage |
周活跃用户数 / 覆盖用户数 |
||
|
重度用户占比 |
指标卡 |
browser_frequency_stats |
使用时长>10小时/周的用户占比 |
||
|
市场格局 |
用户规模 |
用户数 |
柱状图 |
browser_coverage |
展示6个浏览器用户数 |
|
使用规模 |
使用时长 |
饼图 |
browser_coverage |
展示各浏览器使用时长占比 |
|
|
使用粘性 |
人均使用时长 |
柱状图 |
browser_coverage |
||
|
用户行为 |
时间趋势 |
周活跃趋势 |
折线图 |
browser_weekly_active |
展示第1-4周各浏览器活跃用户数变化 |
|
使用习惯 |
使用频率分布 |
堆叠柱状图 |
browser_frequency_stats |
轻/中/重度用户在各浏览器的占比 |
|
|
时段偏好 |
全天时段 |
24小时活跃分布 |
折线图 |
browser_hourly |
X轴小时，Y轴活跃用户数，不同颜色代表不同浏览器 |
|
周内对比 |
工作日vs周末 |
分组柱状图 |
daily_browser_detail |
对比工作日和周末的使用时长 |
|
|
竞争关系 |
使用数量 |
浏览器使用数量分布 |
饼图 |
browser_multi_usage |
用户使用1种/2种/3种及以上浏览器的比例 |
4 整体分析框架
4.1 业务问题
我们希望通过大屏回答以下核心业务问题：
|
业务问题 |
对应的分析维度 |
|
哪个浏览器用户最多？哪个用得最久？ |
市场格局 |
|
用户活跃度在增长还是下降？ |
周活跃趋势 |
|
用户什么时候最活跃？ |
时段偏好 |
|
用户是重度使用还是偶尔打开？ |
使用频率 |
|
用户同时用几个浏览器？ |
浏览器使用数量 |
|
用户还用什么其他浏览器？ |
竞品重叠 |
|
工作日和周末使用习惯有何不同？ |
工作日vs周末 |
4.2 大屏设计原则
•从上到下、从左到右的叙事顺序：先整体后局部，先趋势后细节
•核心指标突出显示：顶部放置关键指标卡（覆盖用户数、总时长、人均时长、活跃占比、重度占比）
•图表类型与数据性质匹配：趋势用折线图，对比用条形图/柱状图，分布用环形图/饼图
•颜色规范：6个浏览器使用固定颜色标识（IE蓝、Chrome红、360绿等），便于识别
•交互支持：提供浏览器筛选器，支持查看全部或单个浏览器
4.3 大屏布局草图
参考图：
5 实验步骤
点击实验平台左侧菜单“数据大屏”
进入子平台——助睿数据大屏可视化平台
助睿数据大屏可视化是一款通过图形化界面轻松搭建专业可视化应用的产品，适用于会议展览、业务监控、风险预警、地理分析等场景。相比传统图表，它以更生动友好的形式即时呈现数据背后的业务洞察，广泛应用于零售、物流、电力、环保、交通等领域。其核心能力包括：丰富的基础组件库、地理信息可视化（轨迹/飞线/热力等）、支持多种数据源（含CSV）、拖拽式搭建无需编程，以及低代码蓝图编辑器（满足开发者的高级控制与数据处理需求）。
5.1 创建数据大屏
首先我们先创建本次实验的市场分析大屏，点击“+新建”按钮 – “新建大屏”
在模板选择中点击“空白模板”
点击后会出现大屏名称输入框
我们输入“市场分析”，然后点击下一步，自动跳转到“市场分析”大屏的制作界面
5.2 设置大屏样式
5.2.1 背景设置
想修改设置助睿数据大屏的背景，可以通过修改背景图片来完成
助睿数据大屏中使用到的图片元素均使用oss-browser存储，并获取存储链接。本次实验用到的图片链接会在文后汇总，若同学有新图片使用需求，可以联系@谭萍处理。
本次数据大屏的背景图片链接为：
进入大屏编辑页面后，可以看到右边的页面设置栏，屏幕大小默认为1920×1080，可以根据最终展示的屏幕大小来修改。
图 2bg-2
将以上背景图片链接复制后粘贴到“背景图片”后的文本框中，覆盖原图片链接
其他设置可以保持默认
5.2.2 标题设置
大屏的标题可以通过组件自己设计，也可以自行设计一个图片来实现。本次实验我们预先设计好了标题图，链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/banner01.png
大屏左边是组件列表，提供丰富的组件，包括图表、文字、地图、媒体素材、交互等，在这里，我们的标题图片需要图片组件类承载。
点击“媒体”组件分类，点击“单张图片”组件
大屏画布中自动出现图片组件
为了方便管理，右键组件，点击“重命名”
输入“标题banner”
选中这个“标题banner”图片组件，右边是它的设置栏
点开“基础属性”，可以设置长宽、位置等属性，我们设置如下：
点开基本设置，可以设置图片链接，我们复制以下链接进去，覆盖原链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/banner01.png
这样标题banner就设置好了，我们点击“保存”
保存后点击“预览”，可以随时查看效果
5.2.3 导航设置
因为我们有两个大屏，所以可以设置导航做大屏间的跳转
同样的，点击“单张图片”组件，重命名为“市场分析按钮背景”
除了直接设置属性值，也可以通过拖拽和缩放来设置组件的大小和位置
不过微调还是使用属性值比较好，导航按钮的背景图片链接为：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/comprehensive-data/navigation-bg-1.png粘贴到基础设置的背景图链接中
按钮上的文字我们使用“通用标题”来实现，点击文字分类下的“通用标题”，重命名为“市场分析”
修改“市场分析”通用标题组件的基础属性，和“市场分析按钮背景”图片组件一样
点开基本设置，修改标题名为“市场分析”
切换“数据”tab选项，点击“刷新数据”
文字即显示为我们修改的文字
点开文本样式，可以设置字体、字号、颜色和粗细
第二个大屏的导航可以复制这个按钮的设置
复制的图片组件重命名为“用户画像按钮背景”，通用标题组件重命名为“用户画像”
现在，只需修改“用户画像按钮背景”和“用户画像”组件的横坐标，如下：
复制后的组件可能会不显示，刷新数据即可
将用户画像标题组件的内容改为“用户画像”，颜色和粗细也做相应修改（因为当前大屏的市场分析大屏，对应按钮为选中效果，其他为未选中效果）
保存预览一下
至此，顶部标题和导航配置完成，为方便管理，我们将这些组件放在一个组里。选中顶部区域的所有组件，右键“成组”
这个组命名为“顶部”
5.3 设置内容布局与样式
接下来，我们先根据“4.3大屏布局草图”将各图表进行排版
根据参考图，每个图表区域包含以下内容：
•区域背景：使用单张图片组件
•标题背景：使用单张图片组件
•标题：使用通用标题组件
•图表：使用具体图表组件
5.3.1 用户规模–浏览器用户数
我们首先制作左上角第一个图表区域，点击单张图片组件，重命名为“区域背景”，并按照布局草图和参考图设置好大小、位置
将区域背景图片链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/area-bg.png粘贴到背景图链接中
再添加一个单张图片组件，重命名为“标题背景”，用于图表标题背景，这个图表在布局草图中属于短图表，因此，图表标题背景图片链接为短标题背景图片：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/title-bg-short.png
调整好位置和大小，粘贴背景图链接即可
添加通用标题组件，重命名为“标题”，按照参考图，调整大小和位置，标题名修改为“浏览器用户数”，对齐方式为左对齐，其他设置参考如下：
按照“3 实验数据”中的内容，展示6个浏览器用户数的图表是柱状图，我们点击“基础柱状图”组件
重命名为“浏览器用户数柱状图”，调整大小和位置
图表的图例默认隐藏，我们将其设置为可见，并调整水平对齐方式为居中
这时候我们会发现，柱子和图例的距离过小，影响美观，我们可以点开“全局样式”来调整
将柱子上边距调大即可
其他样式，大家可以自行设置
将本小节增加的组件设置成组，命名为“浏览器用户数”
保存预览：
5.3.2 使用规模–浏览器使用时长占比
复制上一小节制作的“浏览器用户数”组，重命名为“浏览器使用时长”
参考布局草图，拖拽“浏览器使用时长”组到合适位置
复制的组件内容可能会不显示，重新刷新数据即可
将标题名修改为“浏览器使用时长”，并刷新数据
浏览器使用时长占比图表类型为饼图，我们删除复制的柱状图，重新添加饼图。助睿数据大屏提供多样不同样式的饼图，可根据需求选择，这里我们选择“多维度饼图”，调整位置大小，名重命名为“浏览器使用时长占比”
接下来设置饼图的样式，我们取消外圈显示，点击“饼图样式”，点击外圈颜色后的色值方块，将透明度拖到0，并点击“确定”
将标签类目设置为可见
接下来我们可以设置每个浏览器在饼图中的颜色，点开“数据系列”，系列及代表分类，也就是浏览器，刚好数据中有6个浏览器，将系列1-6的颜色设置为不同的颜色即可，色值参考：
#2177FC、#3DC3DF、#FF948B、#8A79FE、#82F9A5、#97DFFF
将饼图组件拖到“浏览器使用时长”组中，并及时保存
5.3.3 使用粘性–浏览器人均使用时长
复制5.3.1小节制作的“浏览器用户数”组，重命名为“浏览器人均使用时长”
参考布局草图，拖拽“浏览器使用时长”组到合适位置
复制的组件内容可能会不显示，重新刷新数据即可
将标题名修改为“浏览器人均使用时长”，并刷新数据
浏览器人均使用时长图表类型为柱状图，因此无需修改图表类型，将复制的柱状图重命名为“人均使用时长柱状图”即可
5.3.4 指标区
复制5.3.1小节制作的“浏览器用户数”组，重命名为“数据概览”
参考布局草图，拖拽“浏览器使用时长”组到合适位置，调整组件的大小，并刷新数据
可以看到标题背景被拉伸了，因为我们使用的是短的标题背景图，现在需要换成长的标题背景图：
将标题名修改为“数据概览”，并刷新数据
删除复制的柱状图，大屏中的指标卡是通过文字类组件实现的，我们使用数据翻牌器来展示指标，而单独一个指标看上去有点单调，可以添加一些装饰元素。
首先，添加“单张图片”组件，重命名为“图标”，背景图添加链接：
https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/library-data/audio-video.png并调整大小、位置，如下图：
添加数据翻牌器组件，重命名为“总使用时长”，并调整大小、位置
接下来，调整数据翻牌器的样式。
点开“标题”设置，标题名修改为“总使用时长”，对齐方式改为“居中对齐”，字体大小、颜色、粗细也做相应修改，如下：
点开“翻牌器”设置，水平对齐改为“居中对齐”，其他设置如下：
将图标和总使用时长两个组件成组，命名为“总使用时长”
复制3个“总使用时长”组，分别重命名为“人均使用时长”、“活跃用户占比”、“重度用户占比”，其中“活跃用户占比”、“重度用户占比”两个组中的图标背景图链接更改为：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/library-data/degree-thesis.png
修改翻牌器标题、后缀，最后调整位置如下：
5.3.5 时段偏好–周内对比
复制5.3.1小节制作的“浏览器用户数”组，重命名为“周内对比”
参考布局草图，拖拽“周内对比”组到合适位置
刷新复制的组件数据，并将标题背景图更换为长标题背景图，标题内容修改为“工作日vs周末使用时长”
将柱状图删除，重新添加“分组柱状图”，命名为“工作日vs周末使用时长分组柱状图”，并调整大小，位置如下：
接下来调整系列2的柱子颜色为#3DC3DF
其他样式调整参考如下：
效果：
5.3.6 时段偏好-24小时活跃分布
复制上一小节制作的“周内对比”组，重命名为“24小时活跃分布”
参考布局草图，拖拽“24小时活跃分布”组到合适位置
复制的组件内容可能会不显示，重新刷新数据即可
将标题名修改为“24小时活跃用户数分布”，并刷新数据
删除复制的分组柱状图，添加区域图，并调整好大小、位置
样式调整参考如下，参考颜色为#29F1FA：
效果：
5.3.7 周活跃趋势–浏览器周活跃用户数变化
复制5.3.1小节制作的“浏览器用户数”组，重命名为“浏览器周活跃用户数变化”，参考以上的实验，调整位置、标题并更换图表类型，实现如下效果：
5.3.8 使用习惯–使用频率分布
复制上一小节制作的“浏览器周活跃用户数变化”组，重命名为“使用频率分布”，参考以上的实验，调整位置、标题并更换图表类型为“垂直基本柱图”
5.3.9 竞争关系–浏览器使用数量分布
复制上一小节制作的“使用频率分布”组，重命名为“浏览器使用数量分布”，参考以上的实验，调整位置、标题共并换图表类型为“基本饼图”
基本饼图样式调整参考如下：
保存大屏，最终预览效果如下：
至此，市场分析大屏的静态布局已完成，下一实验我们将使用蓝图编辑器，完成数据接入。
附录：图片链接
|
素材 |
链接 |
|
页面背景 |
https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/bg-2.png |
|
导航按钮 |
https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/comprehensive-data/navigation-bg-1.png |
|
banner标题 |
https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/banner01.png |
|
短标题背景 |
https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/title-bg-short.png |
|
长标题背景 |
https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/title-bg-long.png |
|
图表区域背景 |
https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/area-bg.png |
|
时长指标 |
https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/library-data/audio-video.png |
|
用户指标 |
https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/library-data/degree-thesis.png |
3. 浏览器市场分析–大屏数据接入
1 实验目的
本实验基于上一实验《浏览器市场分析–数据大屏静态布局制作》完成的大屏布局，使用助睿Max的蓝图编辑器，将之前实验加工好的数据表接入到大屏的各个图表组件中，使图表能够动态展示真实数据。
通过本实验，学生应掌握：
•理解蓝图编辑器的基本概念（数据源、触发器、动作）
•创建数据库数据源连接
•为图表组件编写SQL查询语句
•将查询结果绑定到图表组件
2 实验环境
•实验平台：助睿在线实验平台https://lab.guilian.cn/
本次实验使用助睿数智（Uniplore）作为一站式数据科学平台。该平台覆盖从数据接入、ETL处理、机器学习建模到可视化展示的全链路零代码功能，适用于数据分析教学与企业数据加工场景。
助睿数智官网为https://www.uniplore.com/
•可视化工具：助睿Max（数据大屏）
•数据来源：团队私有数据库（MySQL）
3 实验数据
本实验使用上一实验加工完成的大屏一目标表，共6张表：
|
表名 |
用途 |
关联图表 |
|
browser_coverage |
浏览器市场覆盖率统计 |
指标卡、柱状图、饼图 |
|
browser_hourly |
浏览器时段活跃统计 |
24小时活跃分布折线图 |
|
browser_weekly_active |
各浏览器周活跃趋势 |
周活跃趋势折线图 |
|
browser_frequency_stats |
浏览器使用频率分布 |
使用频率堆叠柱状图 |
|
browser_multi_usage |
用户浏览器使用数量分布 |
浏览器使用数量饼图 |
|
browser_weekday_weekend |
浏览器工作日周末对比 |
工作日vs周末分组柱状图 |
4 蓝图编辑器概述
4.1 什么是蓝图编辑器？
蓝图编辑器是助睿Max中用于配置数据流和交互逻辑的可视化编程工具。它采用“节点–连线”的方式，帮助您自由管理可视化应用中多个组件之间的交互关系。
蓝图编辑器的优势：
•蓝图编辑器可以保证交互和数据的实时性和同步性。
•蓝图编辑器支持数据请求合并和数据分发的功能。
•蓝图编辑器可模块化拆分，专注单个的交互链路，不需要考虑代码的整理和规范，只需要专注于业务规则和交互需求即可。
4.2 核心概念
|
概念 |
说明 |
|
数据源 |
数据库连接配置，定义数据从哪里来 |
|
查询 |
SQL语句，定义取什么数据 |
|
触发器 |
触发数据加载的事件（如页面加载、组件点击、定时刷新等） |
|
动作 |
触发器执行后的操作（如查询数据、刷新图表） |
|
变量 |
用于在查询之间传递参数（如筛选器选中的浏览器名称） |
5 实验步骤
5.1 创建数据库数据源
首先，我们需要创建链接团队私有数据库的数据源，进入数据大屏平台后，点击“我的数据”
点击“+新建” – “新建数据源”
输出团队私有数据库的信息后，点击“立即添加”
切换tab选项再切回我的数据后可以看见新添加的团队私有数据库
5.2 组件导出到蓝图编辑器
只有当组件导入到蓝图编辑器后，才可以为该组件配置交互。
打开上一实验制作的“市场分析”数据大屏
在画布编辑器内，右键单击左侧图层栏或中间画布区的组件，选择导出到蓝图编辑器，即可将对应组件导出到蓝图编辑器中。
同样的，依次把所有需要接入数据的组件导出到蓝图编辑器中
导出成功后，单击“蓝图编辑器”图标切换到蓝图编辑器页面，可在导入节点列表中查看对应的节点。列表内所有节点都可供后续配置交互使用。
5.3 添加全局节点
在蓝图编辑器里，在逻辑节点面板中，将需要使用的逻辑节点单击拖入中间画布中。逻辑节点包括了全局节点、数据处理类节点、流程控制类节点以及输入设备类节点。
首先，我们全局节点，画布中自动添加1个全局节点，全局节点可用于在大屏打开时自动执行后续操作（如加载数据）
5.4 为市场格局3个图表配置数据
5.4.1 添加SQL请求节点
从逻辑节点面板中，点击“SQL请求”节点，并将全局节点的“页面初始化完成”输出接口连接到“SQL 请求”节点的“执行SQL”输入接口
点击“SQL 请求”节点，在配置面板中，数据源选择“团队私有数据库”，SQL类型为“查询”，处理方法的代码框中，输入以下SQL，一次性查询来源为 browser_coverage 的数据：
|
let sql = ` select browser_name as x, user_count as y1, round(total_duration_sec/3600,0) as y2, round((total_duration_sec/3600)/user_count,1) as y3 from labs.browser_coverage order by browser_name` return sql |
5.4.2 并行数据处理
在蓝图编辑器中，可以通过并行数据处理节点将同一个SQL查询的结果分发到多个图表，每个图表提取自己需要的字段。以下是具体配置方法：
添加并行数据处理组件，并在其处理方法中再增加2个处理方法，一共3个处理方法，分别命名为：各浏览器用户数、各浏览器总使用时长、各浏览器人均使用时长
SQL请求节点的执行成功输出接口分别连接到并行数据处理的3个处理方法接口，如下：
接下来根据每个图表的数据接口映射格式处理查询到的数据，在画布编辑器界面，选择图表，可以在数据tab选项中查看数据接口映射：
根据查询结果，三个图表需要的字段
•浏览器用户数柱状图：x（浏览器名称）、y1（用户数）
•浏览器使用时长占比：name（浏览器名称）、value（使用时长）
•人均使用时长柱状图：x（浏览器名称）、y3（人均时长）
因此，并行数据处理的3个处理方法的代码如下，分别粘贴到对应的代码块中即可：
各浏览器用户数
|
return data.map(item => ({ x: item.x, y: item.y1, s: ‘用户数‘ })); |
各浏览器总使用时长
|
return data.map(item => ({ name: item.x, value: item.y2 })); |
各浏览器人均使用时长
|
return data.map(item => ({ x: item.x, y: item.y3, s: ‘人均时长(小时)’ })); |
5.4.3 添加图表节点
点击浏览器用户数柱状图、浏览器使用时长占比、人均使用时长柱状图这3个节点，将它们添加到画布中，再将并行数据处理的3个处理方法的输出接口连接到对应的图表的“导入数据接口”，如下：
点击保存，我们可以预览一下数据情况是否符合预期
可以看到，数据已经更新为数据库中的数据了
预览出现下图情况
可以按照以下配置
饼图的样式可以调整一下，使其更协调
在画布编辑器中选择浏览器使用时长占比饼图，在数据系列中调整每个系列的内外半径，实现类似的以下效果：
5.5 为指标区域图表配置数据
5.5.1 添加SQL请求节点
从逻辑节点面板中，点击“SQL请求”节点，并将全局节点的“页面初始化完成”输出接口连接到“SQL 请求”节点的“执行SQL”输入接口
点击“SQL 请求”节点，在配置面板中，数据源选择“团队私有数据库”，SQL类型为“查询”，处理方法的代码框中，输入以下SQL，一次性查询来源为 browser_overview 的数据：
|
let sql = `select metric_name, metric_value from labs.browser_overview ` return sql |
该查询返回一个数组，格式如下：
|
[ {“metric_name”: “总使用时长“, “metric_value”: 456800.00}, {“metric_name”: “人均使用时长“, “metric_value”: 8.20}, {“metric_name”: “活跃用户占比“, “metric_value”: 71.30}, {“metric_name”: “重度用户占比“, “metric_value”: 23.50} ] |
5.5.2 并行数据处理
添加并行数据处理组件，并在其处理方法中再增加3个处理方法，一共4个处理方法，分别命名为：总使用时长、人均使用时长、活跃用户占比、重度用户占比
SQL请求节点的执行成功输出接口分别连接到并行数据处理的4个处理方法接口，如下：
接下来根据数字翻牌器的数据接口映射格式处理查询到的数据，在画布编辑器界面，选择数字翻牌器，可以在数据tab选项中查看数据接口映射：
其中，name 字段我们已经在数据翻牌器中设置好了，现在只需处理 value 字段的映射关系根据查询结果：
总使用时长
|
var item = data.find(d => d.metric_name === ‘总使用时长‘); return [{ value: item ? item.metric_value : 0 }]; |
人均使用时长
|
var item = data.find(d => d.metric_name === ‘人均使用时长‘); return [{ value: item ? item.metric_value : 0 }]; |
活跃用户占比
|
var item = data.find(d => d.metric_name === ‘活跃用户占比‘); return [{ value: item ? item.metric_value : 0 }]; |
重度用户占比
|
var item = data.find(d => d.metric_name === ‘重度用户占比‘); return [{ value: item ? item.metric_value : 0 }]; |
每个分支的输出格式为[{ value: xxx }]，指标卡组件直接读取value字段显示数值。指标名称已预先配置在指标卡组件的标题中
5.5.3 添加图表节点
点击4个数字翻牌器组件的节点，将它们添加到画布中，再将并行数据处理的4个处理方法的输出接口连接到对应的图表的“导入数据接口”，如下：
点击保存，预览数据是否符合预期
5.6 为工作日vs周末使用时长图表配置数据
5.6.1 添加SQL请求节点
参考以上SQL请求节点的配置步骤，完成SQL请求节点配置，查询代码如下：
|
let sql = ` select browser_name as x, avg_duration_sec as y, day_type as s from labs.browser_weekday_weekend order by browser_name, day_type ` return sql |
5.6.2 添加图表节点
点击工作日vs周末使用时长节点，将它添加到画布中，再SQL请求节点的执行成功输出接口连接到“导入数据接口”，如下：
点击保存，预览数据是否符合预期
5.7 为24小时活跃用户分布图表配置数据
5.7.1 添加SQL请求节点
参考以上SQL请求节点的配置步骤，完成SQL请求节点配置，查询代码如下：
|
let sql = ` select hour as x, active_user_count as y, browser_name as s from labs.browser_hourly order by browser_name, hour ` return sql |
5.7.2 添加图表节点
点击24小时活跃用户分布节点，将它添加到画布中，再SQL请求节点的执行成功输出接口连接到“导入数据接口”，如下：
点击保存，预览数据是否符合预期
这里需要注意，图例是跟着折线上的标签点的颜色变化的，为了使折线、标签点、图例颜色一致，需要分别设置颜色，在画布编辑器中选中图表，点开数据系列，这个折线图有6个图例，即6个浏览器，所以需要设置6个系列的折线和标记颜色
设置完成后，效果如下：
5.8 为活跃用户周变化图表配置数据
5.8.1 添加SQL请求节点
参考以上SQL请求节点的配置步骤，完成SQL请求节点配置，查询代码如下：
|
let sql = ` select hour as x, active_user_count as y, browser_name as s from labs.browser_hourly order by browser_name, hour ` return sql |
5.8.2 添加图表节点
点击活跃用户周变化节点，将它添加到画布中，再SQL请求节点的执行成功输出接口连接到“导入数据接口”，如下：
点击保存，预览数据是否符合预期
这里需要注意，图例是跟着折线上的标签点的颜色变化的，为了使折线、标签点、图例颜色一致，需要分别设置颜色，在画布编辑器中选中图表，点开数据系列，这个折线图有6个图例，即6个浏览器，所以需要设置6个系列的折线和标记颜色
设置完成后，效果如下：
5.9 为使用频率分布图表配置数据
5.9.1 添加SQL请求节点
参考以上SQL请求节点的配置步骤，完成SQL请求节点配置，查询代码如下：
|
let sql = ` select browser_name as s, user_count as y, usage_level as x from labs.browser_frequency_stats order by browser_name ` return sql |
5.9.2 添加图表节点
点击使用频率分布节点，将它添加到画布中，再SQL请求节点的执行成功输出接口连接到“导入数据接口”，如下：
点击保存，预览数据是否符合预期
5.10 为浏览器使用数量分布图表配置数据
5.10.1 添加SQL请求节点
参考以上SQL请求节点的配置步骤，完成SQL请求节点配置，查询代码如下：
|
let sql = ` select browser_count as name, user_count as value from labs.browser_multi_usage order by browser_count ` return sql |
5.10.2 添加图表节点
点击浏览器使用数量分布节点，将它添加到画布中，再SQL请求节点的执行成功输出接口连接到“导入数据接口”，如下：
点击保存，预览数据是否符合预期
5.11 预览并发布
组件的样式和数据都配置完成后，可以预览并发布可视化应用，实现应用的在线播放和演示。
单击大屏页面右上角的预览图标，预览可视化应用。
预览确认无误后，单击大屏页面右上角的发布图标
在弹出的发布对话框中单击发布分享
单击分享链接右侧的复制按钮
打开浏览器，将复制的链接粘贴到地址栏中，即可在线观看
2012年浏览器市场分析大屏链接：http://47.109.66.142:30887/#/dataScreen/release?shareId=6c8835415fd44ee88317766691976922
三、实验总结
本次实验基于助睿数智一站式数据科学平台，完整完成了浏览器市场与用户画像分析全流程实践，覆盖数据加工、大屏静态布局制作、大屏数据接入三大核心环节。实验以 1000 名用户、800 万 + 条浏览器行为记录为基础，通过零代码 ETL 工具完成数据聚合统计，遵循业务驱动的设计原则制作可视化大屏，并通过蓝图编辑器实现动态数据绑定，最终产出了可在线访问、实时展示的浏览器市场分析数据大屏。
- （一）实验完成情况
- 1. 数据加工环节：构建大屏专属统计数据集
本环节解决了原始明细数据量大、查询慢、无法直接用于大屏展示的问题，基于daily_browser_detail用户行为明细表和demographic用户属性表，完成了 8 张目标表的创建与数据抽取：
- 基础数据准备：修正了上一实验转换流的排序字段与分组字段不一致问题，补充了浏览器进程名到中文名称的映射，生成了规范的daily_browser_detail用户 – 日 – 浏览器 – 小时明细表。
- 市场行为数据加工：统计得到浏览器市场覆盖率、周活跃趋势、使用频率分布、多浏览器使用数量、工作日与周末使用对比等核心指标，覆盖市场格局、用户活跃度、使用习惯、竞争关系四大分析维度。
- 用户画像数据加工：通过记录集连接将行为数据与人口属性数据关联，计算用户年龄并完成分段，统计得到各浏览器用户在性别、年龄、学历、职业、收入、地域等维度的分布特征。
- 核心指标聚合：将总使用时长、人均使用时长、活跃用户占比、重度用户占比四大全局指标存入键值对表，为大屏顶部指标卡提供数据支持。
- 2. 大屏静态布局制作：打造专业可视化界面
遵循 “从上到下、从左到右、先整体后局部、先趋势后细节” 的设计原则，完成了市场分析大屏的完整布局设计：
- 整体结构规划：将大屏划分为顶部导航标题区、核心指标概览区、市场格局分析区、用户行为趋势区、时段偏好分析区、竞争关系分析区六大模块，形成清晰的业务叙事逻辑。
- 图表精准选型：根据数据特性选择合适的可视化组件 —— 用柱状图展示用户规模和人均使用时长对比，用饼图展示使用时长占比和浏览器使用数量分布，用折线图 / 区域图展示周活跃趋势和 24 小时活跃分布，用分组柱状图对比工作日与周末使用差异。
- 视觉风格统一：统一配置了大屏背景、标题样式、图表区域背景和配色方案，为 6 款浏览器设置了固定的标识颜色，确保界面美观、识别度高。
- 3. 大屏数据接入：实现动态数据展示
通过助睿 Max 蓝图编辑器，完成了所有图表组件与团队私有数据库的动态绑定，实现了数据的实时加载与展示：
- 数据源配置：创建了团队私有 MySQL 数据库连接，为后续数据查询提供基础。
- 数据流配置：将所有需要展示数据的组件导出到蓝图编辑器，通过 “全局节点 – 页面初始化完成” 事件触发所有 SQL 查询，使用并行数据处理节点将同一份查询结果分发到多个图表，减少数据库请求次数。
- 数据格式转换：针对不同图表组件的数据接口要求，编写 JavaScript 代码将数据库查询结果转换为组件可识别的格式（如柱状图的x/y/s字段、饼图的name/value字段）。
- 大屏发布：完成所有组件的数据绑定和样式调整后，预览验证无误并发布了可视化应用，生成了可在线访问的分享链接。
- （二）核心知识与技能收获
- 1. 技术能力提升
- 零代码 ETL 实践：熟练掌握了助睿 ETL 平台的核心操作，包括表创建、数据清洗、字段映射、排序分组、多表关联、JavaScript 字段转换等，理解了数据预处理在数据分析全流程中的基础性作用。
- 数据大屏设计能力：掌握了业务问题驱动的大屏设计方法论，学会了如何从业务需求出发构建指标体系、选择合适的图表类型、规划页面布局和统一视觉风格。
- 可视化交互配置：理解了蓝图编辑器 “节点 – 连线” 的编程模式，掌握了数据源创建、SQL 查询编写、数据分发、组件数据绑定等核心技能，能够独立完成简单可视化应用的交互逻辑配置。
- 2. 业务思维培养
- 建立了 “业务问题→分析维度→核心指标→数据加工→可视化呈现” 的完整数据分析思维，学会了从业务需求反推数据加工逻辑。
- 深入理解了浏览器市场分析的核心维度：不仅关注用户规模等表面指标，更重视使用时长、活跃度、使用频率等反映用户粘性的深层指标，以及多浏览器使用等体现竞争关系的指标。
- 认识到数据预处理的重要性：提前将原始明细数据聚合成统计级数据，不仅能大幅提升大屏加载速度，还能避免重复计算，提高数据分析效率。
- （三）实验中遇到的问题与解决方案
- 数据重复统计问题：初期转换流中 “排序记录” 组件仅按进程名单一字段排序，与分组组件的多字段分组要求不一致，导致统计结果出现大量重复数据。
- 解决方案：将排序记录组件的排序字段修改为与分组字段完全一致（user_id、usage_date、browser_name、hour），确保分组前数据已按完整维度排序。
- 非浏览器数据干扰问题：上一实验的过滤条件中包含了 Excel、Word 等非浏览器进程，导致统计结果包含无关数据。
- 解决方案：删除过滤条件中的EXCEL.EXE、WINWORD.EXE、AlilM.exe，仅保留 6 种浏览器进程，并在值映射组件中补充完整进程名与中文名称的对应关系。
- 数据格式不匹配问题：蓝图编辑器中数据库查询结果的字段名与图表组件要求的字段名不一致，导致数据无法正常渲染。
- 解决方案：使用并行数据处理节点对查询结果进行格式转换，通过 JavaScript 代码将数据库字段映射为图表组件需要的标准字段（如将user_count映射为y，将browser_name映射为x）。
- 图表视觉不一致问题：折线图的折线、标记点和图例颜色不统一，影响用户对不同浏览器的识别。
- 解决方案：在画布编辑器的 “数据系列” 设置中，为每个浏览器分别配置统一的折线颜色、标记颜色和图例颜色，确保视觉一致性。
- （四）实验反思与改进方向
- 数据加工优化：可增加数据质量校验环节，对空值、异常时长等脏数据进行清洗和处理；将重复使用的计算逻辑（如时长单位转换、等级划分）封装为公共组件，提高转换流的复用性和可维护性。
- 大屏交互增强：目前大屏仅支持基础的数据展示，后续可添加浏览器筛选器、时间范围选择器等交互组件，支持用户查看单个浏览器的详细数据和自定义时间段的趋势变化；还可添加图表联动功能，实现点击一个图表筛选其他图表数据的效果。
- 用户画像大屏完善：本次实验仅完成了市场分析大屏的制作，后续可按照相同的流程，基于user_profile_stats表完成用户画像大屏的制作，全面展示不同浏览器的用户特征差异。
- 性能优化：针对更大数据量的场景，可采用定时刷新、增量更新的方式替代全量查询；为数据库中的常用查询字段添加索引，优化 SQL 语句，进一步提升数据加载速度。