浏览器用户画像分析 - 大屏数据接入

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 实验不足与改进方向

本次实验仅完成全国基础数据筛选展示，缺少省份下钻、数据弹窗等进阶交互功能，且未运用定时刷新、多条件筛选等平台高阶能力。后续将深入学习平台高阶功能，完善大屏交互体系，优化SQL查询逻辑，提升数据查询效率与稳定性，进一步增强大屏的专业性和实用性。

7 对实验平台的评价

1.零代码全链路教学适配：平台覆盖数据接入、ETL加工、SQL查询、可视化搭建、交互配置全流程能力，无需复杂编程，依托拖拽操作即可完成项目落地，大幅降低大数据可视化学习门槛，适配零基础学生入门学习，贴合高校课程教学需求。

2.可视化交互逻辑清晰：蓝图编辑器采用节点连线式可视化编程，将抽象的数据流转、交互逻辑具象化，通过标准化节点实现参数传递、数据分发，便于学生理解联动原理，兼顾教学实用性与项目专业性。

3.组件丰富且性能稳定：助睿Max内置各类图表、地图、指标卡等可视化组件，覆盖主流数据分析场景，支持图层管理、联动筛选等功能。具备工业级数据处理能力，可实现海量数据秒级渲染，展示效果流畅稳定。

整体而言，助睿在线实验平台是优质的大数据教学实训工具。其零代码、全链路、可视化的核心特性，能够有效帮助我们将理论知识转化为实操能力，适配高校大数据可视化、数据分析相关课程教学。虽存在少量细节短板，但不影响核心实验体验，能够很好地满足日常教学实训需求。