【助睿实验指导】实验6-2：浏览器用户画像分析-大屏数据接入

[Uniplore官方]

1 实验目的

本实验基于上一实验《浏览器用户画像分析-大屏静态布局制作》完成的大屏布局，使用助睿Max的蓝图编辑器，将之前实验加工好的用户画像数据表接入到大屏的各个图表组件中，并配置筛选器实现多浏览器联动。

通过本实验，学生应掌握：

• 理解蓝图编辑器的基本概念（数据源、触发器、动作、并行数据处理）

• 使用并行数据处理节点接收筛选器参数并分发给多个SQL请求节点

• 为不同图表组件编写带参数的SQL查询语句

• 配置筛选器与图表的联动交互

2 实验环境

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

本次实验使用助睿数智（Uniplore）作为一站式数据科学平台。该平台覆盖从数据接入、ETL处理、机器学习建模到可视化展示的全链路零代码功能，适用于数据分析教学与企业数据加工场景。

助睿数智官网为 https://www.uniplore.com//

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

助睿Max 是低代码数据可视化平台，支持零代码拖拽搭建、多种图表组件、地图可视化、交互筛选等能力，适用于业务监控、用户洞察、营销战报等场景。

助睿Max核心优势：

• 组件丰富：覆盖所有常见图表和交互控件，满足企业级可视化需求

• 图层管理：支持图层堆叠、锁定、隐藏、排序，复杂布局轻松实现

• 低代码操作：拖拽式搭建 + 蓝图编辑器，无需复杂编程即可完成大屏布局与数据交互配置

• 工业级数据处理能力：支持海量数据实时接入与渲染，千万级数据点秒级响应，满足企业级生产环境要求

• 支持数字孪生：支持3D场景、GIS地图、实时物联数据接入，可快速构建数字孪生可视化系统

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

本实验将重点使用蓝图编辑器完成数据接入与筛选器联动配置。

3 实验数据

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

字段	类型	说明
browser_name	VARCHAR(50)	浏览器名称
gender	VARCHAR(10)	性别
age_group	VARCHAR(10)	年龄段
edu	VARCHAR(50)	学历
job	VARCHAR(50)	职业
income	VARCHAR(50)	收入
city_type	VARCHAR(10)	居住地类型
province	VARCHAR(50)	省份
user_count	INT	用户数

4 整体蓝图逻辑说明

4.1 什么是蓝图编辑器？

蓝图编辑器是助睿Max中用于配置数据流和交互逻辑的可视化编程工具。它采用“节点-连线”的方式，帮助您自由管理可视化应用中多个组件之间的交互关系。

蓝图编辑器的优势：

• 蓝图编辑器可以保证交互和数据的实时性和同步性。

• 蓝图编辑器支持数据请求合并和数据分发的功能。

• 蓝图编辑器可模块化拆分，只需要专注于业务规则和交互需求即可。

4.2 核心概念

概念	说明
数据源	数据库连接配置，定义数据从哪里来
查询	SQL语句，定义取什么数据
触发器	触发数据加载的事件（如页面加载、组件点击、定时刷新等）
动作	触发器执行后的操作（如查询数据、刷新图表）
变量	用于在查询之间传递参数（如筛选器选中的浏览器名称）

4.3 核心流程

1. 页面加载或用户选择浏览器 → 触发两个SQL请求：

2. 维度数据SQL：查询性别、年龄、学历、职业、收入、居住地类型、省份分布。

3. 核心指标SQL：查询总用户数、平均年龄、本科及以上占比、中高收入占比。

4. 浏览器筛选器 → 将选中的浏览器值传递给两个SQL请求节点。

5. 维度数据分发：通过一个并行数据处理节点，按 dimension_type 分发到各个图表。

6. 核心指标分发：通过另一个并行数据处理节点，将单行多列的指标数据拆分为四个独立数值，分别发送给四个指标卡。

7. 各图表组件接收数据并展示。

4.4 各节点职责

