1、实验目的

本系列实验基于“用户-日-浏览器-小时”明细表及用户属性数据，完整实践了从数据加工、大屏静态布局设计到数据动态接入的全流程，最终构建一个完整的“浏览器市场与用户画像分析”数据大屏。

  • 数据加工：基于明细数据，完成市场格局、周活跃趋势、使用频率、用户画像等各项统计表的加工。
  • 大屏布局：根据业务分析问题，设计大屏的叙事结构与图表选型，制作静态大屏布局。
  • 数据接入：使用助睿Max蓝图编辑器，将已加工的数据表接入大屏图表组件，实现动态数据展示。

通过本系列实验，应掌握：

  • 使用助睿ETL平台进行多目标表的数据加工流程（排序、分组、连接、计算等）。
  • 根据业务问题设计大屏布局与图表选型。
  • 理解蓝图编辑器的核心概念（数据源、查询、触发器、动作）。
  • 创建数据库连接，编写SQL查询，并将结果绑定到图表组件。

2.实验环境与平台

  • 实验平台：助睿在线实验平台 (https://lab.guilian.cn/)
  • 数据科学平台：助睿数智 (Uniplore) - 覆盖数据接入、ETL、建模到可视化全链路。
  • 数据处理：助睿ETL数据集成平台、助睿AI人工智能平台。
  • 可视化工具：助睿Max（数据大屏）。
  • 数据来源：团队私有数据库（MySQL），包含1000用户的800余万条行为记录（约825MB）及用户属性表。

3.实验数据

本系列实验主要涉及以下数据：

  • 原始数据：
    • behavior_events：互联网用户行为日志明细表
    • demographic.csv：用户人口属性信息表（含性别、年龄、学历、职业、收入、省份、居住地类型）
  • 中间明细表：
    • daily_browser_detail：用户-日-浏览器-小时明细表（由原始数据加工而来）
  • 目标统计表（共8张）：
    • browser_overview：核心指标概览表
    • browser_coverage：浏览器市场覆盖率统计表
    • browser_weekly_active：各浏览器周活跃趋势表
    • browser_hourly：浏览器时段活跃统计表
    • browser_frequency_stats：浏览器使用频率分布表
    • browser_multi_usage：用户浏览器使用数量分布表
    • browser_cooccurrence：竞品重叠分析表
    • browser_weekday_weekend：浏览器工作日与周末对比表
    • user_profile_stats：用户画像统计表

4.整体分析框架

核心业务问题：大屏旨在回答以下问题：哪个浏览器用户最多/用得最久？用户活跃度趋势如何？用户何时最活跃？使用频率如何？用户同时用几个浏览器？工作日与周末习惯有何差异？核心用户画像（性别、年龄、职业等）是怎样的？

分析维度与目标表对应关系：

分析维度

对应目标表

用途

市场格局

browser_coverage

各浏览器用户数、使用时长、人均时长

核心指标

browser_overview

总使用时长、人均时长、活跃/重度用户占比

周活跃趋势

browser_weekly_active

各浏览器每周活跃用户数变化

时段偏好

browser_hourly

24小时各浏览器活跃用户分布

使用频率

browser_frequency_stats

轻度/中度/重度用户在各浏览器的分布

浏览器使用数量

browser_multi_usage

用户使用1种、2种、3种及以上浏览器的比例

工作日vs周末

browser_weekday_weekend

各浏览器在工作日与周末的人均使用时长对比

用户画像

user_profile_stats

按性别、年龄、学历、职业、收入、地域等维度统计各浏览器的用户数

5项目创建与环境准备

在进行具体的数据加工、大屏制作之前，需要先完成以下基础准备工作。

5.1 登录实验平台

打开浏览器，访问助睿在线实验平台：https://lab.guilian.cn/ ，使用个人账号登录。

5.2 创建项目

在平台主界面，点击“新建项目”，输入项目名称（如“浏览器市场分析”），点击“确认”完成项目创建。

项目创建成功后，进入项目主界面，可以看到以下功能模块：

  • 转换流：用于ETL数据加工
  • 数据大屏：用于可视化大屏制作
  • 文件库：存放数据文件（如CSV）
  • 团队私有数据库：存放加工后的数据表

5.3 确认数据资源

5.3.1 原始数据

实验所需原始数据已预先存放在平台的公共空间数据资源中：

  • behavior_events：互联网用户行为日志明细表（已在数据库中）
  • demographic.csv：用户人口属性信息表（如需使用，从公共空间导出到项目文件库）

5.3.2 数据库连接

确保“团队私有数据库”连接可用。在后续实验中，所有目标表都将写入该数据库，所有SQL查询也将基于该数据库执行。

5.4 整体实验流程概览

三个实验的逻辑关系如下，建议按顺序完成：

实验

主要内容

输入

输出

实验5-1

数据加工

behavior_events、demographic.csv

8张目标统计表

实验5-2

大屏静态布局制作

目标统计表结构

“市场分析”大屏（静态）

实验5-3

大屏数据接入

目标统计表数据、静态大屏

“市场分析”大屏（动态）

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

Google

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个不是浏览器

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='用户画像统计表';
  1. 点击“运行”按钮，执行转换流

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用来存储映射结果，接下来就插入行，将每个日期映射为对应的周区间（5/7-5/13、6/4-6/10、7/2-7/8、8/6-8/12）

接下来我们按各浏览器、周分组统计用户数，分组之前需要对数据进行排序，避免统计结果出错。拖拽排序记录组件到画布中，创建值映射组件到排序记录组件的连线

排序记录组件设置为按照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”组件在空白表格处右键点击“获取字段”

仅保留“user-id”，其他字段选中后右键点击“删除选中的行”

设置 user_id 升序排序后点击“确认”

同样的双击“排序记录”组件，设置按 USERID 升序排序

接下来，两个数据就可以通过记录集连接组件来关联了，拖拽“记录集连接”组件到画布中，2个排序记录组件分别连接到记录集连接组件，因为数据已经排序了，右上角的提示可以忽略

双击“记录集连接”组件，第一个Transform选择“明细数据按用户ID排序”，第二个Transform选择“用户属性数据按用户ID排序”，连接类型选择“LEFT OUTER”

分别右根点击插入，第一个为user_id,第二个为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选项，右键团队私有数据库，点击“加载元数据”

点击“数据探查”，查看以上生成的目标表是否符合预期

7 实验步骤

点击实验平台左侧菜单“数据大屏”

进入子平台——助睿数据大屏可视化平台

助睿数据大屏可视化是一款通过图形化界面轻松搭建专业可视化应用的产品，适用于会议展览、业务监控、风险预警、地理分析等场景。相比传统图表，它以更生动友好的形式即时呈现数据背后的业务洞察，广泛应用于零售、物流、电力、环保、交通等领域。其核心能力包括：丰富的基础组件库、地理信息可视化（轨迹/飞线/热力等）、支持多种数据源（含CSV）、拖拽式搭建无需编程，以及低代码蓝图编辑器（满足开发者的高级控制与数据处理需求）。

7.1 创建数据大屏

首先我们先创建本次实验的市场分析大屏，点击“+新建”按钮 - “新建大屏”

在模板选择中点击“空白模板”

点击后会出现大屏名称输入框

我们输入“市场分析”，然后点击下一步，自动跳转到“市场分析”大屏的制作界面

7.2 设置大屏样式

7.2.1 背景设置

想修改设置助睿数据大屏的背景，可以通过修改背景图片来完成

本次数据大屏的背景图片链接为：https://community.uniplore.com/uploads/default/original/1X/6dd9c7fd6793f1bb95f41f103734b1fdde45d982.jpeg

进入大屏编辑页面后，可以看到右边的页面设置栏，屏幕大小默认为1920x1080，可以根据最终展示的屏幕大小来修改。

将以上背景图片链接复制后粘贴到“背景图片”后的文本框中，覆盖原图片链接

其他设置可以保持默认

7.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就设置好了，我们点击“保存”

保存后点击“预览”，可以随时查看效果

7.2.3 导航设置

因为我们有两个大屏，所以可以设置导航做大屏间的跳转

同样的，点击“单张图片”组件，重命名为“市场分析按钮背景”

除了直接设置属性值，也可以通过拖拽和缩放来设置组件的大小和位置

不过微调还是使用属性值比较好，导航按钮的背景图片链接为： https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/comprehensive-data/navigation-bg-1.png 粘贴到基础设置的背景图链接中

按钮上的文字我们使用“通用标题”来实现，点击文字分类下的“通用标题”，重命名为“市场分析”

修改“市场分析”通用标题组件的基础属性，和“市场分析按钮背景”图片组件一样

点开基本设置，修改标题名为“市场分析”

切换“数据”tab选项，点击“刷新数据”

文字即显示为我们修改的文字

点开文本样式，可以设置字体、字号、颜色和粗细

第二个大屏的导航可以复制这个按钮的设置

复制的图片组件重命名为“用户画像按钮背景”，通用标题组件重命名为“用户画像”

现在，只需修改“用户画像按钮背景”和“用户画像”组件的横坐标，如下：

复制后的组件可能会不显示，刷新数据即可

将用户画像标题组件的内容改为“用户画像”，颜色和粗细也做相应修改（因为当前大屏的市场分析大屏，对应按钮为选中效果，其他为未选中效果）

保存预览一下

至此，顶部标题和导航配置完成，为方便管理，我们将这些组件放在一个组里。选中顶部区域的所有组件，右键“成组”

这个组命名为“顶部”

7.3 设置内容布局与样式

接下来，我们先根据“4.3大屏布局草图”将各图表进行排版

根据参考图，每个图表区域包含以下内容：

  1. 区域背景：使用单张图片组件
  2. 标题背景：使用单张图片组件
  3. 标题：使用通用标题组件
  4. 图表：使用具体图表组件

7.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个浏览器用户数的图表是柱状图，我们点击“基础柱状图”组件

重命名为“浏览器用户数柱状图”，调整大小和位置

图表的图例默认隐藏，我们将其设置为可见，并调整水平对齐方式为居中

这时候我们会发现，柱子和图例的距离过小，影响美观，我们可以点开“全局样式”来调整

将柱子上边距调大即可

其他样式，大家可以自行设置

将本小节增加的组件设置成组，命名为“浏览器用户数”

保存预览：

7.3.2 使用规模-浏览器使用时长占比

复制上一小节制作的“浏览器用户数”组，重命名为“浏览器使用时长”

参考布局草图，拖拽“浏览器使用时长”组到合适位置

复制的组件内容可能会不显示，重新刷新数据即可

将标题名修改为“浏览器使用时长”，并刷新数据

浏览器使用时长占比图表类型为饼图，我们删除复制的柱状图，重新添加饼图。助睿数据大屏提供多样不同样式的饼图，可根据需求选择，这里我们选择“多维度饼图”，调整位置大小，名重命名为“浏览器使用时长占比”

接下来设置饼图的样式，我们取消外圈显示，点击“饼图样式”，点击外圈颜色后的色值方块，将透明度拖到0，并点击“确定”

将标签类目设置为可见

接下来我们可以设置每个浏览器在饼图中的颜色，点开“数据系列”，系列及代表分类，也就是浏览器，刚好数据中有6个浏览器，将系列1-6的颜色设置为不同的颜色即可，色值参考：

#2177FC、#3DC3DF、#FF948B、#8A79FE、#82F9A5、#97DFFF

将饼图组件拖到“浏览器使用时长”组中，并及时保存

7.3.3 使用粘性-浏览器人均使用时长

复制5.3.1小节制作的“浏览器用户数”组，重命名为“浏览器人均使用时长”

参考布局草图，拖拽“浏览器使用时长”组到合适位置

复制的组件内容可能会不显示，重新刷新数据即可

将标题名修改为“浏览器人均使用时长”，并刷新数据

浏览器人均使用时长图表类型为柱状图，因此无需修改图表类型，将复制的柱状图重命名为“人均使用时长柱状图”即可

7.3.4 指标区

复制5.3.1小节制作的“浏览器用户数”组，重命名为“数据概览”

参考布局草图，拖拽“浏览器使用时长”组到合适位置，调整组件的大小，并刷新数据

可以看到标题背景被拉伸了，因为我们使用的是短的标题背景图，现在需要换成长的标题背景图：

https://community.uniplore.com/uploads/default/original/1X/ac58f5242bf3bf99148b6847058af6c21f5c8af2.png

将标题名修改为“数据概览”，并刷新数据

删除复制的柱状图，大屏中的指标卡是通过文字类组件实现的，我们使用数据翻牌器来展示指标，而单独一个指标看上去有点单调，可以添加一些装饰元素。

首先，添加“单张图片”组件，重命名为“图标”，背景图添加链接：

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

修改翻牌器标题、后缀，最后调整位置如下：

7.3.5 时段偏好-周内对比

复制数据概览组，重命名为“周内对比”

参考布局草图，拖拽“周内对比”组到合适位置

刷新复制的组件数据，并将标题背景图更换为长标题背景图，标题内容修改为“工作日vs周末使用时长”

添加“分组柱状图”，命名为“工作日vs周末使用时长分组柱状图”，并调整大小，位置如下：

接下来调整系列2的柱子颜色为#3DC3DF

其他样式调整参考如下：

效果：

7.3.6 时段偏好-24小时活跃分布

复制上一小节制作的“周内对比”组，重命名为“24小时活跃分布”

参考布局草图，拖拽“24小时活跃分布”组到合适位置

复制的组件内容可能会不显示，重新刷新数据即可

将标题名修改为“24小时活跃用户数分布”，并刷新数据

删除复制的分组柱状图，添加区域图，并调整好大小、位置

样式调整参考如下，参考颜色为#29F1FA：

效果：

7.3.7 周活跃趋势-浏览器周活跃用户数变化

复制5.3.1小节制作的“浏览器用户数”组，重命名为“浏览器周活跃用户数变化”，参考以上的实验，调整位置、标题并更换图表类型，实现如下效果：

7.3.8 使用习惯-使用频率分布

复制上一小节制作的“浏览器周活跃用户数变化”组，重命名为“使用频率分布”，参考以上的实验，调整位置、标题并更换图表类型为“垂直基本柱图”

7.3.9 竞争关系-浏览器使用数量分布

复制上一小节制作的“使用频率分布”组，重命名为“浏览器使用数量分布”，参考以上的实验，调整位置、标题共并换图表类型为“基本饼图”

基本饼图样式调整参考如下：

保存大屏，最终预览效果如下：

至此，市场分析大屏的静态布局已完成，下一实验我们将使用蓝图编辑器，完成数据接入。

8 实验步骤

8.1 创建数据库数据源

首先，我们需要创建链接团队私有数据库的数据源，进入数据大屏平台后，点击“我的数据”

点击“+新建” - “新建数据源”

输出团队私有数据库的信息后，点击“立即添加”

切换tab选项再切回我的数据后可以看见新添加的团队私有数据库(名称可以不一样，不影响使用）

8.2 组件导出到蓝图编辑器

只有当组件导入到蓝图编辑器后，才可以为该组件配置交互。

打开上一实验制作的“市场分析”数据大屏

在画布编辑器内，右键单击左侧图层栏或中间画布区的组件，选择导出到蓝图编辑器，即可将对应组件导出到蓝图编辑器中。

同样的，依次把所有需要接入数据的组件导出到蓝图编辑器中

导出成功后，单击“蓝图编辑器”图标切换到蓝图编辑器页面，可在导入节点列表中查看对应的节点。列表内所有节点都可供后续配置交互使用。

8.3 添加全局节点

在蓝图编辑器里，在逻辑 节点面板中，将需要使用的逻辑节点单击拖入中间画布中。 逻辑节点包括了全局节点、数据处理 类节点、流程控制类节点以及输入设备类节点。

首先，我们全局节点，画布中自动添加1个全局节点，全局节点可用于在大屏打开时自动执行后续操作（如加载数据）

8.4 为市场格局3个图表配置数据

8.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

8.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: '人均时长(小时)'
}));

