一、实验目的本实验在已有 市场分析大屏​ 与 用户画像大屏含浏览器筛选器、多维图表、核心指标卡、中国地图等静态布局与数据接入基础上进一步使用 助睿Max 蓝图编辑器​ 完成高级交互配置具体目标如下掌握通过 图层可见性控制实现同一大屏文件内多屏切换的思路学会使用 Tab列表组件配置内容显示/隐藏联动理解地图组件交互事件实现 省份点击下钻联动核心指标卡掌握 区域热力层​ 动态数据绑定实现按浏览器统计的省份用户数热力渲染综合运用 全局变量 SQL请求 并行数据处理分发​ 完成复杂交互链路编排提升低代码大屏中“事件→参数→查询→分发→渲染”一体化实施能力。二、实验环境三、实验原理与关键技术3.1 大屏切换原理市场分析大屏与用户画像大屏位于 同一大屏文件中市场分析所有组件 → 编组「市场分析组」用户画像所有组件 → 编组「用户画像组」使用 Tab列表组件​ 提供两个选项“市场分析”/“用户画像”分别配置 id:1、id:2背景全透明Tab 点击时输出 data.id→ 蓝图 分支判断节点​ → 分别执行满足市场分析组显示 / 用户画像组隐藏不满足市场分析组隐藏 / 用户画像组显示3.2 蓝图编辑器工作机制回顾节点Node组件 / 数据处理 / SQL请求触发TriggerTab点击、地图“点击区域”、页面加载、SQL成功动作Action设置图层可见性、执行SQL、导入数据接口连线Edge事件→动作 / 数据流向3.3 地图省份点击下钻原理用户点击地图省份 → 触发 “点击区域时”​ 事件输出 { name: 江苏省 }提取地区名称节点并行数据处理去掉后缀“省/自治区/市”映射为数据表中简称江苏存入 window.globalProvinceName省份核心指标查询 SQL 节点读取 window.GLOBAL_SELECTED_BROWSER读取 window.globalProvinceName用 UNION ALL查询该省四项指标total_users / avg_age / high_edu_ratio / high_income_ratio省份核心指标分发节点按 name拆为4路 → 各自导入4个指标卡3.4 地图区域热力层原理地图内置 GeoJSON → 提取 adcode 标准名称页面加载时→ 全局映射表 window.globalProvinceAdcodeSQLSELECT province, SUM(user_count) … WHERE browser_name… GROUP BY province映射节点匹配 province → adcode→ 输出 { name, value, area_id }导入 区域热力层 → 导入热力值数据接口颜色深浅自动渲染四、实验内容与总体流程在已有双大屏 数据接入完成基础上新增Tab列表导航切换添加Tab组件 → 透明样式 → id配置导出“市场分析组 / 用户画像组 / Tab”到蓝图分支判断 → 图层可见性动作地图省份点击 → 核心指标下钻提取地区名称节点省份核心指标 SQL省份指标分发 → 4指标卡地图热力层动态渲染提取 adcode 映射GeoJSON 加载完成触发各省份用户数 SQL随浏览器参数刷新数据映射 → 热力层接口蓝图整体连线与预览验证五、实验步骤5.1 配置大屏切换实现原理Tab列表组件是一个可自定义选项的交互组件。助睿Max的Tab列表组件内置了丰富的样式自定义选项背景色、字体、选中态颜色等无需额外CSS即可实现美观的导航栏。Tab列表组件点击时会触发“当Tab点击时”事件并输出被点击项的ID。通过分支判断节点判断ID然后分别执行“设置图层可见性”动作即可实现两组内容的切换。本实验将Tab列表组件设置为2列与两个导航按钮的大小、位置重合分别代表“市场分析”和“用户画像”。通过为每列设置唯一的ID点击时即可区分用户的选择从而实现不同内容的切换。操作步骤1添加Tab列表组件调整大小、位置两个导航按钮重合2Tab列表组件的基本设置中设置行数为1列数为2再标签默认配置中将“背景颜色”、“选中背景色”、“悬浮背景色”的透明度设置为0这样就看不见Tab列表组件给用户的感觉就是只有2个按钮3设置Tab列表组件每个选项的id在数据中保留2列数据id分别为1、2content为空设置后记得刷新数据4将“市场分析”组、“用户画像”组、Tab列表组件导出到蓝图编辑器5在蓝图编辑器中将“市场分析”组、“用户画像”组、Tab列表组件添加到蓝图编辑器画布中通过“分支判断”节点来做“当Tab点击时”的id判断处理刚发为return data.id 1;6在“分支判断”的 满足 分支上添加两个“设置图层可见性”动作目标图层市场分析组 → 显示目标图层用户画像组 → 隐藏7在“判断选项卡”的 不满足 分支上添加两个“设置图层可见性”动作目标图层市场分析组 → 隐藏目标图层用户画像组 → 显示助睿Max的条件分支节点允许根据表达式的结果执行不同的动作非常适合处理这类二选一的交互场景。配合“设置图层可见性”动作无需代码即可实现复杂的界面切换。5.2 配置地图省份点击联动5.2.1 设计思路与原理在用户画像大屏中我们希望通过点击地图上的任意省份右侧的核心指标卡总用户数、平均年龄、本科及以上占比、中高收入占比能立即切换为该省份的数据。这是一种典型的地理下钻分析也是数据大屏的核心交互之一。助睿Max 的蓝图编辑器让这种交互无需编写后端代码只需通过“事件-动作”的连线即可实现。整个数据流如下地图点击事件 → 提取省份名称并行数据处理 → 动态SQL查询SQL请求 → 数据分发并行数据处理 → 四个指标卡刷新核心知识点事件驱动地图组件的“点击区域时”事件是起点它会输出被点击区域的地理信息如省份名称。变量传递通过 window.globalProvinceName 全局变量可以将省份名称在不同节点间共享避免重复连线。动态SQLSQL请求节点可以接收外部变量实现“根据用户点击的省份查询不同数据”。并行数据处理将一次查询返回的多行数据每个指标一行拆分、过滤分别发送给不同的目标组件。传统开发中实现此类下钻功能需要编写前端 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 valuefrom labs.user_profile_statswhere browser_name ${selectedBrowser} and province ${selectedProvince}union allselect avg_age as name,round(sum(age * user_count) / sum(user_count), 0) as valuefrom labs.user_profile_statswhere browser_name ${selectedBrowser} and province ${selectedProvince}union allselect high_edu_ratio as name,round(sum(case when edu in (本科, 硕士及以上) then user_count else 0 end) * 100.0 / sum(user_count), 2) as valuefrom labs.user_profile_statswhere browser_name ${selectedBrowser} and province ${selectedProvince}union allselect high_income_ratio as name,round(sum(case when income in (50018000元, 800112000元,12000元以上) then user_count else 0 end) * 100.0 / sum(user_count), 2) as valuefrom labs.user_profile_statswhere 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 SELECTprovince AS name,SUM(user_count) AS valueFROM labs.user_profile_statsWHERE browser_name ${selectedBrowser}AND province IS NOT NULLAND 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 返回字段名为 namelet 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 列表的“市场分析”/“用户画像”正确显示对应大屏内容。地图热力层地图上各省份颜色深浅反映该省份在当前浏览器下的用户数用户数越多颜色越深。省份点击联动点击地图上的省份右侧四个核心指标卡自动更新为该省份的数据。保存预览对以上功能进行验证确保三个核心交互功能均正常工作。最后点击“发布”按钮在弹出的发布对话框中打开发布分享开关复制分享链接打开浏览器将复制的链接粘贴到地址栏中即可在线观看六、实验结果与分析6.1 功能完成情况6.2 性能表现热力层 维度SQL 指标SQL 各自独立避免重复全量查询省份下钻仅查单行聚合响应快无页面刷新全部蓝图事件驱动6.3 问题与改进若未点击省份直接加载指标卡可默认显示全国/当前浏览器数据 → 增加初始化分支省份名称映射需全覆盖港澳台及“自治区/特别行政区”可扩展省份点击 → 打开城市下钻子屏七、实验总结通过实验6-3掌握了 Tab列表 图层可见性​ 实现多屏共存切换理解了 地图交互事件 → 全局变量 → 参数化SQL → 分发​ 的下钻模式能独立编排 热力层GeoJSON → adcode → 聚合SQL → 映射 → 组件接口深化了对 助睿Max 蓝图“事件–节点–数据–动作”​ 工程化编排的认知为运营驾驶舱、数字孪生中“总览→下钻→联动”类交互打下基础。