1 实验目标

基于上一实验搭建完成的浏览器用户画像大屏静态页面，借助助睿 Max 蓝图器，把经过 ETL 加工后的用户画像统计表对接至大屏各类图表组件，搭配下拉筛选器实现不同浏览器画像数据联动切换。

完成实验后你可以掌握：

1. 吃透蓝图器基础定义：数据源、触发器、执行动作、并行多流处理

2. 使用并行处理节点接收筛选器选中值，分发给多条 SQL 查询语句

3. 针对不同图表编写可接收筛选参数的条件查询 SQL

4. 配置筛选控件与全量图表的实时交互联动

2 实验运行环境

• 实训平台：助睿在线实验平台

• 数据底座：Uniplore 助睿数智零代码平台，覆盖数据接入、ETL 加工、建模、可视化全流程，适配教学与企业数据分析场景

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

  平台优势：组件种类齐全、图层分层管理、拖拽低代码搭建、高并发海量数据渲染、支持 3D 数字孪生与 GIS 地图展示

• 存储数据源：团队私有 MySQL 数据库

  本次实操核心依托蓝图器完成数据流对接与交互逻辑配置

3 实验数据源

复用上一轮 ETL 产出的user_profile_stats用户画像统计表，完整结构如下：

4 蓝图整体逻辑讲解

4.1 蓝图器是什么

蓝图器是助睿 Max 内置的可视化逻辑编排工具，依靠「节点连线」的形式自定义大屏内全部组件交互、数据流转规则。

核心优势：

1. 保证交互动作、数据刷新同步实时

2. 支持多条查询合并请求、一份数据源拆分分发

3. 业务逻辑模块化拆分，只需聚焦业务需求，不用手写大量底层代码

4.2 基础专业名词释义

4.3 完整业务流转逻辑

1. 大屏初始化加载 / 用户切换下拉浏览器选项 → 同步触发两类 SQL 查询

   • 维度汇总 SQL：一次性查询性别、年龄、学历、职业、收入、居住地、省份 7 类分布数据

   • 核心指标 SQL：单独计算总用户量、平均年龄、高学历占比、中高收入占比 4 项数值

2. 浏览器下拉筛选器把选中的浏览器名称，同步传递给两条 SQL 查询作为过滤条件

3. 维度数据拆分分发：并行处理节点按照维度标识拆分数据，分别推送给 7 个分布图表

4. 指标数值拆分分发：并行处理节点把单行多列指标拆成 4 个独立数值，分别送入 4 个数字指标卡片

5. 所有图表接收推送数据，自动渲染展示

4.3 各节点承担任务

4.5 本次实验边界范围

仅完成全国范围画像数据可视化：

1. 全国省份地图：展示各省用户数量分布

2. 全局核心指标：总用户数、平均年龄、本科及以上学历占比、中高收入人群占比

3. 七大维度分布图表：性别、年龄段、学历、职业、收入、城乡居住地、省份排行

   点击省份查看单省指标的交互功能，留至下一次实验完成

4.6 节点连线规则说明

5 分步实操步骤（顺序完全原样保留）

5.1 前置准备：给统计表补充 age 精确年龄字段

大屏平均年龄指标需要精确年龄计算，仅靠年龄段区间估算误差较大，因此先补全表结构与 ETL 加工流：

在团队私有 MySQL 数据库执行重建表 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='用户画像统计表';

打开 Hop「用户画像表加工」转换流，三处修改：

① 排序记录组件：新增 age 字段，设置升序排序

② 分组聚合组件：把 age 加入分组字段列表，同步保留原有分组维度

③ 保存转换流，完整运行一次 ETL，重新回填数据表

5.2 将大屏组件导出至蓝图器

上一实验已完成数据源基础配置，这里只做组件导出操作：

打开之前搭建好的用户画像大屏画布，在左侧图层栏 / 画布内右键点击目标组件，选择导出到蓝图器，依次导出以下全部组件：

1. 浏览器下拉筛选框（单选下拉）

2. 性别分布饼图

3. 年龄段分布柱状图

4. 学历分布横向条形图

5. 职业分布柱状图

6. 收入分布柱状图

7. 居住地类型饼图

8. 省份分布地图

9. 省份用户 TOP5 轮播列表

10. 四个核心指标数值卡片（总用户、平均年龄、本科占比、中高收入占比）

    导出完成后点击页面蓝图器图标，即可在节点列表查看全部导入画布组件。

5.3 新建浏览器参数接收并行处理节点

下拉筛选器仅能输出选中值，无法直接驱动 SQL 刷新，需要并行处理节点中转存储全局变量：

1. 在蓝图画布拖拽「并行数据处理」节点，重命名为浏览器参数接收