8.4.3 添加图表节点

点击浏览器用户数柱状图、浏览器使用时长占比、人均使用时长柱状图这3个节点，将它们添加到画布中，再将并行数据处理的3个处理方法的输出接口连接到对应的图表的“导入数据接口”，如下：

点击保存，我们可以预览一下数据情况是否符合预期

可以看到，数据已经更新为数据库中的数据了

预览出现下图情况

8.5 为指标区域图表配置数据

8.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}
]

8.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 字段显示数值。指标名称已预先配置在指标卡组件的标题中

8.5.3 添加图表节点

点击4个数字翻牌器组件的节点，将它们添加到画布中，再将并行数据处理的4个处理方法的输出接口连接到对应的图表的“导入数据接口”，如下：

点击保存，预览数据是否符合预期

8.6 为工作日vs周末使用时长图表配置数据

8.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

8.6.2 添加图表节点

点击工作日vs周末使用时长节点，将它添加到画布中，再SQL请求节点的执行成功输出接口连接到“导入数据接口”，如下：

点击保存，预览数据是否符合预期

8.7 为24小时活跃用户分布图表配置数据

8.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

8.7.2 添加图表节点

点击24小时活跃用户分布节点，将它添加到画布中，再SQL请求节点的执行成功输出接口连接到“导入数据接口”，如下：