节点	职责
页面加载	大屏打开时自动触发一次数据加载
浏览器筛选器	用户选择浏览器后，触发数据刷新，并将选中的浏览器值传递给下游
浏览器参数接收	并行数据处理节点，接收筛选器参数，存储到全局变量
维度数据SQL请求	一次性查询所有维度数据（性别、年龄、学历、职业、收入、居住地类型、省份），输出格式 (dimension_type, name, value)
核心指标SQL请求	查询四个核心指标（总用户数、平均年龄、本科及以上占比、中高收入占比），输出单行多列格式
维度数据分发	并行数据处理节点，按 dimension_type 过滤，格式化后分发给7个图表
核心指标分发	并行数据处理节点，将单行多列数据拆分为四个独立数值，分发给四个指标卡
各图表组件	接收数据并渲染

4.5 本实验范围说明

本次实验只做全国范围的数据展示，包括：

• 全国省份地图（各省份用户数分布）

• 全国核心指标（总用户数、平均年龄、本科及以上占比、中高收入占比）

• 全国各维度分布（性别、年龄、学历、职业、收入、居住地类型）

点击省份查看该省份核心指标数据将在下一实验中完成。

4.6 完整蓝图连接示意图

助睿Max蓝图编辑器亮点：通过拖拽节点、连线即可完成复杂的交互逻辑，无需编写复杂代码。并行数据处理节点支持一个数据源同时分发到多个图表，实现高效的数据复用。

节点连线说明：

起点节点	终点节点	连线含义
页面加载（页面初始化完成）	浏览器参数接收（输入）	大屏打开时触发参数初始化
浏览器筛选器（下拉框内容被选中）	浏览器参数接收（输入）	用户选择浏览器后触发
浏览器参数接收（输出）	维度数据SQL请求（执行SQL）	传递浏览器参数
浏览器参数接收（输出）	核心指标SQL请求（执行SQL）	传递浏览器参数
维度数据SQL请求（执行成功）	维度数据分发（输入）	将维度数据传给分发节点
核心指标SQL请求（执行成功）	核心指标分发（输入）	将核心指标数据传给分发节点
维度数据分发（分支1-7）	各维度图表（导入数据接口）	性别、年龄、学历等数据
核心指标分发（分支1-4）	四个指标卡（导入数据接口）	总用户数、平均年龄等

5 实验步骤

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

在用户画像大屏中，我们需要展示平均年龄这一核心指标。原有的 user_profile_stats 表中只有年龄段（age_group）字段，没有精确年龄。如果使用年龄段中值估算平均年龄（如 26-35 岁取 30.5 岁），会存在一定误差。

为了更准确地计算平均年龄，我们需要在 user_profile_stats 表中增加一个 age 字段。

修改目标表：

在团队私有数据库中执行以下SQL：

