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

---

第一部分：大屏静态布局制作

1 实验概述

本实验基于用户画像统计表（user_profile_stats），完成浏览器用户画像分析大屏的静态布局设计。通过本实验，学生应掌握根据用户画像分析需求合理设计大屏的信息结构与叙事逻辑，理解不同图表类型在用户画像分析中的适用场景，将数据结果转化为可直观理解的用户洞察。

实验平台为助睿在线实验平台，可视化工具为助睿Max（数据大屏）。助睿Max是低代码数据可视化平台，支持拖拽搭建、多种图表组件、地图可视化、交互筛选等能力。

2 实验数据

本实验使用加工完成的 user_profile_stats 表，按浏览器维度统计用户在各人口属性上的分布，包括：基本信息（性别、年龄、学历、职业、收入）和地域信息（居住地类型、省份）。

3 大屏设计方案

大屏包含数据概览、基本信息、地域分布和筛选器四大模块，具体组件配置如下：

数据概览模块使用指标卡展示覆盖用户数、性别比例、本科以上占比、中高收入占比。基本信息模块使用饼图展示性别分布，柱状图展示年龄、职业、收入分布，条形图展示学历分布。地域分布模块使用中国地图展示省份分布，轮播列表展示TOP5省份。筛选器支持下拉多选浏览器。

添加图片注释，不超过 140 字（可选）

图1-1 用户画像大屏参考布局

4 图层管理

本次大屏项目包含市场分析和用户画像两个大屏，通过顶部导航按钮切换。市场分析大屏的组件所在的组整体复制、隐藏，复制的组重命名为用户画像，用户画像大屏的组件正常显示。两个大屏共存于同一个大屏文件中，通过图层可见性切换，便于统一管理。

添加图片注释，不超过 140 字（可选）

图1-2 图层管理面板

5 各模块设计思路与步骤

5.1 用户省份分布（中国地图）

分析省份分布是为了识别区域市场的热点与空白，直接指导区域运营资源的投放优先级。省份分布必须用地图组件来展示，地理空间数据的核心信息是邻近关系和空间聚集模式。助睿Max的基础平面地图组件支持区域热力层、散点层、飞线层、迁徙层等子图层。

添加图片注释，不超过 140 字（可选）

图1-3 添加基础平面地图组件

添加图片注释，不超过 140 字（可选）

图1-4 区域热力层配置

5.2 核心指标

核心指标卡通常放置在地图的上方、下方或左侧，与地图形成数据总览+空间分布的呼应关系。设计了4个核心指标：用户总数、平均年龄、本科及以上用户占比、中高收入用户占比，覆盖用户的规模、年龄、教育、收入四个层面。

添加图片注释，不超过 140 字（可选）

图1-5 核心指标翻牌器

5.3 用户数TOP5省份排行榜

地图虽然展示了全国分布，但观众很难精确读出每个省份的具体数值。排行榜以列表形式直接给出用户数最高的几个省份及其数值，与地图形成互补。采用轮播列表组件，既美观又节省空间。

添加图片注释，不超过 140 字（可选）

图1-6 省份TOP5排行榜

5.4 性别分布

了解浏览器用户的性别构成，是认识用户画像的第一步。性别分布用饼图来展示，因为性别只有两三个类别，饼图的扇形角度能被大脑瞬间识别为比例关系。

添加图片注释，不超过 140 字（可选）

图1-7 性别分布饼图

5.5 年龄段分布

浏览器用户的年龄结构是洞察用户需求的切入点。年龄分布用柱状图来呈现，因为年龄是多个有序区间，柱状图能直观展示分布形态。

添加图片注释，不超过 140 字（可选）

图1-8 年龄段分布柱状图

5.6 学历分布

学历分布用条形图（横向柱状图）来展示，因为学历类别名称通常较长，条形图让类别名称自然左对齐，阅读流畅度明显更好。

添加图片注释，不超过 140 字（可选）

图1-9 学历分布条形图

5.7 职业分布

了解浏览器用户的职业分布，可以帮助我们理解用户的生活背景，从而推断其典型的使用场景。职业分布用柱状图来展示，可以清晰地进行横向对比。

添加图片注释，不超过 140 字（可选）

图1-10 职业分布柱状图

5.8 收入分布