点击保存，预览数据是否符合预期

这里需要注意，图例是跟着折线上的标签点的颜色变化的，为了使折线、标签点、图例颜色一致，需要分别设置颜色，在画布编辑器中选中图表，点开数据系列，这个折线图有6个图例，即6个浏览器，所以需要设置6个系列的折线和标记颜色

设置完成后，效果如下：

8.8 为活跃用户周变化图表配置数据

8.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

8.8.2 添加图表节点

点击活跃用户周变化节点，将它添加到画布中，再SQL请求节点的执行成功输出接口连接到“导入数据接口”，如下：4

点击保存，预览数据是否符合预期

这里需要注意，图例是跟着折线上的标签点的颜色变化的，为了使折线、标签点、图例颜色一致，需要分别设置颜色，在画布编辑器中选中图表，点开数据系列，这个折线图有6个图例，即6个浏览器，所以需要设置6个系列的折线和标记颜色

设置完成后，效果如下：

8.9 为使用频率分布图表配置数据

8.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

8.9.2 添加图表节点

点击使用频率分布节点，将它添加到画布中，再SQL请求节点的执行成功输出接口连接到“导入数据接口”，如下：

点击保存，预览数据是否符合预期

8.10 为浏览器使用数量分布图表配置数据

8.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

8.10.2 添加图表节点

