第一部分 实验背景

1.1 实验目的

本次实验分为ETL 数据加工、大屏静态布局搭建、蓝图数据接入三个子任务，分阶段掌握不同实操技能：

数据加工阶段（实验五 - 1）：熟练使用助睿 ETL 零代码组件，完成原始海量行为数据清洗、分层聚合，按照业务需求生成浏览器市场、用户画像相关统计数据表；掌握表创建、字段映射、JS 自定义逻辑、多表关联、用户分层（轻 / 中 / 重度）、工作日 & 周末场景划分、用户画像多维度统计等数据处理技能。

大屏布局阶段（实验五 - 2）：遵循数据大屏设计规范，根据业务问题完成页面布局、图表选型，熟练使用大屏媒体组件、各类图表组件、文字组件，完成背景、标题、导航、图表分区静态配置，学会可视化配色与排版逻辑。

数据对接阶段（实验五 - 3）：理解蓝图编辑器核心概念（数据源、触发器、SQL 请求、并行数据处理），掌握 MySQL 数据源配置、组件蓝图导出、SQL 编写、JS 数据格式化、图表数据绑定，实现数据库数据动态渲染至大屏。 整体实验任务：基于 1000 名用户、800 万 + 条浏览器行为原始数据，加工聚合统计表，搭建「2012 年浏览器全景分析」可视化数据大屏，从市场格局、活跃趋势、使用习惯、用户画像四大维度实现数据可视化落地并生成可公网访问的分享链接。

1.2 实验环境

软件平台：助睿数智（Uniplore）一站式零代码数据科学平台，集成 ETL 数据集成模块、Max 数据可视化大屏模块、蓝图低代码编辑器，平台覆盖数据接入→ETL 处理→建模→可视化全链路。

数据库环境：平台内置团队私有 MySQL 数据库，用于存储原始明细数据与加工后的汇总统计表。

实验数据源

行为数据源：前期实验产出daily_browser_detail（用户 - 日 - 浏览器 - 小时明细表）、原始行为日志（800 万 + 记录，825MB）；

用户属性源：公共资源demographic.csv用户人口属性文件（性别、出生年份、学历、职业、收入、省份、居住地等字段）；

浏览器分类：6 类主流浏览器（IE、360 极速、360se、Google Chrome、搜狗、QQ 浏览器）。

1.3 整体处理流程

实验整体分为三大核心流程，自上而下闭环：

第一阶段：ETL 数据加工（实验 1）：建明细表→复制并改造历史清洗转换流生成明细数据→批量创建所有目标统计数据表→分 8 个转换流，依次完成周活跃、使用频率、多浏览器使用、工作日周末对比、全局指标、用户画像等统计汇总表落地；

第二阶段：大屏静态设计（实验 2）：新建空白大屏→画布全局配置（尺寸、背景、顶部标题 + 导航栏）→按照业务分区，逐个绘制图表容器（分区底图 + 标题 + 对应图表），完成 9 个可视化模块静态布局；

第三阶段：蓝图数据绑定（实验 3）：配置团队库 MySQL 数据源→全部图表 / 指标组件导出蓝图→依托页面初始化全局触发器，逐个编写 SQL 查询、配置并行数据处理 JS 逻辑、绑定组件数据→样式微调→预览、发布大屏生成分享链接。

第二部分 实验步骤

模块一：ETL 数据加工

步骤 1 创建daily_browser_detail用户日浏览器小时明细表

• 操作说明：新建转换流，通过 SQL 脚本组件在团队库创建明细表；复制往期日志清洗转换流，修改排序规则、新增进程名→浏览器名称映射、配置表输出落地明细数据。

• 配置要点
  1. 建表 SQL 使用CREATE TABLE IF NOT EXISTS，字段包含 user_id、usage_date、browser_name、hour、total_duration_sec、active_count；
  2. 排序组件字段统一为user_id、usage_date、process_name、hour；
  3. 值映射绑定 6 类进程与浏览器：iexplore.exe→IE、360chrome.exe→360 极速等；
  4. 表输出勾选【裁剪表】，流字段与库字段一一映射。

步骤 2 批量创建全部目标统计数据表

• 操作说明：新建转换流，使用 SQL 脚本组件，批量执行 DROP+CREATE 语句，一次性创建browser_overview、browser_weekly_active、browser_frequency_stats、browser_multi_usage、browser_weekday_weekend、user_profile_stats6 张业务统计表。

• 配置要点：建表前使用DROP TABLE IF EXISTS规避重复建表报错，所有表添加字段注释，引擎统一 InnoDB、字符集 utf8mb4。

