助睿 Max 全套实操｜浏览器用户画像三大实验：静态大屏→数据接入→交互下钻完整流程
实验6-1：浏览器用户画像分析-大屏静态分布制作
一、实验背景
1.1实验目的
本实验基于之前实验加工完成的用户画像统计表（user_profile_stats），完成浏览器用户画像分析大屏的静态布局设计。
通过本实验，学生应掌握：
根据用户画像分析需求，合理设计大屏的信息结构与叙事逻辑
理解不同图表类型在用户画像分析中的适用场景与分析价值
将数据结果转化为可直观理解、可支撑决策的用户洞察
站在“数据产品”角度，思考大屏如何向不同受众传递价值
1.2实验数据
本实验使用上一阶段加工完成的 user_profile_stats 表，该表按浏览器维度，统计了用户在各人口属性上的分布，包括：
基本信息：性别、年龄、学历、职业、收入
地域信息：居住地类型（城市/城郊/乡村）、省份
维度：按浏览器名称分组，支持整体分析与分浏览器对比
二、实验分析
2.1 业务问题分析
本次用户画像大屏设计的首要任务是回答一个核心业务问题：谁在使用我们的产品？ 通过对用户人口属性的系统分析，将统计数字转化为可指导决策的用户认知。
具体而言，本大屏围绕以下五个业务问题展开分析：
|
业务问题 |
对应分析维度 |
|
用户的基本人口属性（年龄、性别、职业） |
明确核心目标人群，指导产品设计与营销沟通 |
|
用户的教育与收入水平 |
影响产品复杂度设计、定价策略与商业化路径 |
|
用户的地理分布 |
指导区域市场投放与本地化运营 |
|
不同浏览器的用户画像差异 |
识别差异化人群特征，制定针对性竞争策略 |
大屏的核心价值不在于罗列统计数字，而在于将抽象的人口属性转化为可行动的人群认知。
2.2 大屏设计方案
图表选型与设计依据
|
分析目标 |
推荐图表 |
设计依据 |
|
展示性别比例、城乡分布 |
饼图 / 环形图 |
直观反映部分与整体的关系，适合占比类指标 |
|
对比不同年龄段、学历、职业的用户数量 |
柱状图 / 条形图 |
便于横向比较数量差异，条形图适用于类别较多的场景 |
|
展示省份分布 |
中国地图 |
空间信息的最佳载体，快速识别热点与空白区域 |
|
展示关键数值（总用户、平均年龄等） |
指标卡 / 翻牌器 |
突出核心结论，适合大屏“第一眼信息” |
|
支持不同浏览器的画像对比 |
筛选器（下拉多选） |
提供交互能力，使大屏从静态展示升级为可探索的分析工具 |
大屏模块与指标配置方案
最终用户画像大屏的组织结构如下：
|
模块 |
子模块 |
指标项 |
组件 |
关联数据表 |
说明 |
|
数据概览 |
用户概况 |
覆盖用户数 |
指标卡 |
user_profile_stats |
满足筛选条件的用户总数 |
|
年龄均值 |
指标卡 |
user_profile_stats |
用户平均年龄 |
||
|
本科以上占比 |
指标卡 |
user_profile_stats |
学历本科及以上用户比例 |
||
|
中高收入占比 |
指标卡 |
user_profile_stats |
月收入 > 5k 用户比例 |
||
|
基本信息 |
人口属性 |
性别分布 |
饼图 |
user_profile_stats |
男 / 女用户占比 |
|
年龄分布 |
柱状图 |
user_profile_stats |
按年龄段统计用户数 |
||
|
学历分布 |
条形图 |
user_profile_stats |
按学历层次统计用户数 |
||
|
职业分布 |
柱状图 |
user_profile_stats |
按职业类别统计用户数 |
||
|
收入分布 |
柱状图 |
user_profile_stats |
按收入段统计用户数 |
||
|
地域分布 |
空间分布 |
城市 vs 乡镇分布 |
饼图 |
user_profile_stats |
城市 / 城郊 / 乡村用户占比 |
|
用户省份分布 |
中国地图 |
user_profile_stats |
展示各省份用户数量分布 |
||
|
省份用户数 TOP5 |
轮播列表 |
user_profile_stats |
展示用户数量前五的省份 |
||
|
筛选器 |
维度筛选 |
浏览器选择 |
下拉多选 |
— |
支持单选、多选或全选，默认全部浏览器 |
如果还有其它要求，请随时告诉我，我可以进一步调整风格或补充内容。
2.3 参考图
2.4 项目整体说明
本次大屏项目包含“市场分析”和“用户画像”两个大屏，通过顶部导航按钮切换。市场分析大屏已在上一个实验中完成，本次实验只制作用户画像大屏。因此，在开始布局前，需要先将上一个实验已制作的市场分析图表全部隐藏，避免与当前用户画像内容重叠干扰。
图层管理功能：在大屏编辑界面右侧“图层”面板中，可以查看所有组件的堆叠顺序，支持拖拽调整图层上下关系、锁定组件防止误操作、隐藏组件临时不显示。本次实验中，我们可以将市场分析大屏的组件所在的“市场分析”组整体复制、隐藏，复制的组重命名为“用户画像”，用户画像大屏的组件正常显示。这样两个大屏可以共存于同一个大屏文件中，通过图层可见性切换，便于统一管理。两个大屏的点击切换交互将在后续实验中专门讲解，本次暂不涉及。
2.5 各模块设计思路与步骤
用户省份分布（中国地图）
设计思路：
分析省份分布，是为了识别区域市场的“热点”与“空白”：
哪些省份用户最多？
这些省份是否连片（如沿海高活跃带）？
哪些省份是“灯下黑”？
这些信息直接指导区域运营资源的投放优先级，以及本地化推广的策略选择。同时，省份分布也是向投资人展示市场覆盖范围的直观方式。
布局位置：
在大屏布局中，我们把省份分布地图放在最醒目的主视觉位置（通常是大屏的中上部或右侧核心区）。因为地图的空间表现力最强，能够一眼传递“用户从哪来”的直观印象，适合作为大屏的视觉焦点。
图表选择理由：
省份分布必须用地图组件来展示。 地理空间数据的核心信息是“邻近关系”和“空间聚集模式”——柱状图可以告诉你广东用户最多，但它回答不了“华东地区整体表现如何”这类问题。地图保留了省份之间的实际位置关系，观众可以一眼发现热点区域和空白区域。所以地图在这个场景下是不可替代的。
助睿Max地图能力：
助睿Max的“基础平面地图”组件支持多种子图层：区域热力层（按省份颜色深浅）、散点层（城市级别标记）、飞线层（展示流向关系）、迁徙层（动态流动效果）。本实验使用区域热力层即可满足需求，也可以根据实际数据复杂度叠加多个图层，实现更丰富的地理洞察。对于需要数字孪生的场景，助睿Max还支持三维地图、倾斜摄影模型、实时物联数据叠加，可直接构建智慧城市、工业仿真等数字孪生应用。
三、实验步骤
3.1组件配置
（1）根据参考图布局，添加“基础平面地图”组件，设置好大小、位置后，添加“区域热力层”子组件
（2）点击“区域热力层”进入子组件配置页面，可根据自身需求配置颜色渐变、边界线宽、高亮样式等属性。地图组件支持自定义地图样式（如深色模式、清新模式），可匹配大屏整体风格。
设计思路：
分析用户画像，需要一个快速获取整体印象的概览区。 在大屏布局中，核心指标卡通常放置在地图的上方、下方或左侧，与地图形成“数据总览+空间分布”的呼应关系。决策者关心四个问题：
用户规模有多大？
用户偏年轻还是成熟？
用户的教育水平如何？
有没有消费潜力？
因此，我们在主视觉区域设计了4个核心指标：
|
业务问题 |
对应指标 |
|
用户规模有多大？ |
用户总数 |
|
用户偏年轻还是成熟？ |
平均年龄 |
|
用户的教育水平如何？ |
本科及以上用户占比 |
|
有没有消费潜力？ |
中高收入用户（月收入≥5k）占比 |
这4个指标覆盖了用户的“规模、年龄、教育、收入”四个层面，足以快速勾勒出用户群的基本轮廓。
图表选择理由：
核心指标通常用指标卡（数字翻牌器）来呈现。 指标卡的优势是：数字大而醒目，标题简洁，没有任何冗余的图表元素，观众的目光会直接落在数值上。这就是我们选择指标卡的原因——在信息层级中，最重要的数字必须最先被看到。
翻牌器能力：
“数字翻牌器”组件支持动态数值变化动画、千分位分隔符、小数位数控制、前后缀自定义（如“万人”、“%”、“¥”），以及背景、边框、字体阴影等样式，使核心指标更加突出。同时，其工业级数据处理能力确保了即使底层数据达到千万级，翻牌器的数值更新依然流畅无延迟。
具体步骤：
（1）根据参考图，添加4个“数字翻牌器”纵向排列，设置标题和数值样式
（2）每个“数字翻牌器”的标题，使用“单张图片”组件设置背景，背景图链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/mbg.png
3.3 用户数TOP5省份排行榜
设计思路：
地图虽然展示了全国分布，但观众很难精确读出每个省份的具体数值。排行榜以列表形式直接给出用户数最高的几个省份及其数值，与地图形成互补：
地图看趋势和空间关系，排行榜看具体排名和数值。
帮助运营团队快速定位核心区域，优先在这些省份加大投放或开展线下活动。
观察TOP省份排名变化，识别新兴增长区域。
图表选择理由：
排行榜通常用表格或横向条形图来展示。表格的优点是信息密度高、精确，适合展示排名、省份名称、用户数三列信息，这里，我们采用表格形式，简洁明了。
表格组件：
平台提供了多种列表组件：轮播列表、折叠指标表格、键值表格、进度条表格。其中轮播列表支持各行各列的样式和内容的自定义配置，支持列表内容的超链接配置，同时支持图片格式的列表内容，能够使用轮播动画的方式，将数据信息以列表的形式清晰地展示在可视化应用上。本实验选择轮播列表，既美观又节省空间。
具体步骤：
（1）根据参考图，添加“单张图片”组件，作为排行榜区域背景，背景图链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/enrollment-data/top-list-bg.png
（2）添加“通用标题”组件，调整好样式
（3）添加“轮播列表”组件，调整好样式（行高、列宽、字体、交替行背景色等）
5.4 性别分布
设计思路：
了解浏览器用户的性别构成，是认识用户画像的第一步。不同性别的用户在使用浏览器的内容和偏好上存在显著差异——男性用户通常对科技、财经、体育等内容关注度更高，而女性用户则更偏娱乐、育儿、时尚等。这种内容偏好差异直接影响广告投放策略和信息流推荐逻辑。
基于上述信息，我们着重分析本浏览器用户的性别分布：
·男女比例如何？ 当前用户群是男性居多、女性居多，还是接近均衡？
·内容推荐依据：根据性别比例，可以推测用户可能更偏好哪些内容，指导运营团队调整推荐策略。
·异常监控：观察性别比例是否出现异常波动（如某月从7:3突变为5:5），这可能是市场或产品策略变化的信号。
图表选择理由：
性别分布用饼图来展示，因为性别只有两三个类别（男、女、未知）。饼图的扇形角度能被大脑瞬间识别为比例关系——看到半圆就知道50%，看到三分之一就知道33%，这种直觉反应是柱状图做不到的。所以我们用饼图，让观众不需要阅读数值就能感知男女比例。
饼图家族：
平台支持多种饼图：基础款饼图、基础饼图、标注对比图、目标占比图、多维度饼图、指标占比图、指标对比饼图、单值百分比饼图、轮播饼图。这里只有男、女、未知三个类别，使用基础饼图即可。同时，饼图支持内圈半径、外圈半径、标签位置、引导线等精细调节。
具体步骤：
（1）使用“单张图片”组件设置区域背景，并设置好标题
（2）添加“基础饼图”组件，调整大小和位置
5.5 年龄段分布
设计思路：
浏览器用户的年龄结构，是洞察用户需求的切入点。通过分析不同年龄段的占比，我们可以推断出不同年龄段的用户对浏览器的核心诉求和消费潜力。
基于上述信息，我们着重分析本浏览器用户的年龄结构：
· 哪个年龄段最多？ 主力用户是学生群体（<18岁），还是青年职场人群（18-35岁），或是年龄更大的用户？
·功能设计决策：如果用户偏年轻，可以加强个性化、社交分享功能；如果用户偏成熟，则需要强调稳定性、安全性和办公协同能力。
·风险预警：如果用户年龄结构持续老化，意味着产品对新用户的吸引力可能正在下降，需要警惕品牌老化风险。
图表选择理由：
年龄分布用柱状图来呈现，因为年龄是多个有序区间（如<18、18-25、26-35、>35），柱状图能直观展示分布形态（哪段最高？趋势是上升还是下降？）。饼图处理4个以上类别时会变得难以比较，而柱状图完全没有这个问题。
柱状图家族：
平台支持多种柱状图：基础柱图、弧形柱图、水平基础柱图、水平胶囊柱图、垂直胶囊柱图、垂直基本柱图（堆叠柱状图）。这里使用基础柱图即可。
具体步骤：
（1）使用“单张图片”组件设置区域背景，并设置好标题
（2）支持多种柱状图：基础柱图、弧形柱图、水平基础柱图、水平胶囊柱图、垂直胶囊柱图、垂直基本柱图（堆叠柱状图），这里我们使用基础柱图：
5.6 学历分布
设计思路：
浏览器用户的学历分布可以帮助我们从侧面了解用户群体的“特征画像”。不同教育背景的用户，在获取信息的习惯、对专业内容的接受度以及对新功能的探索意愿上可能存在差异。
基于上述信息，我们着重分析浏览器用户的学历结构：
·高学历用户占比如何？ 产品是否吸引了更多拥有高等教育背景的用户？
·产品复杂度设计：如果高学历（本科及以上）用户占比较高，说明用户群体对新功能、专业工具的接受度更高，产品可以考虑增加高级自定义设置或开发者工具。
图表选择理由：
学历分布用条形图（横向柱状图）来展示，因为学历类别名称通常较长（如“初中及以下”“高中/中专”“大专”“本科”“硕士及以上”），条形图让类别名称自然左对齐，阅读流畅度明显更好。
条形图：
这里使用水平基础柱图，它是横向条形图，尤其适合类别名称较长的场景。
具体步骤：
（1）使用“单张图片”组件设置区域背景，并设置好标题
（2）这里我们使用助睿Max 的水平基础柱图：
5.7 职业分布
设计思路：
了解浏览器用户的职业分布，可以帮助我们理解用户的“生活背景”，从而推断其典型的使用场景：
·判断用户群体：他们可能是学生、IT从业者、企业白领，还是自由职业者？
·场景化功能设计：学生用户多，可推出学习辅助功能；职场人士多，工作日活跃度高，可强化密码管理、云同步等办公属性功能。
·挖掘增长机会：如果某一职业群体占比较低，也许是未来定向推广或功能拓展的机会点。
图表选择理由：
职业分布用柱状图来展示。职业类别名称一般不长（如“学生”“IT从业者”“白领”等），柱状图可以清晰地进行横向对比。
具体步骤：
（1）使用“单张图片”组件设置区域背景，并设置好标题
（2）这里我们使用助睿Max的基础柱图：
5.8 收入分布
设计思路：
浏览器用户的收入数据直接服务于商业化策略。用户的收入水平是衡量其付费能力与消费意愿的核心指标之一，直接关系到产品商业化的天花板。
·挖掘高潜用户：分析收入分布，可以帮助找到更具价值的用户群体。
·指导变现策略：如果10k以上用户占比较高，可以考虑订阅制、云服务会员等高端增值服务。反之，如果用户收入集中在中等水平，则免费增值模式（如去广告付费）可能更合适。
图表选择理由：
收入分布用柱状图来展示。收入分段是有序变量（如<3k、3-5k、5-10k、>10k），柱状图能直观展示用户收入水平的集中趋势。
同时，在这个柱状图中展示绝对用户数，与顶部指标卡中的“中高收入用户占比”形成互补：占比给结构结论，绝对值给执行规模。
具体步骤：
（1）使用“单张图片”组件设置区域背景，并设置好标题
（2）这里我们使用助睿Max 的水平基础柱图：
5.9 居住地类型分布
设计思路：
用户居住地类型（城市/城郊/乡村）反映了用户所处环境的数字化程度和消费习惯差异。城市用户通常网络基础设施更好、线上消费更活跃；城郊和乡村用户可能对某些本地化服务或轻量级应用有独特需求。了解这一分布有助于制定差异化的市场策略和产品功能适配。
图表选择理由：
居住地类型只有三个类别，适合用饼图展示结构占比
特色饼图：
为了使大屏可视化效果更丰富，这里使用平台的轮播饼图组件。轮播饼图可以在饼图基础上增加轮播动画，依次高亮每个扇区并显示详细数值，在有限空间内增强了信息传达的动态效果。
具体步骤：
（1）使用“单张图片”组件设置区域背景，并设置好标题
（2）为了使大屏可视化效果更丰富，这里我们使用助睿Max 的轮播饼图：
5.10 筛选器
设计思路：
用户画像分析大屏的核心价值之一，是支持按不同浏览器进行对比分析。通过筛选器，用户可以：
·查看全部浏览器用户的整体画像（默认视图），了解产品大盘用户特征；
·选择单个浏览器（如 Chrome、IE、360 等），聚焦该浏览器用户的画像，回答“使用 Chrome 的用户与其他用户有什么不同？”；
·选择多个浏览器进行对比，直观比较不同浏览器用户的年龄、职业、地域等分布差异，为产品定位和竞争策略提供数据依据。
图表选择理由：
筛选器应满足多选、可清空、支持全选/默认全选的交互需求，同时要贴合大屏整体风格。助睿Max的下拉多选组件是最常用的筛选器类型：占用空间小、选项清晰、支持搜索，适合浏览器数量不多（6个）但需要灵活选择的场景。另外也可以使用选项卡组件，但下拉框更节省空间，适合放在大屏顶部或侧边栏。
筛选器组件：
平台提供了下拉框、下拉多选、单选框、时间选择器、选项卡等多种交互组件，均支持自定义选项、默认值、样式（边框、背景、字体颜色等），并可与多个图表联动，实现筛选后所有图表数据自动刷新。本实验使用下拉多选组件，默认选中“全部浏览器”。
具体步骤：
（1）在大屏顶部右侧合适位置，添加“下拉选择”组件（位于“交互”组件分类中），重命名为“浏览器筛选”，调整组件位置和大小
（2）在组件右侧属性面板中，调整样式如下：
四、实验结果
最后，点击“保存”并“预览”，检查整体布局是否协调、组件是否对齐、颜色是否一致。助睿Max支持一键全屏预览：
这次实验我们用到了助睿Max里的各种组件，比如地图、翻牌器、轮播列表等，还通过图层管理和样式配置，做出了一个专业级的数据大屏。
下一步，我们将进入蓝图编辑器，给这些静态组件接上真实数据，让大屏真正“动”起来。
五、实验问题
现象描述：
在浏览器筛选器中选择“Chrome”后，地图上的省份用户分布数据未发生变化，仍显示全部用户的数据。
年龄分布柱状图中，不同浏览器的用户年龄分布无差异，数据未按筛选条件更新。
翻牌器中的“本科以上占比”在切换浏览器后数值保持不变，筛选功能疑似失效。
分析过程：
经排查，问题原因如下：
1.筛选器未与数据表建立关联:
浏览器筛选器组件仅在前端做了UI渲染，未通过蓝图编辑器与数据查询条件绑定。
2.图表组件未配置动态筛选参数:
各图表（地图、柱状图、翻牌器）的数据请求仍为静态SQL或全量查询，未接收筛选器输出的浏览器类型参数。
3.数据表缺少浏览器字段索引:
user_profile_stats 表中虽存有 browser 字段，但查询语句中未将该字段作为动态筛选条件。
解决方法：
1.在蓝图编辑器中建立筛选器与数据源的连接
2.将浏览器筛选组件的“值变化”事件连接到各图表组件的“刷新数据”动作。
3.将筛选器输出的 browser 参数传递到图表的数据查询条件中。
4.修改各图表的数据查询逻辑
以地图组件为例，原查询：
SELECT province, COUNT(*) as user_count FROM user_profile_stats GROUP BY province
修改为：
SELECT province, COUNT(*) as user_count FROM user_profile_stats WHERE browser IN ('{{browser_filter}}')GROUP BY province
5.为 browser 字段添加数据库索引:
提升多条件筛选时的查询性能，避免大屏交互卡顿。
6.设置默认参数:
在筛选器配置中设置默认值为“全部浏览器”，确保大屏首次加载时展示完整数据。
六、实验总结
本次实验完成了浏览器用户画像分析大屏的静态布局设计与动态数据联动。通过助睿Max平台，利用指标卡、饼图、柱状图、条形图、中国地图、轮播列表等组件，搭建了涵盖用户概况、基本信息、地域分布三大模块的专业级大屏。
在数据绑定阶段，遇到了筛选器无法联动更新图表的问题。经分析，原因是筛选器未与图表组件建立事件连接，且SQL查询中缺少动态筛选条件。通过在蓝图编辑器中将筛选器的“值变化”事件连接到图表的“刷新数据”动作，并在查询语句中加入浏览器字段作为筛选参数，成功解决了联动问题。
本次实验掌握了企业级数据大屏的设计流程，理解了组件布局、样式配置与数据联动的核心逻辑，为后续复杂大屏开发奠定了实践基础。
附录：图片链接
实验6-2：浏览器用户画像分析-大屏数据接入
一、实验背景
1.1实验目的
本实验基于上一实验《浏览器用户画像分析-大屏静态布局制作》完成的大屏布局，使用助睿Max的蓝图编辑器，将之前实验加工好的用户画像数据表接入到大屏的各个图表组件中，并配置筛选器实现多浏览器联动。
通过本实验，学生应掌握：
理解蓝图编辑器的基本概念（数据源、触发器、动作、并行数据处理）
使用并行数据处理节点接收筛选器参数并分发给多个SQL请求节点
为不同图表组件编写带参数的SQL查询语句
配置筛选器与图表的联动交互
1.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 |
用户数 |
二、实验分析
2.1 蓝图编辑器概述
蓝图编辑器是助睿Max平台内置的可视化编程工具，核心作用是完成数据流配置与交互逻辑搭建。该工具依托节点+连线的可视化操作模式，支持用户灵活配置可视化应用内各类组件的联动与数据交互规则，无需代码即可完成业务逻辑搭建。
蓝图编辑器具备多项核心优势，具体如下：
实时同步能力：可保障应用内数据交互、数据更新的实时性，实现组件数据状态的同步统一。
数据高效处理：内置数据请求合并、数据精准分发能力，优化数据传输与处理效率。
模块化低门槛：支持业务逻辑模块化拆分，用户无需关注底层技术细节，仅需聚焦自身业务规则与交互需求即可完成配置。
2.2 核心概念释义
本功能模块涉及多项核心基础概念，是搭建数据交互逻辑的核心，各概念具体定义如下：
|
核心概念 |
详细说明 |
|
数据源 |
负责配置数据库连接信息，明确平台业务数据的来源渠道。 |
|
查询 |
通过编写SQL语句，精准定义需要从数据源中提取的目标数据内容。 |
|
触发器 |
用于激活数据加载、更新操作的触发事件，常见场景包含页面初始化加载、组件点击操作、定时数据刷新等。 |
|
动作 |
触发器被触发后执行的对应操作，例如执行数据查询、刷新组件图表数据等。 |
|
变量 |
承担查询节点之间的参数传递工作，典型应用为承接筛选组件选中的参数值并传递给对应数据查询接口。 |
2.3 核心业务流程
本可视化应用的数据加载、处理与展示全流程逻辑如下，整体采用“触发查询-参数传递-数据分发-组件渲染”的闭环模式：
1. 系统触发源头为页面初始化加载行为，或用户手动选择浏览器筛选条件，触发双SQL数据查询任务；
2. 启动维度数据查询SQL，批量获取用户性别、年龄、学历、职业、收入水平、居住地类型、省份分布等多维度统计数据；
3. 启动核心指标查询SQL，统计获取总用户数量、用户平均年龄、本科及以上学历用户占比、中高收入用户占比四项核心业务指标；
4. 浏览器筛选组件将用户选中的浏览器筛选参数，实时传递至上述两个SQL查询节点，实现数据精准筛选；
5. 维度数据通过独立的并行数据处理节点，依据dimension_type维度类型字段完成数据分类，分别分发至对应的可视化图表；
6. 核心指标数据通过另一并行数据处理节点，将单行多列的整合指标数据拆解为四个独立的指标数值，逐一推送至对应的指标卡片组件；
7. 所有图表、指标卡组件接收分发后的标准数据，完成页面可视化渲染与数据展示。
2.4 各节点核心职责
整个业务流程由多个功能节点协同完成，各节点分工明确、各司其职，具体职责划分如下：
|
节点名称 |
核心职责 |
|
页面加载节点 |
在大屏页面打开的瞬间，自动触发一次全量数据加载，保障页面初始数据正常展示。 |
|
浏览器筛选器节点 |
监听用户的浏览器选择操作，触发页面数据实时刷新，并将用户选中的筛选参数向下游节点传递。 |
|
浏览器参数接收节点 |
属于并行数据处理节点，主要用于接收筛选器传递的参数，并将参数存储为全局变量，供后续查询节点调用。 |
|
维度数据SQL请求节点 |
一次性批量查询用户七大维度数据，涵盖性别、年龄、学历、职业、收入、居住地类型、省份分布，统一以（dimension_type、name、value）格式输出标准化数据。 |
|
核心指标SQL请求节点 |
专项查询四项核心用户指标，输出为单行多列的整合式数据格式，为指标卡展示提供数据支撑。 |
|
维度数据分发节点 |
并行数据处理节点，根据dimension_type字段对全量维度数据进行分类过滤、格式标准化处理，精准分发给7个对应维度图表。 |
|
核心指标分发节点 |
并行数据处理节点，对单行多列的核心指标数据进行拆解，拆分出四个独立指标数值，分别推送至对应的四个指标卡组件。 |
|
各图表组件 |
接收下游分发的各类标准数据，完成页面可视化渲染，最终呈现数据图表与指标内容。 |
2.5 本次实验范围界定
本次实验仅针对全国全域数据开展可视化展示开发，具体覆盖内容如下：
·全国省份分布地图：可视化展示全国各省份的用户数量分布情况
·全国核心数据指标：包含总用户数、用户平均年龄、本科及以上学历用户占比、中高收入用户占比四大核心指标
·全国用户多维度数据分布：涵盖性别、年龄、学历、职业、收入、居住地类型六大维度的用户分布数据
注：点击省份查看对应省份核心指标数据的交互功能，将在后续实验中开发实现，不属于本次实验范畴。
2.6 完整蓝图连接示意图
蓝图编辑器亮点：通过拖拽节点、连线即可完成复杂的交互逻辑，无需编写复杂代码。并行数据处理节点支持一个数据源同时分发到多个图表，实现高效的数据复用。
节点连线说明：
|
起点节点 |
终点节点 |
连线含义 |
|
页面加载（页面初始化完成） |
浏览器参数接收（输入） |
大屏打开时触发参数初始化 |
|
浏览器筛选器（下拉框内容被选中） |
浏览器参数接收（输入） |
用户选择浏览器后触发 |
|
浏览器参数接收（输出） |
维度数据SQL请求（执行SQL） |
传递浏览器参数 |
|
浏览器参数接收（输出） |
核心指标SQL请求（执行SQL） |
传递浏览器参数 |
|
维度数据SQL请求（执行成功） |
维度数据分发（输入） |
将维度数据传给分发节点 |
|
核心指标SQL请求（执行成功） |
核心指标分发（输入） |
将核心指标数据传给分发节点 |
|
维度数据分发（分支1-7） |
各维度图表（导入数据接口） |
性别、年龄、学历等数据 |
|
核心指标分发（分支1-4） |
四个指标卡（导入数据接口） |
总用户数、平均年龄等 |
三、实验步骤
3.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
③ 执行转换流
3.2 组件导出到蓝图编辑器
上周的实验【浏览器市场分析-大屏数据接入】已经介绍了如何连接数据源，本实验不再教学。
只有当组件导入到蓝图编辑器后，才可以为该组件配置交互。
打开上一实验制作的“用户画像”数据大屏，在画布编辑器内，右键单击左侧图层栏或中间画布区的组件，选择导出到蓝图编辑器，即可将对应组件导出到蓝图编辑器中。
将以下组件依次导出到蓝图编辑器：
浏览器筛选器（下拉多选）
性别分布饼图
年龄段分布柱状图
学历分布条形图
职业分布柱状图
收入分布柱状图
居住地类型饼图
用户省份分布地图
省份排行榜（轮播列表）
核心指标卡（总用户数、平均年龄、中高收入占比）
导出成功后，单击“蓝图编辑器”图标切换到蓝图编辑器页面，可在导入节点列表中查看对应的节点。列表内所有节点都可供后续配置交互使用。
3.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浏览器”
这样，一个筛选器就同时控制了所有图表。
3.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}' 即可，不需要处理“全部浏览器”的情况。
3.5 添加核心指标SQL请求节点（单独查询四个指标）
这个节点只查询四个核心指标，输出单行多列格式（一行包含四个字段），不需要 UNION ALL，取值更简单。
添加“SQL请求”节点，重命名为“核心指标SQL请求”，查询SQL如下：
// 从全局变量获取选中的浏览器值
const selectedBrowser = window.GLOBAL_SELECTED_BROWSER;
let sql = `-- 核心指标（总用户数、平均年龄、本科及以上占比、中高收入占比）select
'total_users' as name,
sum(user_count) as valuefrom labs.user_profile_statswhere browser_name = '${selectedBrowser}'
union all
select
'avg_age' as name,
round(sum(age * user_count) / sum(user_count), 1) as valuefrom labs.user_profile_statswhere 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 valuefrom labs.user_profile_statswhere 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 valuefrom labs.user_profile_statswhere browser_name = '${selectedBrowser}'
`;return sql
3.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.观察地图、饼图、柱状图是否都随筛选器变化
四、实验结果
五、实验问题
问题 1：打开大屏图表全部空白，无任何数据展示
现象：页面加载完成后，饼图、柱状图、指标卡、地图均为空，控制台无明显报错。
原因：
- 页面加载节点未连线至浏览器参数接收节点，全局筛选变量未初始化；
2.SQL 请求节点读取全局变量名称拼写错误，查询条件匹配不到数据；
3. 蓝图未保存，画布组件未同步蓝图配置。
解决方法：检查页面加载节点与参数接收节点连线，核对 JS 代码中 GLOBAL_SELECTED_BROWSER 变量名保持统一；修改 SQL 中变量引用代码；配置完成后点击蓝图右上角保存，重新刷新大屏预览。
六、实验总结
本次实验基于上一轮大屏静态布局成果，使用助睿 Max 蓝图编辑器完成用户画像数据表的数据接入与浏览器筛选器全域联动开发，系统学习了蓝图编辑器数据源、触发器、动作、并行数据处理等基础概念，掌握了筛选参数全局传递、多维度联合 SQL 查询、并行节点数据拆分分发、图表交互联动整套实操流程。
实验整体采用 “触发传参 - SQL 批量查询 - 并行分发渲染” 的闭环流程，通过全局变量统一承接筛选器参数，使用 UNION ALL 一次性查询七大用户维度数据减少重复请求，依靠并行数据处理节点拆分数据供给不同组件，大幅简化多图表联动的配置成本，理解了低代码可视化平台依靠节点连线实现交互的底层逻辑，对比单独为每个图表配置数据请求，本次方案数据复用率更高、平台渲染效率更好。
实验6-3：2012年浏览器全景分析-大屏交互设置
一、实验背景
1.1实验目的
本实验基于前两个实验完成的市场分析大屏和用户画像大屏，使用助睿Max的蓝图编辑器，配置两个大屏之间的切换交互，以及地图省份点击联动指标卡的功能。
通过本实验，学生应掌握：
使用图层可见性控制实现大屏内容切换
使用按钮组件配置页面跳转或内容显示/隐藏
使用地图组件的交互事件，实现省份下钻联动
1.2整体交互逻辑说明
1.2.1 大屏切换逻辑
市场分析和用户画像两个大屏实际上是在同一个大屏文件中，通过控制图层的可见性来实现切换。
实现原理：通过 tab列表组件实现。将市场分析的所有组件放入“市场分析组”，用户画像的所有组件放入“用户画像组”。tab列表组件设置2列（“市场分析”和“用户画像”），每列设置不同的ID（如 "id": 1 和 "id": 2），背景设为透明以融合导航栏样式。点击某列时，根据ID控制两个组的可见性：显示对应组，隐藏另一组。
助睿Max图层管理优势：通过“图层”面板可以轻松控制组件的显示/隐藏，无需编写代码。配合蓝图编辑器，可以实现按钮与图层可见性的联动。
1.2.2 地图省份点击联动逻辑
在用户画像大屏中，点击地图上的某个省份时，右侧的四个核心指标卡（总用户数、平均年龄、本科及以上占比、中高收入占比）需要更新为该省份的数据。
用户点击省份 → 地图组件触发“点击区域”事件 → 蓝图接收省份名称 → SQL请求查询该省份的核心指标 → 指标卡刷新数据
二、实验分析
2.1 什么是蓝图编辑器？
蓝图编辑器是助睿Max中用于配置数据流和交互逻辑的可视化编程工具。它采用“节点-连线”的方式，帮助您自由管理可视化应用中多个组件之间的交互关系。
蓝图编辑器的优势：
·蓝图编辑器可以保证交互和数据的实时性和同步性。
·蓝图编辑器支持数据请求合并和数据分发的功能
·蓝图编辑器可模块化拆分，专注单个的交互链路，不需要考虑代码的整理和规范，只需要专注于业务规则和交互需求即可。
2.2 核心概念
|
概念 |
说明 |
|
数据源 |
数据库连接配置，定义数据从哪里来 |
|
查询 |
SQL语句，定义取什么数据 |
|
触发器 |
触发数据加载的事件（如页面加载、组件点击、定时刷新等） |
|
动作 |
触发器执行后的操作（如查询数据、刷新图表） |
|
变量 |
用于在查询之间传递参数（如筛选器选中的浏览器名称） |
2.3 核心流程（大屏切换）
1.用户点击tab列表中的“市场分析”列 → 触发点击事件，输出ID 1
2.蓝图接收ID → 设置“市场分析组”可见，设置“用户画像组”隐藏
3.用户点击tab列表中的“用户画像”列 → 触发点击事件，输出ID 2
4.蓝图接收ID → 设置“市场分析组”隐藏，设置“用户画像组”可见
2.4 核心流程（地图点击联动）
1.用户点击地图上的省份区域 → 触发“点击区域”事件
2.地图组件 → 输出被点击的省份名称
3.省份参数接收节点 → 接收省份名称，存储到全局变量
4.省份核心指标查询节点 → 读取省份名称和当前浏览器，查询该省份的核心指标
5.省份核心指标分发节点 → 将查询结果拆分为4个独立数值
6.四个核心指标卡 → 接收新数据并刷新显示
2.5 各节点职责
|
节点 |
职责 |
|
tab列表组件 |
提供“市场分析”和“用户画像”两个选项，捕获用户点击，输出对应的ID |
|
基础平面地图 |
展示省份分布，捕获用户点击的省份区域 |
|
省份参数接收 |
接收省份名称，存储到全局变量 |
|
省份核心指标查询 |
根据省份和浏览器，查询该省份的核心指标 |
|
省份核心指标分发 |
将查询结果拆分为4个独立数值 |
|
四个指标卡 |
显示该省份的用户画像数据 |
2.5 完整蓝图连接示意图
蓝图编辑器亮点：通过拖拽节点、连线即可完成复杂的交互逻辑，无需编写复杂代码。并行数据处理节点支持一个数据源同时分发到多个图表，实现高效的数据复用。
三、实验步骤
3.1 配置大屏切换
实现原理：
Tab列表组件是一个可自定义选项的交互组件。助睿Max的Tab列表组件内置了丰富的样式自定义选项（背景色、字体、选中态颜色等），无需额外CSS即可实现美观的导航栏。Tab列表组件点击时会触发“当Tab点击时”事件，并输出被点击项的ID。通过分支判断节点判断ID，然后分别执行“设置图层可见性”动作，即可实现两组内容的切换。
本实验将Tab列表组件设置为2列，与两个导航按钮的大小、位置重合，分别代表“市场分析”和“用户画像”。通过为每列设置唯一的ID，点击时即可区分用户的选择，从而实现不同内容的切换。
操作步骤：
（1）添加Tab列表组件，调整大小、位置，两个导航按钮重合
（2）Tab列表组件的基本设置中，设置行数为1，列数为2，再标签默认配置中，将“背景颜色”、“选中背景色”、“悬浮背景色”的透明度设置为0，这样就看不见Tab列表组件，给用户的感觉就是只有2个按钮
（3）设置Tab列表组件每个选项的id：在数据中，保留2列数据，id分别为1、2，content为空，设置后记得刷新数据
（4）将“市场分析”组、“用户画像”组、Tab列表组件导出到蓝图编辑器
（5）在蓝图编辑器中，将“市场分析”组、“用户画像”组、Tab列表组件添加到蓝图编辑器画布中，通过“分支判断”节点来做“当Tab点击时”的id判断，处理刚发为：
return data.id == 1;
（6）在“分支判断”的 满足 分支上，添加两个“设置图层可见性”动作：
目标图层：市场分析组 → 显示
目标图层：用户画像组 → 隐藏
（7）在“判断选项卡”的 不满足 分支上，添加两个“设置图层可见性”动作：
目标图层：市场分析组 → 隐藏
目标图层：用户画像组 → 显示
平台的条件分支节点允许根据表达式的结果执行不同的动作，非常适合处理这类二选一的交互场景。配合“设置图层可见性”动作，无需代码即可实现复杂的界面切换。
3.2 配置地图省份点击联动
3.2.1 设计思路与原理
在用户画像大屏中，我们希望通过点击地图上的任意省份，右侧的核心指标卡（总用户数、平均年龄、本科及以上占比、中高收入占比）能立即切换为该省份的数据。这是一种典型的地理下钻分析，也是数据大屏的核心交互之一。
平台的蓝图编辑器让这种交互无需编写后端代码，只需通过“事件-动作”的连线即可实现。整个数据流如下：
地图点击（事件） → 提取省份名称（并行数据处理） → 动态SQL查询（SQL请求） → 数据分发（并行数据处理） → 四个指标卡刷新
核心知识点：
- 事件驱动：地图组件的“点击区域时”事件是起点，它会输出被点击区域的地理信息（如省份名称），前提是需要开启组件的交互事件。
331×329 4.1 KB
变量传递：通过 window.globalProvinceName 全局变量，可以将省份名称在不同节点间共享，避免重复连线。
动态SQL：SQL请求节点可以接收外部变量，实现“根据用户点击的省份查询不同数据”。
并行数据处理：将一次查询返回的多行数据（每个指标一行）拆分、过滤，分别发送给不同的目标组件。
传统开发中，实现此类下钻功能需要编写前端 JavaScript 和后端 API，而助睿Max 通过蓝图编辑器将数据流可视化，拖拽节点即可完成，开发效率提升数倍。
3.2.2 核心组件配置
（1）提取地区名称（并行数据处理）
地图组件点击后返回的省份名称是全称（如“江苏省”、“广西壮族自治区”），但我们的数据表中存储的是简称（“江苏”、“广西”）。因此需要先做一个名称映射。
作用：接收地图点击事件输出的 data 对象，从中提取 name 字段，并通过映射表转换为数据表中的简称，最后存入全局变量 window.globalProvinceName。
代码（已提供完整映射表，支持省、自治区、直辖市、特别行政区）：
// 省份特殊映射（直辖市、自治区、特别行政区）const specialMap = {
'北京市': '北京', '天津市': '天津', '上海市': '上海', '重庆市': '重庆',
'广西壮族自治区': '广西', '内蒙古自治区': '内蒙古', '西藏自治区': '西藏',
'宁夏回族自治区': '宁夏', '新疆维吾尔自治区': '新疆',
'香港特别行政区': '香港', '澳门特别行政区': '澳门'
};
let provinceName = data.name;// 优先使用特殊映射if (specialMap[provinceName]) {
provinceName = specialMap[provinceName];
} else {
// 通用处理：去除末尾的“省”、“自治区”、“市”
provinceName = provinceName.replace(/(省|自治区|市)$/, '');
}
window.globalProvinceName = provinceName;return provinceName;
（2）省份核心指标查询（SQL请求节点）
根据当前选中的浏览器（window.GLOBAL_SELECTED_BROWSER）和点击的省份（window.globalProvinceName），从 user_profile_stats 表中查询四个核心指标。为了便于后续分发，使用 UNION ALL 将四个指标输出为多行，每行包含 name（指标名）和 value（数值）。
SQL 如下：
const selectedProvince = window.globalProvinceName;
console.log("点击的省份名称（处理后）：", selectedProvince);
const selectedBrowser = window.GLOBAL_SELECTED_BROWSER;
const sql = `
select 'total_users' as name, sum(user_count) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}' and province = '${selectedProvince}'
union all
select 'avg_age' as name,
round(sum(age * user_count) / sum(user_count), 0) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}' and province = '${selectedProvince}'
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), 2) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}' and province = '${selectedProvince}'
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), 2) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}' and province = '${selectedProvince}'
`;
console.log("生成的省份核心指标SQL：", sql);
return sql;
（3）省份核心指标分发（并行数据处理）
SQL 返回的是四行数据，而四个指标卡每个只需要一个数值。通过“并行数据处理”节点，我们按 name 字段过滤，将每个指标单独输出给对应的指标卡。
分支示例（总用户数）：
var item = data.find(item => item.name === 'total_users');return [{ value: item ? item.value : 0 }];
其他分支类似，只需修改 item.name === 'total_users'的条件即可
3.2.3 蓝图连线与数据流
1.区域热力层的“点击区域时”事件 → 连接到 “提取地区名称” 节点。
2.“提取地区名称” 的“执行成功”输出 → 连接到 “省份核心指标查询” 节点的“执行SQL”输入。
3.“省份核心指标查询” 的“执行成功”输出 → 连接到 “省份核心指标分发” 节点的输入。
4.“省份核心指标分发” 的四个输出分支 → 分别连接到四个核心指标卡的“导入数据接口”。
3.3 地图热力层根据用户数渲染颜色
3.3.1 设计思路与原理
为了直观展示全国各省份的用户分布，我们需要在地图上用颜色深浅来表示每个省份的用户数（用户数越多，颜色越深）。这是数据大屏中常见的热力图效果。
助睿Max 的地图组件支持通过“区域热力层”子组件接收自定义数据。数据格式要求为 { name, value, area_id }，其中 name 为省份名称，value 为用户数，area_id 为行政区划代码（adcode）。因此，我们需要完成以下步骤：
1.提取地理数据中的 adcode 和 name：地图组件内部包含全国各省份的 GeoJSON 边界数据，其中包含 adcode（行政区划代码）和标准名称。我们需要提取并建立一个“省份名称 → adcode”的映射表，存储在全局变量中。
2.查询所有省份的用户数：根据当前选中的浏览器，从 user_profile_stats 表中统计每个省份的用户总数。
3.数据映射与格式化：将查询结果中的省份名称与 adcode 映射表匹配，输出格式 { name, value, area_id }。
4.导入热力值数据：将格式化后的数据导入地图的“区域热力层”子组件，即可自动渲染颜色深浅。
传统开发中，实现地图热力层需要前端加载 GeoJSON、手动计算颜色映射、绑定事件等。而助睿Max 只需配置子组件的数据接口，平台自动完成渲染，极大降低了地理可视化的门槛。
3.3.2 核心组件配置
（1）提取 adcode 映射表（并行数据处理）
此节点只需执行一次，在页面加载时运行，从地图组件内置的 GeoJSON 中提取每个省份的 adcode 和标准名称，建立映射表 globalProvinceAdcode。
操作步骤：
·在蓝图中添加“并行数据处理”节点，命名为“提取adcode映射表”。
将区域热力层的“当数据接口地理边界geojson数据加载完成时”事件连接到该节点（确保地图数据加载后执行）。
·提取 adcode 映射表的处理方法中输入以下代码：
/**
* 提取地理数据中的 adcode 和 name，建立名称→adcode 映射
* @param {Object} data - 地理数据对象（包含 features 数组）
* @returns {Object} 名称到 adcode 的映射表
*/function extractAdcodeAndName(data) {
if (!data || !Array.isArray(data.features)) {
console.error('无效的地图数据格式');
return {};
}
const nameToAdcode = {};
data.features.forEach(feature => {
const props = feature.properties;
if (props && props.adcode && props.name) {
nameToAdcode[props.name] = props.adcode;
}
});
return nameToAdcode;
}const mapping = extractAdcodeAndName(data);window.globalProvinceAdcode = mapping;console.log("省份adcode映射表已加载", Object.keys(mapping).length);return mapping;
（2）查询所有省份的用户数（SQL请求节点）
根据当前选中的浏览器（window.GLOBAL_SELECTED_BROWSER），统计每个省份的用户总数，并按用户数降序排列。
操作步骤：
·添加“SQL请求”节点，命名为“各省份用户数查询”。
·处理方法中输入以下代码：
const selectedBrowser = window.GLOBAL_SELECTED_BROWSER; // 当前选中的浏览器
const sql = `SELECT
province AS name,
SUM(user_count) AS valueFROM labs.user_profile_statsWHERE browser_name = '${selectedBrowser}'
AND province IS NOT NULL
AND province != ''GROUP BY provinceORDER BY value DESC
`;
console.log("生成的所有省份用户数SQL：", sql);return sql;
（3）地图数据映射（并行数据处理节点）
将 SQL 查询结果中的省份名称与 window.globalProvinceAdcode 匹配，生成 { name, value, area_id } 格式的数据，供地图热力层使用。
操作步骤：
·添加“并行数据处理”节点，重命名为“地图数据与用户数映射”。
·处理方法中输入以下代码：
function convertToMapData(data) {
if (!Array.isArray(data) || data.length === 0) {
return [];
}
return data.map(item => {
const provinceName = item.name; // 注意：SQL 返回字段名为 name
let area_id = globalProvinceAdcode[provinceName];
// 如果直接匹配失败，尝试简化名称（案例中已实现）
if (!area_id) {
const simplifiedName = provinceName.replace(/省|市|自治区|特别行政区|回族|壮族|维吾尔|藏族|苗族/g, '');
for (const fullName in globalProvinceAdcode) {
if (fullName.includes(simplifiedName)) {
area_id = globalProvinceAdcode[fullName];
break;
}
}
}
if (!area_id) {
// console.warn(`未找到省份 "${provinceName}" 的匹配 adcode`);
area_id = "000000";
}
return {
name: provinceName,
value: parseFloat(item.value) || 0,
area_id: Number(area_id)
};
});
}const result = convertToMapData(data);// console.log("最终返回的地图热力数据：", result);return result;
（4）导入地图热力层
在地图组件（基础平面地图）中，已经添加了子组件“区域热力层”。我们需要将映射后的数据导入该子组件。
操作步骤：
- 将“地图数据与用户数映射”节点的输出端口连接到“区域热力层”的“导入热力值数据接口”。
助睿Max的地图组件及其子组件的事件和动作非常丰富。通过“导入热力值数据接口”动态更新数据，可以实现浏览器切换时热力图自动刷新。
3.3.3 蓝图连线与数据流
完整的蓝图数据流如下（热力渲染部分独立于点击联动）：
3.4 预览与发布
完成上述所有配置后，大屏应具备三个核心交互功能：
1.大屏切换：点击 tab 列表的“市场分析”/“用户画像”，正确显示对应大屏内容。
2.地图热力层：地图上各省份颜色深浅反映该省份在当前浏览器下的用户数（用户数越多颜色越深）。
3.省份点击联动：点击地图上的省份，右侧四个核心指标卡自动更新为该省份的数据。
保存预览，对以上功能进行验证，确保三个核心交互功能均正常工作。
最后点击“发布”按钮，在弹出的发布对话框中打开发布分享开关，复制分享链接，打开浏览器，将复制的链接粘贴到地址栏中，即可在线观看
四、实验结果
五、实验问题
问题一：点击地图省份后，指标卡数据始终为 0
现象：正常切换浏览器、地图热力图显示正常，但点击任意省份，四个核心指标卡全部显示 0，无法展示对应省份数据。 原因：地图返回的省份全称和数据库内省份简称不匹配，省份名称映射代码失效，传入 SQL 的省份参数错误，查询不到对应数据；同时全局省份变量未正常挂载。 解决方法：核对省份名称映射代码，完善自治区、直辖市名称简写规则；在节点中打印日志查看传递的省份参数，修复变量挂载代码，保证 SQL 接收的省份名称和数据表字段完全一致。
问题二：tab 导航点击后，大屏图层无法切换，页面内容无变化
现象：点击市场分析、用户画像两个导航选项，页面始终停留在一个界面，两组图层不会隐藏和显示。 原因：分支判断节点表达式书写错误，tab 点击输出的 id 没有被正确识别；图层分组未正确归类，蓝图内图层组件没有成功导入，连线顺序错误。 解决方法：修正分支判断代码，保证判断语句格式无误；重新将所有组件归入对应图层组，重新导出图层组件至蓝图；按照触发顺序重新连接 tab 组件、分支判断节点和图层可见性节点，保存蓝图后重新预览测试。
六、实验结论
本次实验借助平台蓝图编辑器，完成双大屏图层切换、地图热力可视化以及省份点击下钻联动三大功能配置，熟练掌握了图层显隐控制、组件事件触发、全局变量传参、动态 SQL 查询等低代码大屏交互核心操作。实验依托节点连线可视化配置交互逻辑，无需编写大量代码，实现了 Tab 组件一键切换两大业务大屏，同时利用地图热力层直观展示各省用户数量分布情况，点击省份即可同步更新本地用户核心指标，完成地理维度的数据下钻分析。实验过程中也发现了省份名称不匹配、判断节点代码出错等实操问题，通过日志排查、代码修正、核对字段映射顺利解决。本次实验进一步理解了事件驱动、参数传递、数据分发的完整数据流逻辑，体会到低代码可视化平台高效便捷的开发优势，提升了大屏交互调试与数据可视化实战能力，圆满完成本次实验全部学习目标。
一站式 AI 云服务平台
更多推荐
3
0- 0
已为社区贡献2条内容
所有评论(0)