一、实验基本信息

1.实验名称：浏览器市场分析 —— 数据加工、静态大屏制作与动态数据接入

2.实验平台：助睿在线实验平台（Uniplore）、助睿 ETL 数据集成、助 Max 数据大屏、蓝图编辑器

3.实验数据：互联网用户 – 浏览器行为明细数据、用户属性数据，数据量约 800 万条行为记录、1000 名用户

4.实验目的

1.基于原始行为数据，完成浏览器市场各类统计宽表加工，实现数据聚合与清洗。

2.依据业务需求完成数据大屏布局、组件搭配与样式美化，制作静态可视化大屏。

3.运用蓝图编辑器完成数据源配置、SQL 查询与组件数据绑定，实现图表动态数据展示。

4.结合可视化结果，分析浏览器市场格局、用户使用行为、时段偏好、群体特征等业务结论。

二、实验一 浏览器市场数据加工

2.1实验目标

基于用户 – 日 – 浏览器 – 小时明细数据与用户属性表，通过 ETL 工具完成多维度聚合统计，产出数据大屏所需 8 张业务统计表，为可视化大屏提供标准化数据源。

2.2加工整体思路

原始明细数据数据量大、维度零散，无法直接用于大屏展示。按照业务维度→统计指标→目标数据表的思路反向设计，拆分出市场格局、活跃趋势、使用频率、时段特征、工作日 / 周末对比、用户画像六大分析方向，逐张创建数据表并完成数据抽取、转换、加载。

2.3目标数据表说明

本次共加工 8 张 MySQL 业务表，各表用途与关联大屏组件如下：

表格

数据表名	核心用途	对应大屏组件
daily_browser_detail	用户 – 日 – 浏览器 – 小时行为明细表（基础底表）	所有统计表数据源
browser_coverage	浏览器用户数、总使用时长、人均时长统计	柱状图、饼图、指标卡
browser_overview	全局核心指标（总时长、人均时长、活跃 / 重度用户占比）	顶部指标卡
browser_weekly_active	各浏览器周活跃用户趋势	周活跃折线图
browser_hourly	24 小时分时活跃用户统计	时段分布折线图
browser_frequency_stats	轻 / 中 / 重度用户使用频率分布	堆叠柱状图
browser_multi_usage	用户同时使用浏览器数量分布	饼图
browser_weekday_weekend	工作日、周末使用时长对比	分组柱状图
user_profile_stats	浏览器用户性别、年龄、职业等画像统计	用户画像大屏图表

2.4详细实验步骤

2.4.1基础明细表创建与数据加载

1.新建 ETL 转换流，执行CREATE TABLE语句，在团队 MySQL 数据库中创建daily_browser_detail明细表，定义用户 ID、使用日期、浏览器、小时、使用时长等字段。

2.复制历史数据清洗转换流，修正排序、分组规则，添加进程名→浏览器名称值映射（如chrome.exe映射为 Google 浏览器）。

3.配置表输出组件，将清洗后的明细数据写入daily_browser_detail，完成基础底表构建。

2.4.2批量创建业务统计表

新建转换流，通过 SQL 脚本批量执行建表语句，依次创建browser_overview、browser_weekly_active、browser_frequency_stats等目标表，统一字符集与字段注释，规避重复建表报错。

2.4.3分维度数据抽取与转换

1.周活跃趋势表（browser_weekly_active） 

1.表输入读取明细数据，通过值映射将使用日期转换为周区间（5/7-5/13 等）。

2.按浏览器、周分组，对用户 ID 去重计数，统计每周活跃用户数，结果入库。

2.使用频率表（browser_frequency_stats） 

1.按用户 + 浏览器分组，汇总总使用秒数，通过计算器换算为小时。

2.使用 JavaScript 脚本划分等级：<3 小时（轻度）、3~10 小时（中度）、>10 小时（重度）。

3.按浏览器、使用等级分组统计用户数，写入目标表。

3.浏览器使用数量表（browser_multi_usage） 

1.统计单个用户使用的浏览器种类，通过脚本划分为 1 种、2 种、3 种及以上三类，分组统计人数。

4.工作日 / 周末对比表（browser_weekday_weekend） 

1.通过脚本解析日期星期，区分工作日、周末。

2.分组计算人均时长、总时长、用户数，完成数据入库。

5.全局指标表（browser_overview） 

1.使用 SQL 一次性计算全局总时长、人均时长、活跃用户占比、重度用户占比。

2.借助行转列组件，将多列指标转为键值对格式，适配指标卡展示。

2.4.4用户画像表加工

1.导入人口属性 CSV 文件（demographic），通过计算器由出生年份计算用户年龄，再划分年龄段。

2.使用记录集连接，以用户 ID 为关联键，将行为明细数据与用户属性数据左连接。

3.按浏览器、性别、年龄、学历、职业等维度分组统计用户数，生成用户画像统计表。

2.5实验结果

