实验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列表组件划分为两列（即“市场分析”与“用户画像”），为每一列赋予独立的ID（例如“id: 1”与“id: 2”），并将其背景设为透明以自然融入导航栏。当用户点击某一列时，系统会根据其ID来控制两个组的显隐状态：显示目标组的同时隐藏另一组。
• 助睿Max图层管理优势：用户可通过“图层”面板直观地控制各类组件的显示与隐藏，全程零代码。配合强大的蓝图编辑器，还能轻松建立按钮与图层可见性之间的深度联动关系。

3.2 地图省份点击联动逻辑

在“用户画像”大屏中，当用户点击地图上的任意省份时，右侧呈现的四个核心指标卡（总用户数、平均年龄、本科及以上占比、中高收入占比）需即时同步为该选中省份的数据。

• 交互流程：用户点击特定省份 → 地图组件触发“点击区域”事件 → 蓝图节点接收该省份名称 → SQL请求节点查询目标省份的核心指标 → 各指标卡自动刷新并展示最新数据。

4 整体蓝图逻辑说明

4.1 什么是蓝图编辑器？

蓝图编辑器是助睿Max内置的一款可视化编程工具，专门用于配置数据流与交互逻辑。它采用直观的“节点-连线”模式，帮助用户自由且高效地梳理可视化应用中各组件之间的交互网络。

• 蓝图编辑器的优势：
  • 能够从底层保障交互体验与数据流转的实时性与同步性。
  • 支持高度灵活的数据请求合并以及精准的数据分发功能。
  • 允许进行模块化拆分，让开发者摆脱代码整理与规范的束缚，全心聚焦于具体的业务规则与单个交互链路。

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 实验步骤

5.1 配置大屏切换

实现原理：
Tab列表组件是一个支持高度自定义选项的交互控件。助睿Max的Tab列表组件内置了丰富的样式自定义功能（如背景色、字体、选中态颜色等），用户无需编写任何CSS代码即可打造出美观实用的导航栏。当Tab列表组件被点击时，会触发“当Tab点击时”事件，并向外输出被点击项的具体ID。随后，通过分支判断节点对该ID进行判定，并分别执行相应的“设置图层可见性”动作，便能轻松实现两组展示内容的顺滑切换。

在本实验中，我们将Tab列表组件设置为2列，并使其与两个导航按钮在大小和位置上完全重合，分别指代“市场分析”与“用户画像”。通过为每一列设定具有唯一性的ID，系统便能在点击时精准区分用户的选择意图，进而完成不同模块内容的切换逻辑。

操作步骤：

1. 添加Tab列表组件，仔细调整其大小与位置，确保其与底部的两个导航按钮完全重合。
2. 在Tab列表组件的基本设置中，将行数设定为1、列数设定为2；随后在标签的默认配置里，将“背景颜色”、“选中背景色”以及“悬浮背景色”的透明度参数均调整为0。这样Tab列表组件在视觉上将被完全隐藏，给予用户的直观操作感受便是仅存在两个真实的按钮。
3. 为Tab列表组件的每个选项配置专属ID：在数据面板中保留2列数据，将ID分别设为1和2，同时将content字段留空，配置完成后请务必点击刷新数据。
   
4. 将“市场分析”组、“用户画像”组以及Tab列表组件统一导出至蓝图编辑器环境。
5. 在蓝图编辑器的画布界面中，引入上述导出的三个模块，并接入“分支判断”节点。该节点用于在触发“当Tab点击时”事件时对传入的ID进行逻辑判定，处理代码如下：

returndata.id==1;

6. 在“分支判断”节点的“满足”分支路径上，增设两个“设置图层可见性”动作：将目标图层“市场分析组”设定为显示状态；将目标图层“用户画像组”设定为隐藏状态。
7. 在“分支判断”节点的“不满足”分支路径上，同样增设两个“设置图层可见性”动作：将目标图层“市场分析组”设定为隐藏状态；将目标图层“用户画像组”设定为显示状态。