2. 双击节点配置两段执行脚本方法：

   方法 1（页面初始化加载执行）

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

   

   作用：预留外部接口基础地址，本次实验无外部调用需求，保留模板结构即可。

   方法 2（筛选器切换时实时执行）

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

   

   作用：抓取下拉框选中的浏览器名称，存入全局变量，下游 SQL 直接读取变量做筛选。

3. 完成节点连线绑定：页面加载、筛选器选中变更两个事件，全部接入该节点输入端口。

   流转逻辑：大屏打开初始化 → 变量初始化；切换浏览器选项 → 更新全局变量 → 下游 SQL 重新执行 → 全图表刷新。

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

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

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

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

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

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

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

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

5.4 创建多维度汇总 SQL 请求节点

该节点一次性查询 7 类分布数据，用 UNION ALL 合并输出统一格式，减少重复请求次数：

1. 拖拽「SQL 请求」节点，重命名为维度数据 SQL 请求

2. 填写节点执行脚本（自动读取全局浏览器变量拼接查询条件）

// 读取全局存储的选中浏览器
const selectedBrowser = window.GLOBAL_SELECTED_BROWSER;
// 拼接合并查询SQL
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

3.节点输入连线绑定浏览器参数接收节点的输出数据，实现筛选参数自动带入 SQL 条件。

5.5 创建四项核心指标 SQL 请求节点

单独查询总用户、平均年龄、高学历占比、中高收入占比四个数值指标：

1. 新增「SQL 请求」节点，命名核心指标 SQL 请求

2. 填写节点执行脚本：