浏览器用户的收入数据直接服务于商业化策略。用户的收入水平是衡量其付费能力与消费意愿的核心指标之一。收入分布用柱状图来展示，收入分段是有序变量，柱状图能直观展示用户收入水平的集中趋势。

添加图片注释，不超过 140 字（可选）

图1-11 收入分布柱状图

5.9 居住地类型分布

用户居住地类型（城市/城郊/乡村）反映了用户所处环境的数字化程度和消费习惯差异。居住地类型只有三个类别，适合用饼图展示结构占比。

添加图片注释，不超过 140 字（可选）

图1-12 居住地类型分布饼图

5.10 筛选器

用户画像分析大屏的核心价值之一是支持按不同浏览器进行对比分析。使用下拉多选组件，默认选中全部浏览器。

添加图片注释，不超过 140 字（可选）

图1-13 浏览器筛选器

6 预览与总结

点击保存并预览，检查整体布局是否协调、组件是否对齐、颜色是否一致。助睿Max支持一键全屏预览。至此，浏览器用户画像分析大屏的静态布局已全部完成。

添加图片注释，不超过 140 字（可选）

图1-14 大屏预览效果

---

第二部分：大屏数据接入

1 实验概述

本实验基于上一实验完成的大屏布局，使用助睿Max的蓝图编辑器，将用户画像数据表接入到大屏的各个图表组件中，并配置筛选器实现多浏览器联动。通过本实验，学生应掌握蓝图编辑器的基本概念、并行数据处理节点的使用、带参数的SQL查询语句编写，以及筛选器与图表的联动交互配置。

2 整体蓝图逻辑

蓝图编辑器是助睿Max中用于配置数据流和交互逻辑的可视化编程工具，采用节点-连线的方式管理多个组件之间的交互关系。核心流程为：页面加载或用户选择浏览器触发两个SQL请求，维度数据SQL查询性别、年龄、学历、职业、收入、居住地类型、省份分布；核心指标SQL查询总用户数、平均年龄、本科及以上占比、中高收入占比。浏览器筛选器将选中的浏览器值传递给两个SQL请求节点，再通过并行数据处理节点分发到各个图表组件。

添加图片注释，不超过 140 字（可选）

图2-1 完整蓝图连接示意图

3 实验步骤

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

为了更准确地计算平均年龄，需要在 user_profile_stats 表中增加 age 字段。修改排序记录组件增加 age 字段升序排序，修改分组组件按 age 分组，然后执行转换流。

3.2 组件导出到蓝图编辑器

将浏览器筛选器、性别分布饼图、年龄段分布柱状图、学历分布条形图、职业分布柱状图、收入分布柱状图、居住地类型饼图、用户省份分布地图、省份排行榜、核心指标卡等组件依次导出到蓝图编辑器。导出成功后，可在导入节点列表中查看对应的节点。

添加图片注释，不超过 140 字（可选）

图2-2 组件导出到蓝图编辑器

3.3 添加浏览器参数接收节点

添加并行数据处理节点，命名为浏览器参数接收。方法一在页面加载时执行，设置基础URL；方法二在每次筛选器变化时执行，将用户选中的浏览器存到全局变量 window.GLOBAL_SELECTED_BROWSER 中。浏览器的选项使用静态数据，填写6个浏览器的对应内容，默认选中IE浏览器。

添加图片注释，不超过 140 字（可选）

图2-3 浏览器筛选器静态数据配置

添加图片注释，不超过 140 字（可选）

图2-4 筛选器默认选中设置

添加图片注释，不超过 140 字（可选）

图2-5 筛选器控制所有图表效果

3.4 添加维度数据SQL请求节点

添加SQL请求节点，重命名为维度数据SQL请求。使用 UNION ALL 合并性别、年龄、学历、职业、收入、居住地类型、省份等维度数据，输出格式为 (dimension_type, name, value)。这样一次查询就能拿到所有图表需要的数据。

添加图片注释，不超过 140 字（可选）

图2-6 维度数据SQL请求节点配置

3.5 添加核心指标SQL请求节点

添加SQL请求节点，重命名为核心指标SQL请求。查询四个核心指标：总用户数、平均年龄（按用户数加权平均）、本科及以上占比、中高收入占比。输出单行多列格式。

3.6 添加维度数据分发节点

