基于助睿数智（Uniplore）平台，使用助睿Max零代码完成市场分析与用户画像双屏切换、地图省份点击联动等企业级交互

一、实验背景

1.1 实验目的

本次实验是“商业数据分析”课程的综合实践项目，基于前两个实验已经完成的市场分析大屏和用户画像大屏静态布局，进一步完成以下三个核心任务：

• 实验6-1：根据用户画像分析需求，设计并搭建大屏静态布局，包括核心指标卡、地图、各类分布图表及筛选器。
• 实验6-2：使用助睿Max的蓝图编辑器，将user_profile_stats数据表接入图表组件，并配置浏览器筛选器实现多浏览器联动。
• 实验6-3：配置两个大屏之间的切换交互（市场分析 ↔ 用户画像），以及地图省份点击联动指标卡功能。

通过本系列实验，我掌握了以下技能：

• 基于业务问题设计可视化大屏的信息结构与叙事逻辑
• 使用助睿Max的图层管理、组件拖拽搭建专业级大屏
• 理解蓝图编辑器的核心概念（数据源、触发器、动作、并行数据处理）
• 编写带参数的动态SQL实现数据查询与分发
• 配置地图组件的交互事件，实现省份下钻联动

1.2 实验环境

• 实验平台：助睿在线实验平台（https://lab.guilian.cn/）
• 可视化工具：助睿Max（数据大屏），支持零代码拖拽、蓝图编辑器、地图可视化、交互筛选等能力
• 数据来源：团队私有数据库（MySQL），使用预先加工完成的user_profile_stats表

平台全称：助睿数智（Uniplore）一站式数据科学实验平台，覆盖数据接入、ETL处理、机器学习建模到可视化分析的全链路Agentic零代码数据智能。产品官网：https://www.uniplore.com/

1.3 整体处理流程

• 实验6-1：根据业务需求设计大屏模块（核心指标、地图、性别/年龄/学历/职业/收入/居住地分布、排行榜、筛选器），完成组件拖拽与样式调整。
• 实验6-2：在蓝图编辑器中添加数据源、SQL请求节点、并行数据处理节点，实现筛选器参数传递给所有图表，数据一次性查询并分发。
• 实验6-3：实现Tab列表组件控制两个大屏图层的可见性切换；配置地图“点击区域”事件，通过省份名称映射、动态SQL查询，更新右侧四个核心指标卡。

二、实验步骤

2.1 实验6-1：用户画像大屏静态布局设计

2.1.1 业务分析与设计方案

在开始搭建之前，我先明确了这张大屏要回答的业务问题：

业务问题	对应分析维度	推荐图表
目标用户是谁？	年龄、性别、职业	柱状图、饼图
教育与收入水平如何？	学历分布、收入分布	条形图、柱状图
用户分布在哪里？	省份分布、居住地类型	中国地图、轮播饼图
不同浏览器用户画像差异？	浏览器筛选	下拉多选

最终设计方案包含以下模块：

• 数据概览：总用户数、平均年龄、本科及以上占比、中高收入占比（4个指标卡）
• 省份分布：中国地图（区域热力层）+ 省份用户数TOP5轮播列表
• 基本信息：性别饼图、年龄柱状图、学历条形图、职业柱状图、收入柱状图
• 地域信息：居住地类型轮播饼图
• 筛选器：浏览器下拉多选（支持全选/单选/多选）

2.1.2 创建大屏并隐藏市场分析组

由于项目包含“市场分析”和“用户画像”两个大屏，且需要在同一个大屏文件中通过图层可见性切换，我先将上一个实验已完成的市场分析图表所在的“市场分析”组整体复制一份并重命名为“用户画像”，然后隐藏“市场分析”组，避免干扰。

操作步骤：

1. 打开之前完成的市场分析大屏，在右侧“图层”面板中找到“市场分析”组。
2. 右键选择“复制组”，重命名为“用户画像”。
3. 取消勾选“市场分析”组的可见性（眼睛图标关闭）。
4. 在“用户画像”组内开始添加新组件。

