助睿实验6-3：2012年浏览器全景分析-大屏交互设置
目录
1 实验目的
本实验基于前两个实验完成的市场分析大屏和用户画像大屏，使用助睿Max的蓝图编辑器，配置两个大屏之间的切换交互，以及地图省份点击联动指标卡的功能。
通过本实验，学生应掌握：
- 使用图层可见性控制实现大屏内容切换
- 使用按钮组件配置页面跳转或内容显示/隐藏
- 使用地图组件的交互事件，实现省份下钻联动
- 配置指标卡组件根据地图点击动态更新数据
2 实验环境
- 实验平台：助睿在线实验平台 https://lab.guilian.cn/
本次实验使用助睿数智（Uniplore）作为一站式数据科学平台。该平台覆盖从数据接入、ETL处理、机器学习建模到可视化展示的全链路零代码功能，适用于数据分析教学与企业数据加工场景。
助睿数智官网为 https://www.uniplore.com//
- 可视化工具：助睿Max（数据大屏）
助睿Max 是一站式数据可视化平台，支持零代码拖拽搭建、多种图表组件、地图可视化、交互筛选等能力，适用于业务监控、用户洞察、营销战报等场景。
助睿Max核心优势：
- 组件丰富：覆盖所有常见图表和交互控件，满足企业级可视化需求
- 图层管理：支持图层堆叠、锁定、隐藏、排序，复杂布局轻松实现
- 低代码操作：拖拽式搭建 + 蓝图编辑器，无需复杂编程即可完成大屏布局与数据交互配置
- 工业级数据处理能力：支持海量数据实时接入与渲染，千万级数据点秒级响应，满足企业级生产环境要求
- 支持数字孪生：支持3D场景、GIS地图、实时物联数据接入，可快速构建数字孪生可视化系统
- 数据来源：团队私有数据库（MySQL）
本实验将重点使用蓝图编辑器完成数据接入与筛选器联动配置。
3 整体交互逻辑说明
3.1 大屏切换逻辑
市场分析和用户画像两个大屏实际上是在同一个大屏文件中，通过控制图层的可见性来实现切换。
实现原理：通过 tab列表组件实现。将市场分析的所有组件放入“市场分析组”，用户画像的所有组件放入“用户画像组”。tab列表组件设置2列（“市场分析”和“用户画像”），每列设置不同的ID（如 "id": 1 和 "id": 2），背景设为透明以融合导航栏样式。点击某列时，根据ID控制两个组的可见性：显示对应组，隐藏另一组。
助睿Max图层管理优势：通过“图层”面板可以轻松控制组件的显示/隐藏，无需编写代码。配合蓝图编辑器，可以实现按钮与图层可见性的联动。
3.2 地图省份点击联动逻辑
在用户画像大屏中，点击地图上的某个省份时，右侧的四个核心指标卡（总用户数、平均年龄、本科及以上占比、中高收入占比）需要更新为该省份的数据。
用户点击省份 → 地图组件触发“点击区域”事件 → 蓝图接收省份名称 → SQL请求查询该省份的核心指标 → 指标卡刷新数据
4 整体蓝图逻辑说明
4.1 什么是蓝图编辑器？
蓝图编辑器是助睿Max中用于配置数据流和交互逻辑的可视化编程工具。它采用“节点-连线”的方式，帮助您自由管理可视化应用中多个组件之间的交互关系。
蓝图编辑器的优势：
- 蓝图编辑器可以保证交互和数据的实时性和同步性。
- 蓝图编辑器支持数据请求合并和数据分发的功能。
- 蓝图编辑器可模块化拆分，专注单个的交互链路，不需要考虑代码的整理和规范，只需要专注于业务规则和交互需求即可。
4.2 核心概念
|
概念 |
说明 |
|
数据源 |
数据库连接配置，定义数据从哪里来 |
|
查询 |
SQL语句，定义取什么数据 |
|
触发器 |
触发数据加载的事件（如页面加载、组件点击、定时刷新等） |
|
动作 |
触发器执行后的操作（如查询数据、刷新图表） |
|
变量 |
用于在查询之间传递参数（如筛选器选中的浏览器名称） |
4.3 核心流程（大屏切换）
- 用户点击tab列表中的“市场分析”列 → 触发点击事件，输出ID 1
- 蓝图接收ID → 设置“市场分析组”可见，设置“用户画像组”隐藏
- 用户点击tab列表中的“用户画像”列 → 触发点击事件，输出ID 2
- 蓝图接收ID → 设置“市场分析组”隐藏，设置“用户画像组”可见
4.4 核心流程（地图点击联动）
- 用户点击地图上的省份区域 → 触发“点击区域”事件
- 地图组件 → 输出被点击的省份名称
- 省份参数接收节点 → 接收省份名称，存储到全局变量
- 省份核心指标查询节点 → 读取省份名称和当前浏览器，查询该省份的核心指标
- 省份核心指标分发节点 → 将查询结果拆分为4个独立数值
- 四个核心指标卡 → 接收新数据并刷新显示
4.5 各节点职责
|
节点 |
职责 |
|
tab列表组件 |
提供“市场分析”和“用户画像”两个选项，捕获用户点击，输出对应的ID |
|
基础平面地图 |
展示省份分布，捕获用户点击的省份区域 |
|
省份参数接收 |
接收省份名称，存储到全局变量 |
|
省份核心指标查询 |
根据省份和浏览器，查询该省份的核心指标 |
|
省份核心指标分发 |
将查询结果拆分为4个独立数值 |
|
四个指标卡 |
显示该省份的用户画像数据 |
4.5 完整蓝图连接示意图
image
助睿Max蓝图编辑器亮点：通过拖拽节点、连线即可完成复杂的交互逻辑，无需编写复杂代码。并行数据处理节点支持一个数据源同时分发到多个图表，实现高效的数据复用。
5 实验步骤
5.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）在“判断选项卡”的 不满足 分支上，添加两个“设置图层可见性”动作：
- 目标图层：市场分析组 → 隐藏
- 目标图层：用户画像组 → 显示
助睿Max的条件分支节点允许根据表达式的结果执行不同的动作，非常适合处理这类二选一的交互场景。配合“设置图层可见性”动作，无需代码即可实现复杂的界面切换。
5.2 配置地图省份点击联动
5.2.1 设计思路与原理
在用户画像大屏中，我们希望通过点击地图上的任意省份，右侧的核心指标卡（总用户数、平均年龄、本科及以上占比、中高收入占比）能立即切换为该省份的数据。这是一种典型的地理下钻分析，也是数据大屏的核心交互之一。
助睿Max 的蓝图编辑器让这种交互无需编写后端代码，只需通过“事件-动作”的连线即可实现。整个数据流如下：
地图点击（事件） → 提取省份名称（并行数据处理） → 动态SQL查询（SQL请求） → 数据分发（并行数据处理） → 四个指标卡刷新
核心知识点：
- 事件驱动：地图组件的“点击区域时”事件是起点，它会输出被点击区域的地理信息（如省份名称），前提是需要开启组件的交互事件。
- 变量传递：通过 window.globalProvinceName 全局变量，可以将省份名称在不同节点间共享，避免重复连线。
- 动态SQL：SQL请求节点可以接收外部变量，实现“根据用户点击的省份查询不同数据”。
- 并行数据处理：将一次查询返回的多行数据（每个指标一行）拆分、过滤，分别发送给不同的目标组件。
传统开发中，实现此类下钻功能需要编写前端 JavaScript 和后端 API，而助睿Max 通过蓝图编辑器将数据流可视化，拖拽节点即可完成，开发效率提升数倍。
5.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'的条件即可
5.2.3 蓝图连线与数据流
- 区域热力层的“点击区域时”事件 → 连接到 “提取地区名称” 节点。
- “提取地区名称” 的“执行成功”输出 → 连接到 “省份核心指标查询” 节点的“执行SQL”输入。
- “省份核心指标查询” 的“执行成功”输出 → 连接到 “省份核心指标分发” 节点的输入。
- “省份核心指标分发” 的四个输出分支 → 分别连接到四个核心指标卡的“导入数据接口。
5.3 地图热力层根据用户数渲染颜色
5.3.1 设计思路与原理
为了直观展示全国各省份的用户分布，我们需要在地图上用颜色深浅来表示每个省份的用户数（用户数越多，颜色越深）。这是数据大屏中常见的热力图效果。
助睿Max 的地图组件支持通过“区域热力层”子组件接收自定义数据。数据格式要求为 { name, value, area_id }，其中 name 为省份名称，value 为用户数，area_id 为行政区划代码（adcode）。因此，我们需要完成以下步骤：
- 提取地理数据中的 adcode 和 name：地图组件内部包含全国各省份的 GeoJSON 边界数据，其中包含 adcode（行政区划代码）和标准名称。我们需要提取并建立一个“省份名称 → adcode”的映射表，存储在全局变量中。
- 查询所有省份的用户数：根据当前选中的浏览器，从 user_profile_stats 表中统计每个省份的用户总数。
- 数据映射与格式化：将查询结果中的省份名称与 adcode 映射表匹配，输出格式 { name, value, area_id }。
- 导入热力值数据：将格式化后的数据导入地图的“区域热力层”子组件，即可自动渲染颜色深浅。
传统开发中，实现地图热力层需要前端加载 GeoJSON、手动计算颜色映射、绑定事件等。而助睿Max 只需配置子组件的数据接口，平台自动完成渲染，极大降低了地理可视化的门槛。
5.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的地图组件及其子组件的事件和动作非常丰富。通过“导入热力值数据接口”动态更新数据，可以实现浏览器切换时热力图自动刷新。
5.3.3 蓝图连线与数据流
完整的蓝图数据流如下（热力渲染部分独立于点击联动）：
5.4 预览与发布
完成上述所有配置后，大屏应具备三个核心交互功能：
- 大屏切换：点击 tab 列表的“市场分析”/“用户画像”，正确显示对应大屏内容。
- 地图热力层：地图上各省份颜色深浅反映该省份在当前浏览器下的用户数（用户数越多颜色越深）。
- 省份点击联动：点击地图上的省份，右侧四个核心指标卡自动更新为该省份的数据。
保存预览，对以上功能进行验证，确保三个核心交互功能均正常工作。
最后点击“发布”按钮，在弹出的发布对话框中打开发布分享开关，复制分享链接，打开浏览器，将复制的链接粘贴到地址栏中，即可在线观看
一站式 AI 云服务平台
更多推荐
4
0- 0
已为社区贡献2条内容
所有评论(0)