const selectedBrowser = window.GLOBAL_SELECTED_BROWSER;
let sql = `
-- 1. 总用户数量
select 
    'total_users' as name,
    sum(user_count) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'
​
union all
​
-- 2. 加权平均年龄（保留1位小数）
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
​
-- 3. 本科及以上学历占比（百分比）
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
​
-- 4. 中高收入人群占比（百分比）
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拆分，分发给对应图表：

1. 拖拽「并行数据处理」节点，命名维度数据分发，输入端口连接维度 SQL 请求的执行成功事件

2. 双击节点，依次创建 7 条分支处理脚本：

   分支 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');
   var getMinIncome = (incomeStr) => {
       if (incomeStr === '无收入') return -1;
       if (incomeStr === '500元及以下') return 0;
       var match = incomeStr.match(/(\d+)/);
       return match ? parseInt(match[1]) : 999999;
   };
   filtered.sort((a, b) => 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 轮播列表（取用户数前五）
   ​
   var filtered = data.filter(item => item.dimension_type === 'province');
   filtered.sort((a, b) => b.value - a.value);
   var top5 = filtered.slice(0, 5);
   return top5.map(item => ({
       province: item.name,
       user_count: item.value
   }));

   

   调试提示：数据格式异常时，可在脚本首行添加

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

   打印日志排查

5.7 搭建核心指标并行分发节点

把 SQL 返回的 4 行单指标数据，拆分成 4 个独立数值供给指标卡片：

1. 新建「并行数据处理」节点，命名核心指标分发，输入绑定核心指标 SQL 请求执行成功事件

2. 依次创建 4 条分支脚本，示例（总用户数）：

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

   剩余三条仅修改匹配名称：

   avg_age、high_edu_ratio、high_income_ratio

   即可，无数据时兜底返回 0 避免报错。

5.8 完整节点连线绑定

严格对照 4.6 的连线关系完成全部线路对接：

1. 页面加载节点输出 → 浏览器参数接收输入

2. 浏览器筛选器选中事件 → 浏览器参数接收输入

3. 浏览器参数接收输出 → 维度 SQL 请求执行触发

4. 浏览器参数接收输出 → 核心指标 SQL 请求执行触发

5. 维度 SQL 请求执行成功 → 维度分发节点输入

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

7. 维度分发 7 个分支输出 → 一一对应 7 个图表的导入数据接口

8. 指标分发 4 个分支输出 → 一一对应 4 个指标卡片导入数据接口

5.9 保存蓝图并预览校验

点击蓝图器右上角保存按钮，固化全部连线与脚本配置

返回大屏画布，点击预览按钮进入测试页面

功能校验项：

① 页面打开自动加载默认浏览器的全套画像数据

② 切换下拉框内其他浏览器，所有图表、指标数值同步刷新

③ 饼图、柱状图、地图、轮播列表数据和筛选浏览器匹配无误

6 实验总结

6.1 实验收获

本次实验以已完成的可视化大屏静态布局为基础，依托助睿Max蓝图器，完成用户画像数据的动态接入以及多组件联动交互配置工作，圆满完成各项实验任务、达成预设实验目标，熟练掌握了低代码数据可视化大屏的数据流配置、交互设计核心实操技能。

在理论认知层面，我系统掌握了蓝图器的底层运行逻辑，吃透了数据源配置、触发器应用、全局变量设置、并行数据处理等核心专业概念。清晰理解了器中节点连线、参数传递、数据分发的完整闭环数据流逻辑，明确区分了静态展示大屏与动态交互大屏的本质差异，构建起完整的可视化数据联动知识体系，夯实了大数据可视化的理论基础。

在实操应用层面，我熟练掌握了交互式可视化大屏联动配置的全流程操作。实验中通过新增精准年龄字段、优化数据聚合统计规则，有效解决了原有数据估算存在的偏差问题，大幅提升了核心指标的计算精准度。同时，熟练掌握了组件导出、参数接收、动态参数SQL编写、批量数据查询、并行数据分发等关键实操技巧，借助UNION ALL语句实现多维度数据的一次性批量查询，通过并行处理节点，将单一数据源精准分发至各类图表、指标卡组件，最终实现浏览器筛选器与大屏全量组件的实时联动响应，成功搭建出功能完整、交互流畅的用户画像交互式可视化大屏。

在业务认知层面，我熟练掌握了用户性别、年龄、学历、地域等多维度用户数据的分析逻辑，能够独立完成用户总数量、用户平均年龄、高学历用户占比、中高收入用户占比等核心业务指标的统计计算。同时，深刻体会到大数据可视化技术在用户行为洞察、业务现状分析、辅助企业决策中的重要应用价值，提升了自身的数据思维与业务分析能力。

6.2 实验问题与解决方法

实验开展过程中，主要遇到两类典型问题，通过针对性调试与优化均顺利解决，具体问题及解决方案如下。

第一，实验初期出现图表数据错乱、指标卡无数据展示的异常情况。经排查，问题根源在于未对维度数据进行规范过滤、数据排序规则缺失，同时筛选器参数传递失效，导致数据流无法正常流转。针对该问题，我优化了并行数据处理代码，对各维度数据进行精准筛选与自定义排序，逐一核对并修正器节点连线逻辑，保障筛选参数可正常传递、调用，彻底解决了数据展示错乱、空白等异常问题。

第二，省份数据排行榜展示格式不规范、数据杂乱。通过新增数据降序排序逻辑，同时截取TOP5核心数据进行展示，实现了排行榜的标准化、规范化呈现。此外，我学会借助浏览器控制台进行数据校验，能够快速定位数据流错误、数据缺失等问题，大幅提升了实验调试效率与问题排查能力。

6.3 实验不足与改进方向

本次实验仅完成了全国维度基础数据的筛选与可视化展示，功能较为基础，未实现省份数据下钻、数据弹窗详情展示等进阶交互功能。同时，未充分利用平台的定时刷新、多条件组合筛选等高阶功能，大屏的智能化、交互性不足。

针对以上不足，后续我将深入钻研助睿Max平台的高阶功能与使用技巧，进一步完善可视化大屏的交互体系。同时持续优化SQL查询语句与数据处理逻辑，提升数据查询的效率、准确性与稳定性，不断优化大屏展示效果与使用体验，全面提升可视化项目的专业性与实用性。

7 对实验平台的评价

1. 零代码全流程教学适配性强。该实验平台涵盖数据接入、ETL数据加工、SQL数据查询、可视化页面搭建、交互逻辑配置等全链路功能，无需依托复杂代码编程，仅通过简单拖拽、参数配置即可完成可视化项目落地，极大降低了大数据可视化技术的学习门槛。平台功能贴合高校大数据相关课程的教学节奏与实训要求，能够适配零基础学生入门学习，教学适配性极高。

2. 可视化交互逻辑直观清晰。平台搭载的蓝图器采用节点连线式可视化编程模式，将抽象的数据流转、组件联动、参数交互逻辑具象化、可视化。通过标准化功能节点实现数据分发、参数传递等核心操作，便于学生直观理解大屏联动的底层原理，兼顾课堂教学的易懂性与实际项目开发的专业性。

3. 组件资源丰富，运行性能稳定。助睿Max平台内置多样化的图表、地图、指标卡、文本组件等可视化素材，全面覆盖主流数据分析与可视化展示场景，支持图层管理、联动筛选、数据交互等各类实用功能。同时具备工业级的数据处理性能，可实现海量数据的秒级加载与渲染，大屏展示画面流畅稳定，无卡顿、闪退等问题。

整体而言，助睿在线实验平台是一款高质量的大数据教学实训工具。其零代码操作、全链路覆盖、可视化教学的核心优势，能够帮助学生快速将理论知识转化为实操技能，完美适配高校大数据可视化、数据分析等相关课程的实训教学工作。平台虽存在部分细节优化空间，但不影响核心实验操作与学习体验，可充分满足日常课堂教学、课程实训、项目实操等各类学习需求。