助睿Max的条件分支节点允许系统根据表达式的最终结果执行截然不同的后续动作，这一特性极其适合处理此类二选一的交互场景。结合“设置图层可见性”动作，用户无需编写前端代码便可构建出复杂的界面切换效果。

5.2 配置地图省份点击联动

5.2.1 设计思路与原理

在“用户画像”大屏中，我们的核心诉求是：当用户点击地图上的任意省份时，右侧的核心指标卡（总用户数、平均年龄、本科及以上占比、中高收入占比）能够立即切换并呈现该省份的专属数据。这是数据大屏领域中极为典型的一种地理下钻分析应用，也是最为核心的交互体验之一。

助睿Max的蓝图编辑器让这种高级交互彻底免去了编写后端接口代码的烦恼，用户只需通过简单的“事件-动作”连线即可跑通全流程。完整的数据流转如下：
地图点击（事件触发） → 提取省份名称（并行数据处理节点） → 动态SQL查询（SQL请求节点） → 数据分发（并行数据处理节点） → 四个指标卡刷新渲染

核心知识点：

• 事件驱动：地图组件的“点击区域时”事件是整个数据流的起点，一旦触发，它便会输出被点击区域的地理信息（例如省份名称）。注意，实现此功能的前提是必须提前开启该组件的交互事件开关。

• 变量传递：通过定义window.globalProvinceName这一全局变量，我们能够将提取到的省份名称在毫无物理连线的不同节点之间进行共享，从而大幅减少画布中的重复连线。

• 动态SQL：SQL请求节点具备接收外部动态变量的能力，借此可轻松实现“根据用户点击的不同省份，向数据库请求截然不同的数据结果”的业务逻辑。

• 并行数据处理：能够将单次SQL查询返回的多行合并数据（即每个指标占据一行），依据特定条件进行拆分与过滤，随后将精确的单一数值分别推送给不同的目标前端组件。

在传统的前后端开发模式下，实现此类地理下钻功能往往需要前端工程师编写复杂的JavaScript交互逻辑，并由后端工程师配套开发相应的API接口。而助睿Max通过蓝图编辑器将这套数据流彻底可视化，仅需拖拽节点即可搭建完毕，使得整体开发效率实现了数倍的飞跃。

5.2.2 核心组件配置

（1）提取地区名称（并行数据处理节点）
地图组件在被点击后所输出的省份名称通常为官方全称（例如“江苏省”、“广西壮族自治区”），然而在我们的底层数据表中，记录的往往是行政简称（如“江苏”、“广西”）。因此，在查询前必须先完成一次名称匹配与映射转化。

作用：精准接收由地图点击事件输出的data对象，从中剥离出name字段，并依照预设的映射规则将其转换为数据表兼容的简称格式，最终妥善存入全局变量window.globalProvinceName中备用。

代码（已内置完整的映射规则表，全面兼容各个省份、自治区、直辖市及特别行政区）：

// 省份特殊映射（针对直辖市、自治区、特别行政区）constspecialMap={'北京市':'北京','天津市':'天津','上海市':'上海','重庆市':'重庆','广西壮族自治区':'广西','内蒙古自治区':'内蒙古','西藏自治区':'西藏','宁夏回族自治区':'宁夏','新疆维吾尔自治区':'新疆','香港特别行政区':'香港','澳门特别行政区':'澳门'};letprovinceName=data.name;// 优先采用特殊映射表进行精准匹配if(specialMap[provinceName]){provinceName=specialMap[provinceName];}else{// 通用处理逻辑：利用正则去除末尾多余的“省”、“自治区”、“市”等字眼provinceName=provinceName.replace(/(省|自治区|市)$/,'');}window.globalProvinceName=provinceName;returnprovinceName;