步骤 3 浏览器周活跃统计表browser_weekly_active抽取

• 操作说明：表输入读取明细→值映射将日期匹配 4 个统计周→排序→分组去重统计活跃用户→数据入库。

• 配置要点：日期映射 4 个周（5/7-5/13、6/4-6/10、7/2-7/8、8/6-8/12）；分组字段browser_name+week_range，聚合 COUNT (DISTINCT user_id)。

步骤 4 浏览器使用频率browser_frequency_stats加工

• 操作说明：用户 + 浏览器维度汇总总秒数→新增常量 3600，计算器换算使用小时→JS 代码划分轻 / 中 / 重度用户→分组统计各等级用户数量。

配置要点：使用规则：周时长＜3h = 轻度、3≤h＜10 = 中度、＞10 = 重度；总秒 ÷3600 = 使用小时。

步骤 5 用户多浏览器使用分布browser_multi_usage加工

• 操作说明：按用户去重统计浏览器使用个数→JS 划分 1 种 / 2 种 / 3 种及以上→分组统计各类人数。

• 配置要点：user_id 分组，DISTINCT (browser_name) 统计种类，1/2/≥3 三段标签划分。

步骤 6 工作日 & 周末对比browser_weekday_weekend加工

• 操作说明：JS 根据日期计算星期，1~5 工作日、0/6 周末→分组计算人均使用秒、总使用秒，换算总小时。

• 配置要点：dayOfWeek (1~5)= 工作日，其余 = 周末；avg 求单用户平均时长，sum 总秒再 ÷3600 得总小时。

步骤 7 全局指标表browser_overview加工

• 操作说明：单 SQL 查询全局四大指标（总时长、人均时长、活跃占比、重度占比）→列转行 + 英文字段转中文→键值对入库。

• 配置要点：列转行拆分 4 条指标数据，值映射替换英文 key 为中文指标名。

步骤 8 用户画像统计表user_profile_stats加工

• 操作说明：导入 demographic.csv 属性文件→出生年份计算年龄并分段→明细左联用户属性→多维度分组统计用户数。

• 配置要点：2012 - 出生年份 = 实际年龄，<18、18-25、26-35、＞35 四段；LEFT JOIN 关联用户 ID，分组字段：browser_name、gender、age_group、edu、job、income、province、city_type。

模块二：大屏静态布局搭建（对应实验五 2 文档）

步骤一：创建数据大屏

 • 关键操作说明：

进入助睿数据大屏可视化平台，新建一个空白模板的市场分析大屏项目。

 • 关键截图：

• 配置要点：

 o 在实验平台左侧菜单点击“数据大屏”进入子平台。

 o 点击“+新建” -> “新建大屏”，在模板选择中点击“空白模板”。

 o 在弹出的输入框中输入大屏名称“市场分析”，点击下一步进入制作界面。

步骤二：设置大屏背景样式 

• 关键操作说明：

修改大屏的全局背景图片，使用指定的OSS图片链接替换默认背景。

 • 关键截图：

• 配置要点：

 o 进入大屏编辑页面，在右侧“页面设置”栏确认屏幕大小默认为1920x1080。

 o 将指定的背景图片链接（bg-2）复制并粘贴到“背景图片”后的文本框中，覆盖原链接。 o 其他背景设置保持默认，确保背景图正常铺满画布。

步骤三：设置大屏标题样式 

• 关键操作说明：

添加单张图片组件作为大屏的标题Banner，并配置其尺寸、位置及图片链接。

• 关键截图：

• 配置要点：

o 在左侧“媒体”分类下点击“单张图片”组件，右键重命名为“标题banner”。

 o 在右侧“基础属性”中精确设置长宽和位置坐标。

 o 在“基本设置”中，将指定的标题图片链接（banner01.png）粘贴覆盖原链接，保存并预览效果。

步骤四：设置大屏导航组件

 • 关键操作说明：

制作“市场分析”和“用户画像”两个导航按钮，实现大屏间的跳转视觉区分，并将顶部组件成组管理。

• 关键截图：

• 配置要点：

 o 添加“单张图片”和“通用标题”组件组合成“市场分析”按钮，设置背景图链接（navigation-bg-1.png）及文字样式（选中效果）。

 o 复制该按钮组合制作“用户画像”按钮，修改横坐标位置、文字内容，并调整颜色粗细为未选中效果（若复制后不显示需点击刷新数据）。

 o 选中顶部区域所有组件，右键选择“成组”并命名为“顶部”。

