助睿实验作业6-3：2012年浏览器全景分析-大屏交互设置

目录

一、实验目的

二、实验环境

三、整体交互逻辑说明

3.1 大屏切换逻辑

3.2 地图省份点击联动逻辑

四、整体蓝图逻辑说明

4.1 什么是蓝图编辑器？

4.2 核心概念

4.3 核心流程（大屏切换）

4.4 核心流程（地图点击联动）

4.5 各节点职责

4.6 完整蓝图连接示意图

五、实验步骤

5.1 配置大屏切换

5.2 配置地图省份点击联动

5.2.1 设计思路与原理

5.2.2 核心组件配置

5.2.3 蓝图连线与数据流

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

5.3.1 设计思路与原理

5.3.2 核心组件配置

5.3.3 蓝图连线与数据流

5.4 预览与发布

六、问题与解决

七、实验总结

一、实验目的

本实验依托前序实验已完成的市场分析大屏、用户画像大屏成果，借助助睿Max的蓝图编辑器，完成两大核心交互配置，分别是双大屏之间的切换交互、地图省份点击联动指标卡的功能配置。

通过本次实验，学生可熟练掌握多项核心实操技能，具体如下：

1. 运用图层可见性控制方法实现大屏内容切换效果；

2. 依托按钮组件完成页面跳转与内容显示/隐藏的配置操作；

3. 利用地图组件的交互事件，实现省份下钻联动功能；

4. 完成指标卡组件配置，使其可根据地图点击操作动态更新展示数据。

二、实验环境

实验平台：助睿在线实验平台 https://lab.guilian.cn/

本次实验采用助睿数智（Uniplore）一站式数据科学平台，该平台具备全链路零代码能力，覆盖数据接入、ETL处理、机器学习建模、可视化展示全流程，既适配数据分析教学场景，也可满足企业数据加工的业务需求。

助睿数智官方网址：https://www.uniplore.com//

可视化工具：助睿Max（数据大屏）

助睿Max是一站式数据可视化平台，支持零代码拖拽搭建、全品类图表组件适配、地图可视化、交互筛选等核心能力，广泛适用于业务监控、用户洞察、营销战报等多种业务场景。

助睿Max核心优势如下：

1. 组件丰富：涵盖各类主流图表与交互控件，全面适配企业级可视化搭建需求；

2. 图层管理：支持图层堆叠、锁定、隐藏、排序操作，可轻松搭建复杂大屏布局；

3. 低代码操作：采用拖拽式搭建+蓝图编辑器的组合模式，无需复杂编程，即可快速完成大屏布局与数据交互配置；

4. 工业级数据处理能力：支持海量数据实时接入与渲染，千万级数据点可实现秒级响应，适配企业级生产环境使用标准；

5. 支持数字孪生：兼容3D场景、GIS地图、实时物联数据接入，可快速搭建数字孪生可视化系统。

数据来源：团队私有数据库（MySQL）

本次实验核心依托蓝图编辑器，完成数据接入与筛选器联动的全部配置工作。

三、整体交互逻辑说明

3.1 大屏切换逻辑

本次实验的市场分析大屏与用户画像大屏，整合于同一个大屏文件中，核心通过图层可见性控制实现两大大屏的切换效果。

实现原理：核心依托tab列表组件完成配置。将市场分析对应的全部组件归集为“市场分析组”，用户画像对应的全部组件归集为“用户画像组”。将tab列表组件设置为两列选项，分别为“市场分析”和“用户画像”，并为两列配置独立ID，即“id：1”和“id：2”，同时将组件背景设置为透明，适配导航栏整体样式。用户点击对应选项列时，系统将根据匹配的ID，精准控制两个组件组的图层可见性，展示对应功能组内容、隐藏另一功能组内容。

助睿Max图层管理核心优势：可通过“图层”面板可视化管控组件显示/隐藏状态，无需编写代码，搭配蓝图编辑器可快速实现按钮与图层可见性的联动交互。

3.2 地图省份点击联动逻辑

在用户画像大屏场景中，用户点击地图任意省份区域后，页面右侧总用户数、平均年龄、本科及以上占比、中高收入占比四个核心指标卡，将同步刷新并展示对应省份的专属数据。

完整交互链路：用户点击省份 → 地图组件触发“点击区域”事件 → 蓝图接收省份名称参数 → 执行SQL请求查询对应省份核心指标数据 → 指标卡组件动态刷新展示最新数据。

四、整体蓝图逻辑说明

4.1 什么是蓝图编辑器？

蓝图编辑器是助睿Max专属的可视化编程工具，主要用于配置平台数据流与组件交互逻辑。工具采用“节点-连线”的可视化操作模式，支持用户自主管控可视化应用内各组件的联动交互关系。

蓝图编辑器核心优势：

1. 保障组件交互、数据更新的实时性与同步性；

2. 支持数据请求合并与数据分发能力，优化数据传输效率；

3. 支持模块化拆分，可独立调试单一交互链路，无需关注代码规范与整理，仅聚焦业务规则与交互需求即可完成配置。

4.2 核心概念

4.3 核心流程（大屏切换）