DROP TABLE IF EXISTS `user_profile_stats`;
CREATE TABLE `user_profile_stats` (
    `browser_name` VARCHAR(50) NOT NULL COMMENT '浏览器名称',
    `gender` VARCHAR(10) COMMENT '性别',
    `age` INT NOT NULL 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='用户画像统计表';

修改转换流，在分组聚合中保留 age 字段：

打开“用户画像表加工”转换流，做以下修改：

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

② 修改分组组件，分组字段更加 age

③ 执行转换流

5.2 组件导出到蓝图编辑器

上周的实验【浏览器市场分析-大屏数据接入】已经介绍了如何连接数据源，本实验不再教学。

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

打开上一实验制作的“用户画像”数据大屏，在画布编辑器内，右键单击左侧图层栏或中间画布区的组件，选择导出到蓝图编辑器，即可将对应组件导出到蓝图编辑器中。

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

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

• 性别分布饼图

• 年龄段分布柱状图

• 学历分布条形图

• 职业分布柱状图

• 收入分布柱状图

• 居住地类型饼图

• 用户省份分布地图

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

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

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

5.3 添加浏览器参数接收节点（并行数据处理）

大屏上的浏览器筛选器让用户可以选择某个具体的浏览器。当用户切换选择时，地图、饼图、柱状图等所有图表的数据都需要跟着变。

怎么实现这种联动呢？筛选器本身只能输出“我选中了哪个值”，它不知道接下来要干什么。所以需要一个中间节点来做两件事：记住用户选中的浏览器，然后告诉SQL请求去查新数据。

这个节点就是“浏览器参数接收”，它用“并行数据处理”组件来实现。

双击节点，添加两个处理方法：

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

const BASE_URL = 'https://lab.guilian.cn';
window.GLOBAL_BASE_URL = BASE_URL;
return data;

这个方法主要是为后续可能用到的外部API预留一个基础地址，本实验用不上，但保留结构。

方法二（每次筛选器变化时执行，接收浏览器参数）

const SELECTED_BROWSER = data.value;
window.GLOBAL_SELECTED_BROWSER = SELECTED_BROWSER;
return { value: SELECTED_BROWSER };

这个方法把用户选中的浏览器存到 window.GLOBAL_SELECTED_BROWSER 这个全局变量里。后面的SQL请求节点只要读取这个变量，就知道该查哪个浏览器的数据了。

连好线之后，整个流程是这样的：

• 大屏打开 → 页面加载触发 → 节点初始化

• 用户切换浏览器 → 筛选器输出新值 → 节点更新全局变量 → SQL重新执行 → 所有图表刷新

其中，浏览器的选项我们可以直接使用静态数据（因为个数不多）：title为前端显示内容，value为实际查询内容，即数据库中存储的对应 browser_name，如：

{
    "title": "IE浏览器",
    "value": "IE浏览器"
}

我们需要填写6个浏览器的对应内容，并刷新数据，同时，输入框中默认选中设置为“IE浏览器”

这样，一个筛选器就同时控制了所有图表。

5.4 添加SQL请求节点（一次除指标外所有维度数据）

这个节点负责查询性别、年龄、学历、职业、收入、居住地类型、省份等维度数据，使用 UNION ALL 合并，输出格式为 (dimension_type, name, value)。

添加“SQL请求”节点，重命名为“维度数据SQL请求”，查询SQL如下：

// 从全局变量获取选中的浏览器值
const selectedBrowser = window.GLOBAL_SELECTED_BROWSER;

let sql = `
-- 性别分布
select 
    'gender' as dimension_type,
    gender as name,
    sum(user_count) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'
group by gender

union all

-- 年龄段分布
select 
    'age' as dimension_type,
    age_group as name,
    sum(user_count) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'
group by age_group

union all

-- 学历分布
select 
    'edu' as dimension_type,
    edu as name,
    sum(user_count) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'
group by edu

union all

-- 职业分布
select 
    'job' as dimension_type,
    job as name,
    sum(user_count) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'
group by job

union all

-- 收入分布
select 
    'income' as dimension_type,
    income as name,
    sum(user_count) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'
group by income

union all

-- 居住地类型分布
select 
    'city_type' as dimension_type,
    city_type as name,
    sum(user_count) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'
group by city_type

union all

-- 省份分布
select 
    'province' as dimension_type,
    province as name,
    sum(user_count) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'
group by province
`;
return sql

这个 SQL 用了 UNION ALL 把所有属性维度的数据一次性查出来，每条记录都带一个 dimension_type 字段来标记它属于哪个维度。这样一次查询就能拿到所有图表需要的数据，不用每个图表单独发请求。

由于筛选器只能选单个浏览器，SQL 中直接用 where browser_name = '${selectedBrowser}' 即可，不需要处理“全部浏览器”的情况。

5.5 添加核心指标SQL请求节点（单独查询四个指标）

这个节点只查询四个核心指标，输出单行多列格式（一行包含四个字段），不需要 UNION ALL，取值更简单。

添加“SQL请求”节点，重命名为“核心指标SQL请求”，查询SQL如下：

// 从全局变量获取选中的浏览器值
const selectedBrowser = window.GLOBAL_SELECTED_BROWSER;

let sql = `
-- 核心指标（总用户数、平均年龄、本科及以上占比、中高收入占比）
select 
    'total_users' as name,
    sum(user_count) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'

union all

select 
    'avg_age' as name,
    round(sum(age * user_count) / sum(user_count), 1) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'

union all

select 
    'high_edu_ratio' as name,
    round(sum(case when edu in ('本科', '硕士及以上') then user_count else 0 end) * 100.0 / sum(user_count), 1) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'

union all

select 
    'high_income_ratio' as name,
    round(sum(case when income in ('5001～8000元', '8001～12000元','12000元以上') then user_count else 0 end) * 100.0 / sum(user_count), 1) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'
`;
return sql

5.6 添加维度数据分发节点（并行数据处理）

上一步SQL查出来的是一张包含所有维度数据的大表，但每个图表只需要其中一部分：性别饼图只看 dimension_type='gender' 的数据，年龄柱状图只看 dimension_type='age' 的数据，以此类推。

所以需要一个分发节点，把数据按 dimension_type 拆开，分别送给对应的图表。这个节点也用“并行数据处理”来实现。

添加“并行数据处理”节点，重命名为“数据分发”。将SQL请求节点的“执行成功”连接到该节点。

双击节点，为每个图表添加一个处理方法：

分支1：性别分布（饼图）

var filtered = data.filter(item => item.dimension_type === 'gender');
return filtered.map(item => ({
    name: item.name,
    value: item.value
}));

分支2：年龄段分布（柱状图）

var filtered = data.filter(item => item.dimension_type === 'age');
var order = ['<18', '18-25', '26-35', '36-45', '>45'];
filtered.sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name));
return filtered.map(item => ({
    x: item.name,
    y: item.value,
    s: '用户数'
}));

