当前位置：首页 > news >正文

实验6-3低代码数据可视化进阶：用蓝图编辑器实现浏览器分析大屏联动交互

news 2026/6/12 22:13:58

一、实验目的

本实验在已有市场分析大屏与用户画像大屏（含浏览器筛选器、多维图表、核心指标卡、中国地图等）静态布局与数据接入基础上，进一步使用助睿Max 蓝图编辑器完成高级交互配置，具体目标如下：

掌握通过图层可见性控制，实现同一大屏文件内多屏切换的思路；
学会使用 Tab列表组件，配置内容显示/隐藏联动；
理解地图组件交互事件，实现省份点击下钻联动核心指标卡；
掌握区域热力层动态数据绑定，实现按浏览器统计的省份用户数热力渲染；
综合运用全局变量 + SQL请求 + 并行数据处理分发完成复杂交互链路编排；
提升低代码大屏中“事件→参数→查询→分发→渲染”一体化实施能力。

二、实验环境

三、实验原理与关键技术

3.1 大屏切换原理

市场分析大屏与用户画像大屏位于同一大屏文件中：

市场分析所有组件 → 编组：「市场分析组」
用户画像所有组件 → 编组：「用户画像组」

使用 Tab列表组件提供两个选项（“市场分析”/“用户画像”），分别配置 id:1、id:2，背景全透明；

Tab 点击时输出 data.id→ 蓝图分支判断节点 → 分别执行：
满足：市场分析组显示 / 用户画像组隐藏
不满足：市场分析组隐藏 / 用户画像组显示

3.2 蓝图编辑器工作机制（回顾）

节点（Node）：组件 / 数据处理 / SQL请求
触发（Trigger）：Tab点击、地图“点击区域”、页面加载、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.globalProvinceAdcode
SQL：SELECT 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列表组件，调整大小、位置，两个导航按钮重合

（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;