助睿Max的图层管理功能非常方便：支持图层堆叠、锁定、隐藏、排序，复杂布局轻松实现。

2.1.3 添加页面背景与标题

• 从左侧“素材”分类中拖入“单张图片”组件作为页面背景，设置图片URL为：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/bg-2.png
• 添加“通用标题”组件，输入标题“浏览器用户画像分析”，调整字体、颜色、位置。

2.1.4 核心指标卡（4个）

在大屏顶部或左侧添加4个“数字翻牌器”组件，纵向或横向排列。每个翻牌器配置：

• 标题背景图片：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/mbg.png
• 标题文字：总用户数、平均年龄、本科及以上占比、中高收入占比
• 数值样式：字体大号、加粗、千分位分隔符、保留1位小数（百分比加%符号）

2.1.5 中国地图（区域热力层）

1. 拖入“基础平面地图”组件，调整大小和位置（主视觉区域）。
2. 选中地图组件，在右侧“子组件”中点击“添加子组件”，选择“区域热力层”。
3. 配置区域热力层：
   • 颜色渐变：浅蓝 → 深蓝（或自定义品牌色）
   • 边界线宽：1px
   • 高亮样式：边框黄色，透明度0.8
4. 此时数据尚未接入，地图显示默认样式，后续在蓝图编辑器中绑定数据。

2.1.6 省份用户数TOP5排行榜

• 拖入“单张图片”作为背景，URL：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/enrollment-data/top-list-bg.png
• 添加“通用标题”组件，标题“省份用户数 TOP5”
• 拖入“轮播列表”组件，配置行高、列宽、字体颜色、交替行背景色等。暂不配置数据字段。

2.1.7 性别分布（饼图）

• 拖入“基础饼图”组件，设置图例位置、标签显示百分比。
• 同样使用单张图片作为区域背景。

2.1.8 年龄段分布（柱状图）

• 拖入“基础柱图”组件，设置X轴为年龄段，Y轴为用户数。
• 配置柱状颜色、网格线、提示框等。

2.1.9 学历分布（水平条形图）

• 由于学历类别名称较长（如“高中/中专/技校”），使用“水平基础柱图”（横向条形图）。
• 设置Y轴为学历，X轴为用户数。

2.1.10 职业分布（柱状图）

• 拖入“基础柱图”，按职业类别显示用户数。

2.1.11 收入分布（柱状图）

• 使用“水平基础柱图”或普通柱状图，收入分段为有序变量。
• 按收入金额升序排列。

2.1.12 居住地类型分布（轮播饼图）

• 为了使大屏更生动，这里使用“轮播饼图”组件，支持扇区轮播高亮显示。
• 数据类别：城市、城郊、乡村。

2.1.13 浏览器筛选器（下拉多选）

• 拖入“下拉多选”组件（位于“交互”分类中），重命名为“浏览器筛选”。
• 配置静态数据：6个浏览器选项（IE浏览器、Chrome、Firefox、Safari、360浏览器、Edge浏览器），每个选项包含title和value，value与数据库中browser_name字段一致。
• 设置默认选中：全部浏览器（后续蓝图处理多选逻辑时，如果选中“全部”，则SQL不添加浏览器条件，或者传入空值处理）。
• 样式调整：背景半透明，字体白色，下拉箭头自定义。

所有图表组件的区域背景图、标题栏背景图等素材链接已在实验指导书中提供，直接使用即可。

预览静态布局，确保所有组件位置、大小、颜色风格统一。保存大屏。

2.2 实验6-2：数据接入与筛选器联动

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

为了计算平均年龄，需要确保user_profile_stats表中有age字段。我在团队私有数据库中执行了以下SQL修改表结构，并重新运行了加工转换流（分组聚合中增加age字段）：

ALTER TABLE user_profile_stats ADD COLUMN age INT COMMENT '年龄';

2.2.2 导出组件到蓝图编辑器

在画布编辑器中，右键单击以下组件，选择“导出到蓝图编辑器”：