（2）省份核心指标查询（SQL请求节点）
依据当前用户所选中的浏览器类型（window.GLOBAL_SELECTED_BROWSER）以及刚刚点击的省份名称（window.globalProvinceName），深入user_profile_stats数据表查询四项核心业务指标。为了给后续的数据分发流程提供便利，我们采用UNION ALL语句将四项指标整合输出为多行结构，确保每一行均清晰包含name（指标名称）与value（具体数值）。

SQL 配置如下：

constselectedProvince=window.globalProvinceName;console.log("点击的省份名称（处理后）：",selectedProvince);constselectedBrowser=window.GLOBAL_SELECTED_BROWSER;constsql=`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);returnsql;

（3）省份核心指标分发（并行数据处理节点）
鉴于SQL节点返回的是包含四行结果的聚合数据集，而前端的四个指标卡均仅需接收一个单一数值进行渲染。因此，我们通过引入“并行数据处理”节点，依据name字段对聚合数据进行逐一过滤，确保每个指标数据都能被独立、准确地输送给对应的目标指标卡。

分支配置示例（以总用户数为例）：

varitem=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. 数据映射与格式重组：将步骤2查询所得的业务省份名称与步骤1生成的 adcode 映射表进行逐一匹配对齐，最终向外输出符合标准要求的{ name, value, area_id }格式数组。
4. 导入并驱动热力渲染：将格式化完毕的数组数据直接导入地图的“区域热力层”子组件中，系统底层引擎便会自动接管并完成颜色深浅的计算与渲染工作。

在传统的代码开发范式中，实现一套完整的地图热力层往往需要前端工程师手动异步加载并解析 GeoJSON 文件、编写繁杂的算法去映射颜色区间、并逐个绑定交互事件。而助睿Max彻底颠覆了这一流程，用户只需规范配置好子组件的入参数据接口，平台便可全自动完成高性能渲染，极大幅度地降低了地理空间可视化的技术准入门槛。

5.3.2 核心组件配置

（1）提取 adcode 映射表（并行数据处理节点）
该节点仅需在页面初次加载时执行一次。其主要任务是从地图组件底层内置的 GeoJSON 数据结构中，遍历提取出每个省份的 adcode 及标准名称，并由此构建出全局维度的映射字典globalProvinceAdcode。

操作步骤：

1. 在蓝图画布中拖入一个“并行数据处理”节点，并将其重命名为“提取adcode映射表”。
2. 将区域热力层子组件暴漏的“当数据接口地理边界geojson数据加载完成时”事件牵线连接至该节点（此举旨在确保地图的核心基础数据已完全就绪后再执行提取逻辑）。
3. 在提取 adcode 映射表的代码处理区内输入以下代码：

/** * 提取地理数据中的 adcode 和 name 属性，建立名称→adcode 的全局映射关系 * @param {Object} data - 原始地理数据对象（其内部包含 features 数组结构） * @returns {Object} 名称到 adcode 的完整字典映射表 */functionextractAdcodeAndName(data){if(!data||!Array.isArray(data.features)){console.error('检测到无效的地图数据结构格式');return{};}constnameToAdcode={};data.features.forEach(feature=>{constprops=feature.properties;if(props&&props.adcode&&props.name){nameToAdcode[props.name]=props.adcode;}});returnnameToAdcode;}constmapping=extractAdcodeAndName(data);window.globalProvinceAdcode=mapping;console.log("省份adcode映射字典已成功加载，包含节点数：",Object.keys(mapping).length);returnmapping;

（2）查询所有省份的用户数（SQL请求节点）
依据当前下拉框选中的浏览器类型（window.GLOBAL_SELECTED_BROWSER），全量统计全国各个省份的用户总规模，并将结果按照用户数量进行降序排列。

操作步骤：

1. 添加一个“SQL请求”节点，并将其命名为“各省份用户数查询”。
2. 在该节点的处理方法区内输入以下代码：

constselectedBrowser=window.GLOBAL_SELECTED_BROWSER;// 获取当前选中的目标浏览器constsql=`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);returnsql;