步骤五：制作“用户规模”模块（浏览器用户数）

 • 关键操作说明：在左上角区域搭建第一个图表模块，包含区域背景、标题背景、标题文字及基础柱状图。

 • 关键截图：

 

 • 配置要点：

 o 依次添加“单张图片”组件作为“区域背景”和“标题背景”（使用短标题背景图链接），并调整大小位置。

 o 添加“通用标题”组件，修改标题名为“浏览器用户数”，设置左对齐及相应文本样式。 o 添加“基础柱状图”组件，在图例设置中开启可见并居中对齐，在“全局样式”中调大柱子上边距以优化美观度，最后将组件成组命名为“浏览器用户数”。

步骤六：制作“使用规模”模块（浏览器使用时长占比）

 • 关键操作说明：复制上一模块并修改为多维度饼图，展示各浏览器的使用时长占比情况。

 • 关键截图：

 

• 配置要点：

 o 复制“浏览器用户数”组并重命名为“浏览器使用时长”，修改标题并刷新数据。 o 删除原柱状图，添加“多维度饼图”组件。

 o 在“饼图样式”中取消外圈显示（透明度拖到0），开启标签类目可见。

 o 在“数据系列”中为6个浏览器分别设置指定的主题色值（如#2177FC、#3DC3DF等）。

步骤七：制作“使用粘性”模块（浏览器人均使用时长） 

• 关键操作说明：复制基础柱状图模块，调整位置并修改标题，展示浏览器人均使用时长数据。

 • 关键截图：

 

• 配置要点：

o 复制“浏览器用户数”组，重命名为“浏览器人均使用时长”并拖拽至布局草图指定位置。

o 若复制组件内容不显示，点击“刷新数据”。

o 将标题名修改为“浏览器人均使用时长”并刷新数据，图表类型保持柱状图不变，重命名图表组件。

步骤八：制作“数据概览”指标区模块 

• 关键操作说明：搭建数据概览区域，使用长标题背景，并通过数据翻牌器结合图标展示四个核心指标。

 • 关键截图：

• 配置要点：

 o 复制基础组并重命名为“数据概览”，更换为长标题背景图（title-bg-long），修改标题名。

 o 删除图表，添加“单张图片”作为图标装饰，添加“数据翻牌器”展示“总使用时长”，调整标题和翻牌器的居中对齐及样式。

 o 将图标与翻牌器成组，复制3份制作“人均使用时长”、“活跃用户占比”、“重度用户占比”，修改对应图标链接、翻牌器标题及后缀，调整整体位置。

步骤九：制作“时段偏好”模块（周内对比与24小时分布）

 • 关键操作说明：制作工作日与周末使用时长对比的分组柱状图，以及24小时活跃用户数分布的区域图。

 • 关键截图：

• 配置要点：

 o 周内对比：复制基础组，更换长标题背景，标题改为“工作日vs周末使用时长”。添加“分组柱状图”，调整系列2柱子颜色为#3DC3DF及其他全局样式。

 o 24小时分布：复制周内对比组，标题改为“24小时活跃用户数分布”。删除分组柱状图，添加“区域图”，调整样式并设置参考颜色为#29F1FA。

步骤十：制作“趋势、习惯与竞争”模块（周活跃、频率与数量分布）

 • 关键操作说明：完成大屏底部及右侧剩余三个图表模块的搭建，包括折线图、垂直基本柱图和基本饼图。

• 关键截图：

 • 配置要点：

 o 周活跃趋势：复制基础组，调整位置与标题，更换图表类型为折线图，展示周活跃用户数变化。

 o 使用习惯：复制上一组，重命名为“使用频率分布”，更换图表类型为“垂直基本柱图”并调整样式。

o 竞争关系：复制上一组，重命名为“浏览器使用数量分布”，更换图表类型为“基本饼图”并调整饼图样式。

 o 完成所有模块后，保存大屏并预览最终静态布局效果。

模块三：蓝图编辑器数据接入（对应实验五 3 文档）

步骤一：创建数据库数据源

• 关键操作说明： 进入数据大屏平台的“我的数据”模块，新建一个指向团队私有数据库的数据源。
• 关键截图：
• 配置要点：
  • 数据源类型：选择对应的数据库类型（如MySQL、PostgreSQL等）。
  • 连接信息：准确填写团队私有数据库的主机地址、端口、数据库名称、用户名和密码。
  • 连通性测试：建议在添加前进行测试，确保网络和权限无误。

步骤二：组件导出到蓝图编辑器

• 关键操作说明： 打开上一实验制作的“市场分析”大屏，在画布编辑器中，将所有需要接入数据的组件（图表、指标卡等）依次“导出到蓝图编辑器”。
• 关键截图：