1.成功创建 9 张 MySQL 数据表，所有数据表字段规范、数据完整，无重复、缺失数据。

2.完成数据清洗、转换、聚合全流程，原始 800 万条明细数据提炼为多维度统计结果，满足大屏可视化数据要求。

3.所有 ETL 转换流运行正常，可重复调度执行。

2.6实验小结

本环节完成了可视化前置的数据准备工作，掌握了助睿 ETL 平台组件使用、SQL 建表、数据分组聚合、字段转换、多表关联等技能。明确了先聚合、后可视化的数据分析原则，零散的原始数据经过维度拆分与指标计算后，才能支撑业务大屏的展示需求。

三、实验二 浏览器市场分析静态大屏制作

3.1实验目标

基于已加工的统计表，使用助睿 Max 数据大屏工具，完成大屏页面布局、组件选型、样式美化，搭建完整的浏览器市场分析静态可视化页面。

3.2大屏设计规范

1.布局逻辑：遵循从上到下、先整体后局部的叙事逻辑，顶部为标题 + 导航 + 核心指标，中部为市场格局、时段分析、用户行为图表。

2.组件选型：趋势用折线图、对比用柱状图、占比用饼图、指标用数据翻牌器。

3.样式规范：统一背景、标题样式，6 款浏览器配置固定配色，保证视觉统一。

3.3详细实验步骤

3.3.1新建大屏与基础页面设置

1.进入助睿数据大屏平台，选择空白模板，命名为市场分析，画布尺寸设置为 1920×1080。

2.配置全局背景，粘贴背景图片链接，完成页面底色设置。

3.添加单张图片组件制作顶部标题 Banner，调整大小、位置并配置图片链接。

4.制作导航栏：添加图片背景 + 文字组件，分别设置 “市场分析”“用户画像” 导航按钮，区分选中 / 未选中样式，将顶部组件统一成组。

3.3.2分区搭建图表模块

按照业务模块分区，依次制作各大图表区域，每个区域统一由区域背景图 + 标题背景 + 文字标题 + 图表组成。

1.

数据概览区（指标卡）

2.

1.添加长标题背景与 “数据概览” 文字标题。

2.批量添加数据翻牌器与装饰图标，分别命名为总使用时长、人均使用时长、活跃用户占比、重度用户占比。

3.调整翻牌器字体、字号、单位后缀，排版为横向布局，组合成指标卡组。

3.

市场格局模块

4.

1.浏览器用户数：添加基础柱状图，调整图例、边距、样式。

2.浏览器使用时长占比：添加多维度饼图，关闭外圈，配置 6 类浏览器专属颜色。

3.人均使用时长：复用柱状图组件，调整布局与样式。

5.

用户行为 & 时段模块

6.

1.工作日 vs 周末对比：添加分组柱状图，区分两组柱子颜色。

2.24 小时活跃分布、周活跃趋势：使用折线 / 区域图，配置多系列颜色，适配多浏览器数据。

2.使用频率分布：添加堆叠柱状图。

3.浏览器使用数量分布：添加基础饼图，调整标签与半径样式。

3.3.3整体排版与样式优化

1.统一所有图表区域的大小、间距，保证页面整齐协调。

2.逐个调整图表图例、坐标轴、标签、颜色，匹配浏览器配色规范。

3.对所有组件按功能分组，方便后期管理与数据接入。

4.多次预览，微调细节样式，完成静态大屏制作。

3.4实验结果

1.完成 1920×1080 标准数据大屏页面，包含标题、导航、4 个指标卡、8 个业务图表，布局合理、视觉美观。

2.所有组件分类分组完毕，图表类型与分析维度匹配，样式符合设计规范，静态展示效果达标。

3.5实验小结

本实验掌握了助睿 Max 大屏的基础操作、组件使用、布局排版与样式美化。理解了可视化大屏 “功能优先、视觉为辅” 的设计思路，学会根据数据特征选择对应图表，同时掌握了组件分组、批量复用、样式统一等实用技巧。

四、实验三 大屏蓝图编辑器与动态数据接入

4.1实验目标

使用助睿 Max蓝图编辑器，完成数据源连接、SQL 查询、数据处理、组件数据绑定，将 MySQL 统计表数据动态加载至静态大屏，实现图表实时数据展示。

4.2核心概念说明

1.数据源：对接团队私有 MySQL 数据库，定义数据来源。

2.触发器：以页面初始化为触发事件，大屏打开自动加载数据。

3.SQL 请求：编写查询语句，从目标表提取大屏所需数据。

4.并行数据处理：对单条 SQL 查询结果拆分、字段映射，分发至多个组件。

5.动作节点：将处理后的数据导入图表 / 指标卡，完成数据渲染。

4.3详细实验步骤

4.3.1创建数据库数据源

1.进入大屏 “我的数据” 模块，点击「新建数据源」，选择 MySQL 类型。