分支3：学历分布（条形图）

var filtered = data.filter(item => item.dimension_type === 'edu');

var order = ['小学及以下', '初中', '高中/中专/技校', '大专', '大学本科', '硕士及以上'];
filtered.sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name));
return filtered.map(item => ({
    x: item.name,
    y: item.value,
    s: '学历'
}));

分支4：职业分布（柱状图）

var filtered = data.filter(item => item.dimension_type === 'job');
return filtered.map(item => ({
    x: item.name,
    y: item.value,
    s: '职业'
}));

分支5：收入分布（柱状图）

var filtered = data.filter(item => item.dimension_type === 'income');

// 按收入金额升序排序（提取数字进行比较）
filtered.sort((a, b) => {
    // 提取收入段中的最小金额
    var getMinIncome = (incomeStr) => {
        // 处理 "无收入"、"500元及以下" 等特殊情况
        if (incomeStr === '无收入') return -1;
        if (incomeStr === '500元及以下') return 0;
        // 提取数字，如 "1501~2000元" 提取 1501
        var match = incomeStr.match(/(\d+)/);
        return match ? parseInt(match[1]) : 999999;
    };
    return getMinIncome(a.name) - getMinIncome(b.name);
});

return filtered.map(item => ({
    x: item.name,
    y: item.value,
    s: '收入'
}));

分支6：居住地类型分布（饼图）

var filtered = data.filter(item => item.dimension_type === 'city_type');
return filtered.map(item => ({
    name: item.name === 'unknown' ? '未知' : item.name,
    value: item.value
}));

分支7：省份排行榜TOP5

这里需要注意，轮播列表的映射字段是通过“数据系列”中的系列1、系列2来决定的

/ 过滤出省份数据
var filtered = data.filter(item => item.dimension_type === 'province');
// 按用户数降序排序
filtered.sort((a, b) => b.value - a.value);
// 取前5条
var top5 = filtered.slice(0, 5);
// 直接返回组件需要的字段名
return top5.map(item => ({
    province: item.name,
    user_count: item.value
}));

以上的输出结果不正确的话，可以在最终输出结果的节点的处理方法代码中添加以下代码，查看返回的数据：

// console.log("返回的数据",data)

5.7 添加核心指标分发节点（并行数据处理）

添加另一个“并行数据处理”节点，重命名为“核心指标分发”。将“核心指标SQL请求”节点的“执行成功”连接到该节点。

SQL 返回的是四行数据，而四个指标卡每个只需要一个数值。通过“并行数据处理”节点，我们按 name 字段过滤，将每个指标单独输出给对应的指标卡。

分支示例（总用户数）：

var item = data.find(item => item.name === 'total_users');
return [{ value: item ? item.value : 0 }];

其他分支类似，只需修改 item.name === 'total_users'的条件即可

5.8 连接节点

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

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

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

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

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

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

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

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

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

5.9 保存与预览

点击蓝图编辑器右上角的“保存”按钮，然后返回大屏，点击“预览”。

测试功能：

1. 大屏打开时，默认显示第一个浏览器的用户画像数据（如下拉框默认选中的浏览器）

2. 选择其他浏览器，所有图表应刷新为新浏览器的数据

3. 观察地图、饼图、柱状图是否都随筛选器变化