点击浏览器使用数量分布节点，将它添加到画布中，再SQL请求节点的执行成功输出接口连接到“导入数据接口”，如下：

点击保存，预览数据是否符合预期

8.11 预览并发布

组件的样式和数据都配置完成后，可以预览并发布可视化应用，实现应用的在线播放和演示。

单击大屏页面右上角的预览图标，预览可视化应用。

预览确认无误后，单击大屏页面右上角的发布图标

在弹出的发布对话框中单击发布分享

单击分享链接右侧的复制按钮

打开浏览器，将复制的链接粘贴到地址栏中，即可在线观看

http://47.109.66.142:30887/#/dataScreen/release?shareId=4c4a1edfb2de42318a67de82aad9c47f

9实验总结

本系列实验以浏览器市场与用户画像分析为业务场景，依托助睿数智（Uniplore）平台，完整实践了从原始行为日志数据加工、目标统计表构建，到数据大屏静态布局设计，再到利用蓝图编辑器实现动态数据接入的全流程。通过实验，我掌握了助睿ETL平台的多表加工逻辑（排序、分组、连接、计算等），理解了从业务问题反推数据需求的分析思维，并能够熟练使用助睿Max的蓝图编辑器配置数据源、编写SQL查询、进行并行数据处理与图表绑定。最终成功搭建了一个可交互的浏览器市场分析数据大屏，实现了从数据到洞察的完整闭环，为今后从事数据可视化分析与商业智能应用奠定了扎实的实践基础。

Logo
EazyDevelop社区

一站式 AI 云服务平台

更多推荐

cover

工业级 4G 智能网关怎么选？2026 最新评测：IPCSUN PGM1120A 架构深度解析与选型指南

avatar EazyDevelop社区
cover

ai建站公司盘点：2026年ai建立网站哪家靠谱？

avatar EazyDevelop社区
cover

OpenHarmony 英语学习 App 实战：近场快传、跨端续学与全场景学习闭环

avatar EazyDevelop社区