• 配置要点：
  • 导出对象：需要配置数据的所有可视化组件（如柱状图、饼图、折线图、数字翻牌器）。
  • 导出方式：可通过左侧图层栏或中间画布区右键组件进行操作。
  • 验证方法：导出成功后，在蓝图编辑器的“导入节点”面板中能看到对应的组件节点。

步骤三：添加全局节点

• 关键操作说明： 在蓝图编辑器的“逻辑节点”面板中，将“全局节点”拖入中间画布。该节点用于在大屏打开时自动触发后续数据加载操作。
• 关键截图：

• 配置要点：
  • 节点作用：“全局节点”的“页面初始化完成”输出接口可作为整个数据流的起点。
  • 后续连接：该输出接口需要连接到后续“SQL请求”节点的“执行SQL”输入接口。

步骤四：为“市场格局”3个图表配置数据

• 关键操作说明： 添加“SQL请求”节点，编写SQL查询browser_coverage表；添加“并行数据处理”节点，编写三个数据处理方法，分别提取三个图表所需字段；最后将处理结果连接到对应的三个图表节点。
• 关键截图：
  
• 配置要点：
  • SQL查询（一次查询，多次复用）：

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 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: '人均时长(小时)' }))
    • • 图表节点连接：将三个处理方法的输出接口分别连接到对应图表组件的“导入数据接口”。
      • 样式调整：可在画布编辑器中对饼图调整内外半径，使显示效果更协调。

    • 步骤五：为“指标区域”4个数字翻牌器配置数据

    • 关键操作说明： 添加新的“SQL请求”节点查询browser_overview表；添加“并行数据处理”节点，编写四个数据处理方法，从返回数组中过滤出各自指标的数值；连接到四个数字翻牌器组件。
    • 关键截图：
      
    • 配置要点：
      • SQL查询：select metric_name, metric_value from labs.browser_overview
      • 并行数据处理代码（以“总使用时长”为例）：

    • javascript

      var item = data.find(d => d.metric_name === '总使用时长');

      return [{ value: item ? item.metric_value : 0 }];

      （其他三个处理方法类似，只需修改metric_name的匹配值）

    • • 组件映射：指标名称已预先在翻牌器组件标题中配置好，数据处理只需返回{ value: xxx }格式。

    • 步骤六：为“工作日vs周末使用时长”图表配置数据

    • 关键操作说明： 添加“SQL请求”节点，查询browser_weekday_weekend表；直接将SQL节点的输出连接到“工作日vs周末使用时长”图表节点。
    • 关键截图：

    • 

    • 配置要点：
      • SQL查询：

    • 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

    • • 数据格式：查询结果直接满足图表所需的x、y、s（系列）字段格式。

    • 步骤七：为“24小时活跃用户分布”折线图配置数据

    • 关键操作说明： 添加“SQL请求”节点，查询browser_hourly表；将SQL节点连接到图表节点；在画布编辑器中为6个浏览器系列手动配置折线和标记颜色。
    • 关键截图：
      
    • 配置要点：
      • SQL查询：

    • sql

      select hour as x, active_user_count as y, browser_name as s

      from labs.browser_hourly order by browser_name, hour

    • • 颜色一致性：需在图表的“数据系列”面板中，为每个浏览器（图例）分别设置折线颜色和标记点颜色，确保图例、折线、标记点颜色一致。

    • 步骤八：预览并发布大屏

    • 关键操作说明： 所有数据配置完成后，依次点击“预览”按钮进行最终效果检查；确认无误后点击“发布”按钮，生成分享链接并复制，在浏览器中打开进行在线演示。
    • 关键截图：
      
       
    • 配置要点：
      • 预览：在发布前务必预览，检查所有图表数据是否正常加载、样式是否协调、交互是否符合预期。
      • 发布：发布后生成的链接为公开或指定权限访问，注意数据安全。
      • 分享：复制链接后可通过任何浏览器访问，无需登录平台即可观看大屏。

    • 第三部分 实验结果

      3.1 数据输出成果

    • 数据库成果（团队私有 MySQL） 共落地 8 张标准化业务统计表： | 数据表名称 | 数据用途 | | ---- | ---- | |daily_browser_detail | 原始明细基础表 | |browser_overview | 大屏顶部 4 项全局指标源表 | |browser_coverage | 浏览器用户数、使用时长、人均时长数据源 | |browser_weekly_active | 周活跃趋势折线数据源 | |browser_frequency_stats | 轻中重度用户分布数据源 | |browser_multi_usage | 用户多浏览器占比饼图数据源 | |browser_weekday_weekend | 工作日周末分组柱状数据源 | |user_profile_stats | 用户画像多维度统计结果 |

    • 可视化成果 完成1920×1080《2012 年浏览器全景分析》商用数据大屏，整体结构：顶部标题导航 + 数据概览指标区 + 9 个业务分析图表；生成可在线访问公网分享链接，链接可直接在浏览器打开查看完整可视化页面。

    • 3.2 结果校验与分析

    • 数据逻辑验证
      • 总量校验：各浏览器用户去重总和与全量用户总数匹配，轻度 / 中度 / 重度用户累加总数和基准用户一致；
      • 场景校验：工作日人均使用时长普遍高于周末，符合办公时段浏览器使用规律；
      • 画像校验：用户年龄、学历、省份分布和原始 demographic.csv 抽样数据保持一致，关联 JOIN 无数据丢失。
    • 大屏可视化验证 所有图表可动态加载数据库实时聚合数据，图例、配色、坐标轴正常；指标卡数值与统计表browser_overview完全一致；筛选、图例交互生效，发布链接访问页面无图片空白、数据缺失问题。
    • 业务结论（数据分析） 从大屏数据可直观得到：某款浏览器用户基数领先、部分产品用户粘性（人均时长）更高；工作日办公场景使用量显著高于休闲周末；超半数用户仅安装 1 款浏览器，用户忠诚度整体偏高；不同年龄段、地域用户浏览器偏好区分明显。

    • 第四部分 问题与解决

      表格

      序号	问题现象	问题成因	解决方案
      1	ETL 分组统计用户数量虚高、重复计数	分组前排序字段缺失，数据乱序导致分组拆分错误	修改排序组件，排序字段和分组字段完全统一（user_id+browser_name）
      2	JS 年龄计算、日期映射出现空值 / 负数	demographic.csv 部分用户出生年份为空、个别日期格式异常	JS 代码增加空值判断，过滤无效空数据行
      3	大屏背景 / 标题图片空白无法展示	OSS 图片链接粘贴携带多余空格、链接复制不全	删除链接多余空格，严格使用实验文档指定官方图片 URL
      4	蓝图 SQL 查询返回数据正常，但图表空白无内容	JS 数据处理输出字段名和图表数据接口字段（x/name/value）不匹配	修改并行处理 JS 代码，对齐组件预设数据字段格式
      5	折线 / 饼图图例和图形颜色错位不一致	未按 6 款浏览器逐个手动配置数据系列颜色	在图表样式 - 数据系列中，依次填入 6 组固定色值，一一对应浏览器
      6	表输出写入数据库报错、字段不匹配	流字段和目标表字段顺序错乱	在表输出勾选【指定数据库字段】，手动映射字段一一对应

      第五部分 实验总结

      5.1 实验收获

    • 数据处理技能收获 熟练掌握助睿零代码 ETL 全套常用组件：SQL 脚本、表输入输出、值映射、JS 自定义计算、分组聚合、记录集 JOIN、常量 / 计算器组件；掌握海量千万级明细数据分层聚合思路，学会按时间（周 / 小时）、场景（工作日 / 休闲）、用户分层（轻中重度）、用户属性多维度拆分统计，具备从原始日志加工指标的落地能力。
    • 可视化设计收获 掌握数据大屏标准设计逻辑：先全局总指标、后细分维度图表，从上至下业务叙事排版；熟练区分不同分析场景图表选型（趋势用折线、占比用饼、对比用柱状、时段分布用区域图），学会大屏配色、分区、素材规范化配置。
    • BI 开发收获 吃透蓝图编辑器设计思想，理解数据源→触发器→SQL 请求→数据处理→组件绑定全链路；可以独立编写业务查询 SQL、JS 数据格式化代码，实现数据库数据和可视化大屏动态联动。
    • 业务分析收获 依托落地数据，能够从市场占有率、用户活跃度、产品粘性、用户画像四大维度，解读浏览器产品市场现状，形成基础数据分析结论。

    • 5.2 平台整体评价

    • 优点：助睿 Uniplore 全零代码设计，无需编写底层代码即可完成从数据清洗→ETL 加工→可视化全流程，组件封装成熟、可视化拖拽操作简单，非常适合大数据实训教学；内置 MySQL、CSV 多数据源适配，蓝图可视化编排大幅降低 BI 开发入门门槛。
    • 待优化点：大屏素材依赖指定 OSS 资源，链接异常极易导致图片失效；千万级明细数据全量运算时，转换流执行加载速度偏慢；蓝图节点连线过多时画布排版繁琐

#助睿数智

#商业数据分析