添加并行数据处理节点，重命名为数据分发。按 dimension_type 过滤，将数据分别分发给性别饼图、年龄柱状图、学历条形图、职业柱状图、收入柱状图、居住地类型饼图、省份地图等7个图表。

3.7 添加核心指标分发节点

添加并行数据处理节点，将单行多列的指标数据拆分为四个独立数值，分别发送给四个指标卡。

添加图片注释，不超过 140 字（可选）

图2-7 核心指标分发节点配置

4 最终效果

完成所有节点配置和连线后，保存并预览大屏。切换浏览器筛选器，观察所有图表是否同步更新数据。

添加图片注释，不超过 140 字（可选）

图2-8 最终蓝图连线效果图

---

第三部分：大屏交互设置

1 实验概述

本实验基于前两个实验完成的市场分析大屏和用户画像大屏，使用助睿Max的蓝图编辑器，配置两个大屏之间的切换交互，以及地图省份点击联动指标卡的功能。通过本实验，学生应掌握使用图层可见性控制实现大屏内容切换、使用按钮组件配置页面跳转或内容显示/隐藏、使用地图组件的交互事件实现省份下钻联动。

2 整体交互逻辑

2.1 大屏切换逻辑

市场分析和用户画像两个大屏实际上是在同一个大屏文件中，通过控制图层的可见性来实现切换。通过Tab列表组件实现：将市场分析的所有组件放入市场分析组，用户画像的所有组件放入用户画像组。Tab列表组件设置2列，每列设置不同的ID，点击时根据ID控制两个组的可见性。

2.2 地图省份点击联动逻辑

在用户画像大屏中，点击地图上的某个省份时，右侧的四个核心指标卡需要更新为该省份的数据。数据流为：用户点击省份，地图组件触发点击区域事件，蓝图接收省份名称，SQL请求查询该省份的核心指标，指标卡刷新数据。

添加图片注释，不超过 140 字（可选）

图3-1 完整蓝图连接示意图

3 实验步骤

3.1 配置大屏切换

添加Tab列表组件，调整大小位置与两个导航按钮重合。设置行数为1，列数为2，将背景颜色、选中背景色、悬浮背景色的透明度设置为0。设置每列的id分别为1、2，content为空。将市场分析组、用户画像组、Tab列表组件导出到蓝图编辑器。

添加图片注释，不超过 140 字（可选）

图3-2 Tab列表组件数据配置

在蓝图编辑器中，通过分支判断节点做当Tab点击时的id判断。在满足分支上，设置市场分析组显示、用户画像组隐藏；在不满足分支上，设置市场分析组隐藏、用户画像组显示。

添加图片注释，不超过 140 字（可选）

图3-3 分支判断节点配置

3.2 配置地图省份点击联动

地图组件点击后返回的省份名称是全称，但数据表中存储的是简称，因此需要先做一个名称映射。通过并行数据处理节点，使用特殊映射表和通用处理（去除末尾的省、自治区、市）将全称转换为简称，存入全局变量 window.globalProvinceName。

添加图片注释，不超过 140 字（可选）

图3-4 地图组件交互事件设置

添加省份核心指标查询SQL请求节点，根据当前选中的浏览器和点击的省份，从 user_profile_stats 表中查询四个核心指标。使用 UNION ALL 将四个指标输出为多行，每行包含 name 和 value。

添加省份核心指标分发并行数据处理节点，将SQL返回的四行数据按 name 字段过滤，将每个指标单独输出给对应的指标卡。

添加图片注释，不超过 140 字（可选）

图3-5 蓝图连线与数据流效果

3.3 地图热力层根据用户数渲染颜色

为了直观展示全国各省份的用户分布，需要在地图上用颜色深浅来表示每个省份的用户数。完成以下步骤：提取地理数据中的adcode和name建立映射表；查询所有省份的用户数；将查询结果中的省份名称与adcode映射表匹配，输出格式 {name, value, area_id}；导入热力值数据到地图的区域热力层子组件。

添加图片注释，不超过 140 字（可选）

图3-6 热力层配置截图

添加图片注释，不超过 140 字（可选）

图3-7 地图数据映射效果

4 最终效果

完成所有交互配置后，保存并预览大屏。测试Tab列表切换两个大屏是否正常，测试点击地图省份后右侧指标卡是否更新为该省份数据，测试地图热力层颜色是否正确渲染。

添加图片注释，不超过 140 字（可选）

图3-8 最终大屏效果