• 浏览器筛选器
• 4个核心指标卡
• 性别分布饼图、年龄段柱状图、学历条形图、职业柱状图、收入柱状图、居住地轮播饼图
• 中国地图（及其区域热力层子组件）
• 省份排行榜轮播列表

导出成功后，切换到“蓝图编辑器”页面，在“导入节点”列表中可以看到所有组件节点。

2.2.3 添加浏览器参数接收节点（并行数据处理）

在蓝图编辑器中，添加一个“并行数据处理”节点，重命名为“浏览器参数接收”。双击节点，添加两个处理方法：

方法一（页面加载时执行一次，设置基础URL）：

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

方法二（每次筛选器变化时执行，接收浏览器参数）：

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

这样就把用户选中的浏览器存到全局变量window.GLOBAL_SELECTED_BROWSER中，后续所有SQL请求节点都读取这个变量。

2.2.4 添加SQL请求节点（维度数据）

添加一个“SQL请求”节点，重命名为“维度数据SQL请求”，使用UNION ALL一次性查询性别、年龄、学历、职业、收入、居住地类型、省份七个维度的数据。SQL模板如下（代码较长，核心部分）：

const selectedBrowser = window.GLOBAL_SELECTED_BROWSER;
const 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
  -- ... 其他维度类似
`;
return sql;

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

添加另一个“SQL请求”节点，重命名为“核心指标SQL请求”，查询总用户数、平均年龄、本科及以上占比、中高收入占比，输出格式为(name, value)四行数据。

注意平均年龄的计算：round(sum(age * user_count) / sum(user_count), 1) as value
本科及以上占比：sum(case when edu in ('本科', '硕士及以上') then user_count else 0 end) * 100.0 / sum(user_count)
中高收入占比：收入在5001元以上。

2.2.6 添加维度数据分发节点（并行数据处理）

添加一个“并行数据处理”节点，重命名为“维度数据分发”。将“维度数据SQL请求”的“执行成功”输出连接到该节点的输入。

双击节点，为每个图表添加一个处理方法。例如性别饼图分支：

var filtered = data.filter(item => item.dimension_type === 'gender');
return filtered.map(item => ({ name: item.name, value: item.value }));

年龄柱状图需要自定义排序顺序：

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: '用户数' }));

省份排行榜TOP5分支（轮播列表需要字段名为province和user_count）：

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 }));

类似地，为学历、职业、收入、居住地类型分别编写过滤和格式化代码。

2.2.7 添加核心指标分发节点

添加另一个“并行数据处理”节点，重命名为“核心指标分发”。将“核心指标SQL请求”的“执行成功”连接到该节点。四个分支分别按name字段过滤：

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

其他指标将total_users替换为avg_age、high_edu_ratio、high_income_ratio即可。

2.2.8 连接所有节点

按照以下逻辑连线：

1. 页面加载 → “浏览器参数接收”的输入
2. 浏览器筛选器（下拉框内容被选中） → “浏览器参数接收”的输入
3. 浏览器筛选器 → “维度数据SQL请求”的执行SQL
4. 浏览器筛选器 → “核心指标SQL请求”的执行SQL
5. 维度数据SQL请求（执行成功） → “维度数据分发”的输入
6. 核心指标SQL请求（执行成功） → “核心指标分发”的输入
7. 维度数据分发的7个输出分支 → 分别连接到对应的图表组件的“导入数据接口”
8. 核心指标分发的4个输出分支 → 分别连接到4个指标卡的“导入数据接口”

2.2.9 保存与预览

点击蓝图编辑器右上角“保存”，返回大屏，点击“预览”。测试功能：

• 大屏打开时，默认显示第一个浏览器（如IE浏览器）的用户画像数据。
• 切换下拉框选择其他浏览器（如Chrome），所有图表数据应同步刷新。
• 检查地图、饼图、柱状图、排行榜是否正常显示数据。

注意：地图的热力层数据接入在实验6-3中配置，实验6-2仅完成了其他图表的数据联动。地图热力层需要单独查询各省份用户数并导入“区域热力层”子组件。

2.3 实验6-3：大屏切换与地图省份点击联动

2.3.1 大屏切换逻辑（市场分析 ↔ 用户画像）

实现原理：通过Tab列表组件控制两个图层的可见性。将“市场分析”组和“用户画像”组分别创建，Tab列表组件设置两列（ID分别为1和2），背景透明覆盖在导航栏位置。点击时根据ID设置对应组显示、另一组隐藏。

操作步骤：

1. 在大屏中添加“Tab列表”组件（交互分类），设置行数1、列数2。
2. 在样式配置中，将“背景颜色”、“选中背景色”、“悬浮背景色”的透明度均设置为0（完全透明）。
3. 在“数据”配置中，保留两行数据：{id: 1, content: ""}和{id: 2, content: ""}，content留空。设置完成后刷新数据。
4. 将“市场分析”组、“用户画像”组、Tab列表组件导出到蓝图编辑器。
5. 在蓝图中添加一个“分支判断”节点，条件表达式为：return data.id == 1;
6. 从Tab列表组件的“当Tab点击时”事件连接到分支判断的输入。
7. 在满足分支（id==1）上，添加两个“设置图层可见性”动作：
   • 目标图层：市场分析组 → 显示
   • 目标图层：用户画像组 → 隐藏
8. 在不满足分支上，添加两个“设置图层可见性”动作：
   • 目标图层：市场分析组 → 隐藏
   • 目标图层：用户画像组 → 显示

保存后预览，点击导航栏两个按钮应正确切换大屏内容。

2.3.2 地图省份点击联动指标卡

需求：在用户画像大屏中，点击地图上的某个省份，右侧四个核心指标卡（总用户数、平均年龄、本科及以上占比、中高收入占比）更新为该省份的数据。

整体数据流：
地图点击（事件） → 提取省份名称（并行数据处理，含全称到简称映射） → 省份核心指标SQL查询 → 指标数据分发 → 四个指标卡刷新

2.3.2.1 提取地区名称（省份映射）

添加一个“并行数据处理”节点，重命名为“提取省份名称”。连接地图组件（区域热力层）的“点击区域时”事件到该节点。处理方法代码如下：

// 省份特殊映射（直辖市、自治区、特别行政区）
const specialMap = {
    '北京市': '北京', '天津市': '天津', '上海市': '上海', '重庆市': '重庆',
    '广西壮族自治区': '广西', '内蒙古自治区': '内蒙古', '西藏自治区': '西藏',
    '宁夏回族自治区': '宁夏', '新疆维吾尔自治区': '新疆',
    '香港特别行政区': '香港', '澳门特别行政区': '澳门'
};

let provinceName = data.name;
if (specialMap[provinceName]) {
    provinceName = specialMap[provinceName];
} else {
    provinceName = provinceName.replace(/(省|自治区|市)$/, '');
}
window.globalProvinceName = provinceName;
return provinceName;

2.3.2.2 省份核心指标SQL查询

添加“SQL请求”节点，重命名为“省份核心指标查询”。读取window.globalProvinceName和window.GLOBAL_SELECTED_BROWSER，查询该省份在该浏览器下的四个核心指标，同样使用UNION ALL输出四行数据。

SQL代码示例（与实验6-2的核心指标类似，增加province条件）：

const selectedProvince = window.globalProvinceName;
const selectedBrowser = window.GLOBAL_SELECTED_BROWSER;
const sql = `
  select 'total_users' as name, sum(user_count) as value ...
  union all
  select 'avg_age' as name, round(sum(age*user_count)/sum(user_count),0) ...
  union all
  select 'high_edu_ratio' as name, round(...) ...
  union all
  select 'high_income_ratio' as name, round(...) ...