1. 用户点击tab列表组件中“市场分析”选项列，触发组件点击事件，输出对应ID 1；

2. 蓝图编辑器接收ID参数，执行图层控制动作，展示“市场分析组”、隐藏“用户画像组”；

3. 用户点击tab列表组件中“用户画像”选项列，触发组件点击事件，输出对应ID 2；

4. 蓝图编辑器接收ID参数，执行图层控制动作，隐藏“市场分析组”、展示“用户画像组”。

4.4 核心流程（地图点击联动）

1. 用户点击基础平面地图的省份区域，触发地图“点击区域”事件；

2. 地图组件自动输出用户点击的省份名称参数；

3. 省份参数接收节点获取省份名称，并将其存储为全局变量；

4. 省份核心指标查询节点读取全局变量中的省份名称、当前浏览器参数，调取对应省份的核心指标数据；

5. 省份核心指标分发节点将查询到的整合数据，拆分出4组独立核心数值；

6. 四个核心指标卡组件分别接收对应数值，自动刷新完成数据更新展示。

4.5 各节点职责

4.6 完整蓝图连接示意图

助睿Max蓝图编辑器亮点：通过拖拽节点、连线即可完成复杂的交互逻辑，无需编写复杂代码。并行数据处理节点支持一个数据源同时分发到多个图表，实现高效的数据复用。

五、实验步骤

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 蓝图连线与数据流

1. 区域热力层的“点击区域时”事件 → 连接到 “提取地区名称” 节点。

2. “提取地区名称” 的“执行成功”输出 → 连接到 “省份核心指标查询” 节点的“执行SQL”输入。

3. “省份核心指标查询” 的“执行成功”输出 → 连接到 “省份核心指标分发” 节点的输入。

4. “省份核心指标分发” 的四个输出分支 → 分别连接到四个核心指标卡的“导入数据接口”。

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

5.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 只需配置子组件的数据接口，平台自动完成渲染，极大降低了地理可视化的门槛。

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 value
FROM labs.user_profile_stats
WHERE browser_name = '${selectedBrowser}'
AND province IS NOT NULL
AND province != ''
GROUP BY province
ORDER 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 预览与发布

完成上述所有配置后，大屏应具备三个核心交互功能：

1. 大屏切换：点击 tab 列表的“市场分析”/“用户画像”，正确显示对应大屏内容。

2. 地图热力层：地图上各省份颜色深浅反映该省份在当前浏览器下的用户数（用户数越多颜色越深）。

3. 省份点击联动：点击地图上的省份，右侧四个核心指标卡自动更新为该省份的数据。

保存预览，对以上功能进行验证，确保三个核心交互功能均正常工作。

最后点击“发布”按钮，在弹出的发布对话框中打开发布分享开关，复制分享链接，打开浏览器，将复制的链接粘贴到地址栏中，即可在线观看

六、问题与解决

问题1：大屏图层切换失效问题

问题现象：配置tab列表组件点击事件后，点击“市场分析”和“用户画像”选项，两个大屏组件组无法正常切换，出现内容重叠、隐藏失效的情况。

解决方法：逐一核对所有可视化组件，将组件精准归类到对应功能组；统一tab组件选项ID与蓝图触发节点的识别ID，保证参数匹配；在图层面板解锁所有需要切换的组件图层，重新联动配置蓝图点击事件，测试后切换功能恢复正常。

问题2：指标卡数据刷新异常

问题现象：地图点击后指标卡出现数据为空、数据错乱或刷新延迟的问题。

解决方法：利用蓝图编辑器模块化特性，将大屏切换、地图点击联动两条链路拆分独立布局，梳理节点连线逻辑，删除冗余无效节点，保证两条交互链路独立运行、互不干扰。

七、实验总结

在实验过程中，我熟练掌握了tab列表组件、基础平面地图组件、指标卡组件的交互配置方式，理解了蓝图编辑器中数据源、查询、触发器、动作、变量五大核心概念的实际应用逻辑，厘清了大屏图层切换、省份数据下钻联动的完整业务链路。同时掌握了Uniplore平台ETL数据处理、数据查询、数据分发的基础实操能力，切实体会到低代码可视化工具在大数据可视化、业务数据联动场景中的便捷性与高效性，也加深了对DataOps数据运营理念的认知。

本次实验也暴露了实操中的部分问题，初期存在组件分组不规范、蓝图节点参数匹配错误、交互链路逻辑梳理不清晰等问题，导致功能配置失效。通过逐一排查组件配置、核对节点参数、梳理链路逻辑、修正SQL查询语句，成功解决了各类功能异常问题，锻炼了问题排查、逻辑梳理和实操调试的能力。

总体而言，本次实验收获颇丰，不仅夯实了数据可视化大屏搭建与交互配置的实操技能，也理解了大数据从数据查询、参数传递到可视化联动展示的全链路逻辑。后续将进一步熟练掌握蓝图编辑器的高阶用法，优化大屏交互逻辑，提升可视化大屏的流畅度与实用性，为后续复杂数据可视化项目、企业级数据中台应用搭建奠定扎实基础。