（3）地图数据格式化映射（并行数据处理节点）
将 SQL 查询环节返回结果集中的省份名称，与全局字典window.globalProvinceAdcode展开精准匹配，进而生成格式严谨的{ name, value, area_id }数组，最终专供地图热力层消化使用。

操作步骤：

1. 在画布中添加“并行数据处理”节点，并将其重命名为“地图数据与用户数映射”。
2. 在处理方法区内输入以下代码：

functionconvertToMapData(data){if(!Array.isArray(data)||data.length===0){return[];}returndata.map(item=>{constprovinceName=item.name;// 注意：由于SQL阶段定义，返回的省份字段名为 nameletarea_id=globalProvinceAdcode[provinceName];// 应对名称不一致的情况：若直接严格匹配失败，则尝试剔除后缀采用简化名称进行模糊匹配if(!area_id){constsimplifiedName=provinceName.replace(/省|市|自治区|特别行政区|回族|壮族|维吾尔|藏族|苗族/g,'');for(constfullNameinglobalProvinceAdcode){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)};});}constresult=convertToMapData(data);// console.log("最终输出并交由引擎渲染的地图热力数据格式：", result);returnresult;

（4）导入地图热力层
在此前的配置中，基础平面地图组件内已经挂载了“区域热力层”子组件。此刻，我们只需将映射打磨好的标准格式数据注入到该子组件内部即可生效。

操作步骤：
将“地图数据与用户数映射”节点的输出端口，牵线连接至“区域热力层”的“导入热力值数据接口”端点。

助睿Max内置的地图组件及各项子组件均配备了极其丰富的事件及动作触发接口。通过持续调动“导入热力值数据接口”动态下发最新数据，大屏完全有能力在浏览器类型发生切换时，实现热力图颜色的全自动无感刷新。

5.3.3 蓝图连线与数据流

完整的蓝图数据流转架构如下所示（请注意：热力图的底层渲染逻辑与用户的点击下钻联动逻辑在蓝图中是相互独立的）：

5.4 预览与发布

在完成了上述所有的串联与配置工作后，大屏目前应当完美具备以下三大核心交互功能：

1. 大屏无缝切换：点击 Tab 列表区域的“市场分析”或“用户画像”选项时，系统应能够正确且平滑地呈现所对应的大屏内容组。
2. 地图全局热力层渲染：地图界面上各省份的填充颜色深浅，必须能准确反映该省在当前所选浏览器条件下的真实用户体量差异（即用户数越庞大的省份，颜色显得越深邃）。
3. 省份点击下钻联动：当用鼠标点击地图上的某一特定省份区域时，右侧配套的四个核心指标卡将触发自动更新机制，瞬间加载并展示该被点击省份的具体业务数据。

请点击顶部菜单栏的保存并进入预览模式，仔细验证上述三大核心交互功能，确保各项点击响应及数据流转均正常且毫无阻塞。

确认无误后，点击系统右上角的“发布”按钮。在随即弹出的发布管理对话框中，拨开分享开关并复制生成的公共分享链接。最后，打开任意主流浏览器并将复制的链接粘贴至地址栏，即可在线全屏观赏您的实验成果。

参考分享链接实例：http://47.109.66.142:30887/#/dataScreen/release?shareId=6c8835415fd44ee88317766691976922

全文总结

本文详细解析了如何依托助睿Max强大的可视化与蓝图编辑器能力，零代码打造高度互动的企业级数据大屏。通过图层显隐控制实现了大屏内容模块的顺畅切换，并通过精密的事件监听、变量传递、动态SQL构建及数据拆分与分发策略，成功打通了从“地图热力渲染”到“点击省份指标联动”的全链路数据交互流。该实验充分验证了助睿Max在降低数据可视化开发门槛、提升复杂逻辑配置效率方面的卓越优势。