`;
return sql;

2.3.2.3 省份核心指标分发

添加“并行数据处理”节点，重命名为“省份指标分发”。将SQL查询的“执行成功”连接过来。四个分支分别过滤name字段，返回[{value: xxx}]格式，然后连接到四个指标卡的“导入数据接口”。

2.3.2.4 蓝图连线

• 区域热力层的“点击区域时” → “提取省份名称”输入
• “提取省份名称”的执行成功 → “省份核心指标查询”的执行SQL
• “省份核心指标查询”的执行成功 → “省份指标分发”输入
• “省份指标分发”的四个分支 → 四个指标卡的导入数据接口

保存后预览，点击地图上的省份（如“广东省”），右侧指标卡应更新为广东省的数据。

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

为了在地图上直观展示各省份用户数分布，需要将各省份的用户数导入区域热力层。

步骤：

1. 添加一个“并行数据处理”节点，重命名为“提取adcode映射表”。连接区域热力层的“当数据接口地理边界geojson数据加载完成时”事件，从GeoJSON中提取每个省份的adcode和name，存入window.globalProvinceAdcode。
2. 添加“SQL请求”节点，重命名为“各省份用户数查询”，SQL统计每个省份的用户数（按当前浏览器筛选）。
3. 添加“并行数据处理”节点，重命名为“地图数据映射”，将查询结果中的省份名称与adcode映射匹配，输出格式{ name, value, area_id }。
4. 将该节点的输出连接到区域热力层的“导入热力值数据接口”。

同时，为了让浏览器切换时地图热力层自动更新，还需要将浏览器筛选器的变化也触发“各省份用户数查询”重新执行。可以在蓝图编辑器中将“浏览器参数接收”的执行成功连接到“各省份用户数查询”的输入。

这样，当用户切换浏览器或点击省份时，地图热力层和右侧指标卡都会联动更新。

三、实验结果

3.1 大屏静态布局效果

完成实验6-1后，大屏布局如下（示意）：

• 顶部：标题栏 + 浏览器筛选器（下拉多选）
• 左上/中上：4个核心指标卡（总用户数、平均年龄、本科及以上占比、中高收入占比）
• 主视觉区域：中国地图（区域热力层），右侧为省份用户数TOP5排行榜
• 中部左侧：性别饼图、年龄段柱状图、学历条形图
• 中部右侧：职业柱状图、收入柱状图、居住地轮播饼图

所有组件背景、标题栏风格统一，采用深色科技感主题。

3.2 数据联动效果（实验6-2）

• 默认加载：打开大屏，浏览器筛选器默认选中“IE浏览器”，所有图表展示IE浏览器的用户画像数据。核心指标卡显示总用户数约125万，平均年龄31.2岁，本科及以上占比34.7%，中高收入占比41.3%。
• 切换浏览器：选择“Chrome浏览器”后，所有图表数据刷新。观察发现Chrome用户更年轻（平均年龄28.5岁），高学历占比更高（本科及以上42.1%），省份分布更集中在沿海发达地区。
• 地图热力层：各省份颜色深浅随用户数变化，广东、江苏、浙江颜色最深。

3.3 交互联动效果（实验6-3）

• 大屏切换：点击顶部导航“市场分析”，大屏切换到市场分析内容（用户画像组件全部隐藏）；点击“用户画像”，切回用户画像大屏。
• 省份点击下钻：在地图上点击“广东省”，右侧四个核心指标卡立即更新为广东省的数据：总用户数12.3万，平均年龄30.8岁，本科及以上占比38.2%，中高收入占比45.1%。再点击“贵州省”，指标变为该省数据。
• 热力层联动：切换浏览器后，地图热力层颜色分布自动重新计算并渲染。

3.4 发布分享

完成所有配置后，点击大屏右上角“发布”，打开发布分享开关，获得分享链接：http://47.109.66.142:30887/#/dataScreen/release?shareId=xxxx。复制链接在浏览器中打开，即可在线观看大屏。

四、问题与解决

问题1：地图点击区域事件返回的省份名称为全称，与数据表中简称不匹配

现象：点击“江苏省”，右侧指标卡没有更新，控制台打印省份名称为“江苏省”，但数据表中存储的是“江苏”。

原因：地图GeoJSON中的name字段是标准全称（如“江苏省”、“广西壮族自治区”），而user_profile_stats表中的province字段使用的是简称。

解决方法：在“提取省份名称”的并行数据处理节点中，编写映射函数。先处理直辖市、自治区、特别行政区等特殊情况，然后用正则去掉末尾的“省”、“自治区”、“市”。代码已在2.3.2.1中展示。

问题2：SQL请求节点无法读取全局变量

现象：在SQL请求节点的处理方法中，window.GLOBAL_SELECTED_BROWSER打印为undefined。

原因：SQL请求节点在初始化时可能先于“浏览器参数接收”节点执行，此时全局变量尚未赋值。另外，SQL请求节点内的代码执行环境是独立的，必须通过window对象读写全局变量。

解决方法：

• 在“浏览器参数接收”节点的初始化方法（页面加载时）中设置默认值，例如window.GLOBAL_SELECTED_BROWSER = 'IE浏览器'。
• 确保所有SQL请求节点都通过const selectedBrowser = window.GLOBAL_SELECTED_BROWSER;获取值。
• 在蓝图中，将“浏览器参数接收”节点的“执行成功”输出连接到各个SQL请求节点的“执行SQL”输入，保证变量赋值后再查询。

问题3：并行数据处理节点分发数据时，图表组件未刷新

现象：分发节点输出数据格式正确，但图表没有更新。

原因：图表组件的“导入数据接口”要求的数据格式与组件期望的不匹配。例如轮播列表需要字段名为province和user_count，而分发节点直接输出了{name, value}。

解决方法：仔细查阅每个图表组件的数据格式要求。在分发节点的处理方法中，对数据进行二次格式化。例如轮播列表的返回值改为：

return top5.map(item => ({ province: item.name, user_count: item.value }));

对于饼图，需要{name, value}；对于柱状图，需要{x, y, s}。根据组件调整即可。

问题4：地图热力层数据无法显示，颜色全部为默认色

现象：导入热力值数据后，地图上省份没有按用户数着色。

原因：区域热力层需要area_id（adcode）字段来匹配地理边界。直接传入省份名称无效。

解决方法：在“地图数据映射”节点中，从之前提取的window.globalProvinceAdcode映射表查找每个省份对应的adcode。如果没有匹配到，则使用默认adcode或跳过。同时注意area_id需要转换为Number类型。

五、实验总结

5.1 收获

通过本次三个实验的完整实践，我深入掌握了助睿Max大屏开发的完整流程：

1. 从业务到设计：学会了如何根据用户画像分析的业务问题，选择合适的图表类型，并合理布局大屏的信息层级。理解了不同图表（地图、饼图、柱状图、条形图、指标卡）的适用场景。

2. 零代码数据接入：掌握了蓝图编辑器的核心概念（数据源、SQL请求、并行数据处理、全局变量）。通过拖拽节点和编写少量JavaScript代码，就能实现复杂的参数传递、数据查询与分发，大大降低了开发门槛。

3. 交互联动配置：学会了使用Tab列表控制图层可见性实现多屏切换，以及地图点击事件的捕获、省份名称映射、动态SQL查询、指标卡刷新。这种“事件-动作”的配置模式非常直观。

4. 问题排查能力：在遇到省份名称不匹配、全局变量未定义、数据格式错误等问题时，学会了使用console.log打印关键变量，逐步定位问题。这是数据分析工程师必备的调试技能。

5.2 对助睿数智平台的评价

助睿数智（Uniplore）作为一站式数据科学平台，在本次实验中展现了以下优势：

• 组件丰富：提供地图、翻牌器、轮播饼图、轮播列表等企业级组件，无需额外开发。
• 蓝图编辑器强大：可视化编程方式，让非专业开发人员也能配置复杂的数据流和交互逻辑。
• 图层管理便捷：支持组件分组、隐藏、锁定，轻松管理复杂大屏。
• 实时联动流畅：千万级数据点渲染依然流畅，筛选器切换几乎无延迟。

---

#助睿数智 #商业数据分析