2.填写数据库地址、端口、账号、密码，测试连接并保存，完成数据源创建。

4.3.2组件导入蓝图编辑器

1.打开静态大屏画布，右键所有图表、指标卡组件，选择导出到蓝图编辑器。

2.切换至蓝图编辑页面，确认所有组件节点已成功导入。

3.

4.3.3全局触发节点配置

1.从逻辑节点面板拖拽全局节点至画布，该节点以 “页面初始化完成” 作为全局触发器，大屏加载时自动执行后续数据动作。

4.3.4分模块配置 SQL 与数据绑定

4.3.4.1市场格局图表（柱状图、饼图）

1.拖拽SQL 请求节点，将全局节点的输出接口连接至 SQL 请求执行接口。

2.选择数据源为团队 MySQL，编写 SQL 查询browser_coverage表，提取浏览器名称、用户数、总时长、人均时长字段。

3.添加并行数据处理节点，新建 3 个处理分支，分别对数据做字段映射，适配三个图表的数据格式。

4.将并行处理的输出分别连接至浏览器用户数柱状图、时长饼图、人均时长柱状图的数据接口，保存配置并预览。

4.3.4.2顶部指标卡

1.新增 SQL 请求节点，查询browser_overview指标表，获取四大核心指标。

2.添加并行数据处理，划分 4 个分支，通过find方法匹配指标名称，输出指标值，适配数据翻牌器格式。

3.分支接口分别对接 4 个指标卡，完成指标数据动态加载。

4.3.4.3其余业务图表

参照统一流程，依次完成剩余图表配置：

1.工作日 vs 周末分组柱状图：查询browser_weekday_weekend表，直接绑定数据接口。

2.24 小时活跃折线图：查询browser_hourly分时数据表，配置多系列颜色匹配图例。

2.周活跃趋势图：查询browser_weekly_active周数据表，调整折线样式。

3.使用频率堆叠图：查询browser_frequency_stats表，完成字段映射。

4.浏览器数量饼图：查询browser_multi_usage表，绑定名称与值字段。

4.3.5样式微调、预览与发布

1.针对数据加载后的图表，微调图例、颜色、标签，保证数据与样式匹配。

2.点击大屏预览，检查所有图表、指标卡数据是否正常展示、无报错。

3.预览无误后，点击发布，生成公开分享链接，完成大屏上线。

4.4实验结果

1.成功完成 MySQL 数据源对接，所有 SQL 请求执行正常，数据查询无异常。

2.蓝图节点连线、数据处理、字段映射全部生效，大屏所有组件均可动态加载数据库真实数据。

3.大屏预览、在线访问正常，发布链接可正常打开，动态可视化效果符合要求。

4.5实验小结

本实验掌握了蓝图编辑器的核心使用方法，理解了触发器 – SQL 查询 – 数据处理 – 组件绑定的完整数据流逻辑。学会了编写大屏专用查询 SQL、使用并行处理实现一份数据多组件复用，实现了从静态页面到动态数据大屏的升级，理解了低代码可视化平台的数据交互原理。

五、整体实验总结

5.1实验收获

本次实验分为数据加工、静态大屏、动态数据接入三大模块，完整复刻了企业数据大屏从数据层到可视化层的全流程：

1.数据层：熟练使用 ETL 工具完成数据清洗、聚合、关联，掌握面向可视化的数据建模思路。

2.可视化设计层：学会大屏布局、组件选型、视觉美化，具备基础可视化页面设计能力。

3.交互开发层：理解低代码蓝图编辑器的数据流逻辑，掌握数据源配置、SQL 查询、数据分发与组件绑定技能。

5.2业务分析结论（基于大屏数据）

1.市场格局：主流浏览器用户体量差距明显，头部浏览器占据大部分市场份额，同时部分小众浏览器用户粘性（人均时长）更高。

2.使用时段：用户活跃高峰集中在日间及晚间，凌晨活跃度大幅下降，符合大众上网作息。

3.使用习惯：大部分用户仅使用 1 款浏览器，少数用户会同时切换多款浏览器；工作日与周末的使用时长、使用偏好存在明显差异。

4.用户分层：中度使用用户占比最高，重度用户群体规模较小，可针对不同使用层级制定运营策略。

5.3问题与改进方向

1.问题：多组件共用一份数据时，并行处理分支较多，节点布局较为杂乱；部分图表颜色在不同分辨率下显示偏差。

2.改进：优化蓝图节点布局，分类整理数据流；统一全局色值，增加分辨率适配配置；可新增筛选交互，实现单浏览器数据筛选查看。

5.4实验整体评价

本次实验流程完整、贴近企业实际数据分析岗位工作场景，从原始数据处理到可视化落地层层递进。通过实验，不仅掌握了助睿平台全链路工具的使用，也建立了数据加工→可视化设计→动态交互的标准化工作思维，为后续大数据可视化、用户画像、数据分析类学习与实践打下扎实基础。