浏览器用户画像分析-大屏数据接入
浏览器用户画像分析大屏数据接入实验
一、实验背景
本次实验承接静态布局结果，在不改动页面结构的前提下，把 user_profile_stats 表接入大屏，并通过蓝图编辑器完成浏览器筛选联动。
1. 实验目标
理解蓝图编辑器里“事件触发、参数传递、SQL 查询、结果分发”的基本链路。
让浏览器筛选器成为统一入口，驱动多个图表同时刷新。
把维度数据和核心指标拆成两类查询，减少重复配置。
为下一步省份点击联动继续保留清晰的节点命名和数据流。
2. 实验环境
实验平台：助睿在线实验平台 https://lab.guilian.cn/。本实验继续在同一个大屏工程中完成。
可视化工具：助睿Max（数据大屏）
数据来源：团队私有数据库（MySQL）
本次重点不是重新做样式，而是让筛选器、SQL 节点和图表组件形成稳定的数据流。
3. 数据准备
本实验使用的核心表仍然是 user_profile_stats。接入前，我先确认字段是否能够支撑平均年龄、结构占比和地图分布三个方向的展示。
下图为数据表结构截图，主要用于核对字段命名和数据类型。
二、实验步骤
1. 蓝图编辑器的使用范围
蓝图编辑器负责把页面组件之间的触发关系串起来。对本实验来说，它更像一张数据流图，而不是单纯的连线画布。
我把它理解为四类节点：触发节点、参数处理节点、SQL 查询节点、结果分发节点。
只要这四类节点的输入输出关系理顺，页面刷新逻辑就会比较稳定。
因此，本实验尽量避免让每个图表单独写一套流程，而是先把公共链路抽出来。
这样后续新增图表时，只需要挂接分发结果，不必重做筛选逻辑。
2. 核心概念
下图用于说明蓝图中的核心节点类型和输入输出关系。
3. 数据流设计
页面加载或浏览器筛选变化时，我统一触发两类 SQL 请求。
第一类查询负责性别、年龄、学历、职业、收入、居住地类型、省份等维度数据。
第二类查询只负责总用户数、平均年龄、本科及以上占比、中高收入占比四个核心指标。
筛选器输出的浏览器值先进入参数节点，再由参数节点传给两个 SQL 查询节点。
维度数据查询完成后，再按 dimension_type 拆分到不同图表。
核心指标查询完成后，再按 name 拆成四个单值结果。
这样处理后，节点之间的职责比较清楚，后续排错也更方便。
4. 节点职责
下图记录了本次蓝图中的节点分工和连接关系。
5. 本次接入范围
本次实验只完成全国范围的用户画像数据接入。
地图部分先展示各省份用户分布，不做省份下钻。
核心指标区先显示全国范围的聚合结果。
各属性分布图先响应浏览器筛选，不再增加额外条件。
省份点击后的局部指标联动放到下一次交互实验处理。
6. 蓝图连接示意
这张示意图对应本次实验的完整数据流，后续接线时我按这张图逐步核对。
下图用于说明关键节点之间的连接顺序。
Click the image to view the sheet.
5. 具体配置过程
5.1 前置准备：补充年龄字段
页面里需要显示平均年龄，所以我先检查原表是否能直接计算该指标。
由于原始统计结果只有年龄段，没有精确年龄，本次先在 user_profile_stats 表中补充 age 字段，避免后续只能用区间中值估算。
处理方法：
先在团队数据库中更新目标表结构，再回到转换流里补齐 age 字段的保留逻辑。
随后修改转换流，确保 age 字段能够参与后续聚合。
我在“用户画像表加工”流程中做了三处调整：
① 排序记录组件增加 age 字段，保证后续处理顺序可控。
② 分组组件补充 age 字段，避免平均年龄计算缺少基础数据。
③ 重新执行转换流，确认结果表已按新结构生成。
5.2 导出需要联动的组件
数据接入之前，我先把所有需要参与联动的组件导出到蓝图编辑器。
这样做的目的是把“页面摆放”和“数据流配置”分开处理，避免来回切换时遗漏组件。
在画布编辑器中，我逐个右键需要联动的组件，执行“导出到蓝图编辑器”。
本次需要导出的组件包括：
浏览器筛选器。
性别分布饼图。
年龄段分布柱状图。
学历分布条形图。
职业分布柱状图。
收入分布柱状图。
居住地类型饼图。
用户省份分布地图和省份榜单。
核心指标卡。
导出完成后，我再回到蓝图页面检查节点名称，保证后续接线不混淆。
如果节点名称过于接近，建议在这一步先重命名，再继续后续配置。
5.3 添加浏览器参数接收节点
浏览器筛选器本身只负责输出选中值，真正的联动要靠中间节点接住这个参数。
因此我先增加一个“并行数据处理”节点，统一接收和保存当前浏览器。
这个节点的作用很简单：把当前选择写入全局变量，并在需要时触发后续查询。
具体配置时，我保留两个处理方法：
方法一：页面初始化时执行一次，预留基础地址变量。
这个变量本次没有直接参与查询，但保留后能让后续扩展接口更方便。
方法二：每次筛选器变化时执行，更新当前浏览器参数。
更新完成后，后续 SQL 节点只需要读取 window.GLOBAL_SELECTED_BROWSER 即可，不必各自再接一次筛选器输出。
接线完成后，参数流转顺序如下：
页面打开时先执行一次初始化。
用户切换浏览器后，先更新全局变量，再重新触发 SQL 查询和图表刷新。
筛选器的选项可以先使用静态数据，title 用于展示，value 用于拼接查询条件。
本实验先录入 6 个浏览器选项，并将默认值设为“IE 浏览器”，便于预览时直接看到初始结果。
到这里，筛选器已经具备了驱动全页刷新的基础条件。
5.4 配置维度数据 SQL 节点
维度图表需要的数据结构基本一致，所以我把多类查询合并到一个 SQL 节点中，统一输出 dimension_type、name、value 三列。
节点名称设为“维度数据 SQL 请求”，查询逻辑如下。
这种做法的好处是，一个节点就能产出多个图表需要的数据，后续只需在分发节点里做拆分。
因为当前实验只支持单浏览器筛选，所以 where 条件直接使用当前浏览器值即可。
5.5 配置核心指标 SQL 节点
核心指标只有四项，单独使用一个 SQL 节点更清晰，也便于后续单独排查平均年龄或比例计算问题。
节点名称设为“核心指标 SQL 请求”，查询逻辑如下。
5.6 配置维度数据分发节点
维度 SQL 返回的是一张合并结果表，但每个图表只需要其中一部分，所以我再增加一个“并行数据处理”节点专门做拆分。
拆分原则很直接：按 dimension_type 过滤，再映射成对应图表能够识别的数据结构。
我将该节点重命名为“数据分发”，并把维度 SQL 的成功输出接入它。
分支配置如下：
分支 1：性别分布饼图。
分支 2：年龄段分布柱状图，并按年龄段顺序排序。
分支 3：学历分布条形图，并按学历层级排序。
分支 4：职业分布柱状图。
分支 5：收入分布柱状图，并按收入区间顺序排序。
分支 6：居住地类型饼图。
分支 7：省份排行榜 TOP5。
轮播列表需要特别注意字段映射名称，要与组件里的系列配置保持一致。
如果分发结果异常，我会先在处理方法里打印返回值，再检查字段名和排序逻辑。
5.7 配置核心指标分发节点
核心指标节点返回的是四行单值结果，所以我再增加一个“并行数据处理”节点做最后一层拆分。
处理方式仍然是按 name 字段查找对应指标，再把 value 单独输出给翻牌器组件。
分支示例如下：
其余三个指标沿用同样的模式，只需要替换指标名称即可。
5.8 连接全部节点
接线时，我按照前面的示意图逐项核对，避免遗漏任意一条触发链。
页面加载 → 浏览器参数接收。
浏览器筛选器 → 浏览器参数接收。
浏览器筛选器 → 维度数据 SQL 请求。
浏览器筛选器 → 核心指标 SQL 请求。
维度数据 SQL 请求成功 → 维度数据分发。
核心指标 SQL 请求成功 → 核心指标分发。
维度数据分发各分支 → 各维度图表。
核心指标分发各分支 → 四个核心指标卡。
三、实验结果
保存蓝图并返回预览页后，我重点检查浏览器切换是否能同时带动地图、饼图、柱状图和指标卡刷新。
验证要点：
页面首次打开时，应显示默认浏览器对应的用户画像结果。
切换到其他浏览器后，各组件应同步刷新，而不是只更新部分图表。
从预览情况看，筛选器已经能够驱动整页数据更新，说明本次数据接入链路已经打通。
四、问题与解决
本次接入中最容易出错的是字段命名不一致。例如 SQL 查询结果里的字段名、分发节点里返回的字段名、组件系列映射名称三者只要有一个写错，图表就不会刷新。我在排查时优先查看节点输出结果，再回头核对字段映射。
另一个问题是平均年龄无法直接计算，根源在于结果表最初没有保留 age 字段。解决办法不是在前端做估算，而是先回到数据加工流程补字段，再重新生成统计表。
五、实验总结
本次实验完成后，浏览器筛选已经能够驱动整页数据刷新，说明静态布局已经顺利过渡到可用的数据页面。
我对蓝图编辑器的理解也更清楚了：参数节点负责接值，SQL 节点负责取数，分发节点负责适配组件。只要这三层职责清楚，大屏联动配置就不会太乱。