一、实验背景

1.1 实验目的

本实验依次围绕浏览器用户画像分析大屏开展三项递进式实践：首先基于已加工的用户画像统计表（user_profile_stats）完成大屏静态布局设计；接着依托已完成的静态布局，使用助睿 Max 蓝图编辑器接入数据表并配置组件数据；最后在前序市场分析大屏与用户画像大屏基础上，拓展实现多屏切换与地图联动交互。

通过本实验，学生应掌握：

• 根据用户画像分析需求，合理设计大屏的信息结构与叙事逻辑
• 理解不同图表类型在用户画像分析中的适用场景与分析价值
• 将数据结果转化为可直观理解、可支撑决策的用户洞察
• 站在 “数据产品” 角度，思考大屏如何向不同受众传递价值
• 理解蓝图编辑器的基本概念（数据源、触发器、动作、并行数据处理）
• 使用并行数据处理节点接收筛选器参数并分发给多个 SQL 请求节点
• 为不同图表组件编写带参数的 SQL 查询语句
• 配置筛选器与图表的联动交互
• 使用图层可见性控制实现大屏内容切换
• 使用按钮组件配置页面跳转或内容显示 / 隐藏
• 使用地图组件的交互事件，实现省份下钻联动
• 配置指标卡组件根据地图点击动态更新数据

1.2 实验环境

•  零代码在线实验平台：
  •   数据集成平台
  •  可视化工具：数据大屏
• MySQL 

1.3 实验数据

本实验使用上一阶段加工完成的 user_profile_stats 表，该表按浏览器维度，统计了用户在各人口属性上的分布，包括：

• 基本信息：性别、年龄、学历、职业、收入

• 地域信息：居住地类型（城市/城郊/乡村）、省份

• 维度：按浏览器名称分组，支持整体分析与分浏览器对比

该表结构如下：

字段	类型	说明
browser_name	VARCHAR(50)	浏览器名称
gender	VARCHAR(10)	性别
age_group	VARCHAR(10)	年龄段
edu	VARCHAR(50)	学历
job	VARCHAR(50)	职业
income	VARCHAR(50)	收入
city_type	VARCHAR(10)	居住地类型
province	VARCHAR(50)	省份
user_count	INT	用户数

二、实验步骤

2.1 用户画像数据大屏制作

2.1.1 大屏设计方案

用户画像大屏的具体方案如下：

模块	子模块	指标项	组件	关联数据表	备注
数据概览	用户概况	覆盖用户数	指标卡	user_profile_stats	满足筛选条件的用户总数
		性别比例	指标卡	user_profile_stats	用户年龄均值
		本科以上占比	指标卡	user_profile_stats	学历本科及以上的用户比例
		中高收入占比	指标卡	user_profile_stats	月收入>5k的用户比例
基本信息		性别分布	饼图	user_profile_stats	男/女用户占比
		年龄分布	柱状图	user_profile_stats	按年龄段统计用户数
		学历分布	条形图	user_profile_stats	按学历层次统计用户数
		职业分布	柱状图	user_profile_stats	按职业类别统计用户数
		收入分布	柱状图	user_profile_stats	按收入段统计用户数
地域分布		城市 vs 乡镇分布	饼图	user_profile_stats	城市/城郊/乡村用户占比
		用户省份分布	中国地图	user_profile_stats	展示各省份用户数量分布
		省份用户数TOP5	轮播列表	user_profile_stats	展示用户数量top5省份
筛选器		浏览器选择	下拉多选	-	支持选择单个、多个或全部浏览器，默认全部

参考图：

2.1.2 用户省份分布

市场分析大屏已在上一个实验中完成，本次实验只制作用户画像大屏。因此，在开始布局前，需要先将上一个实验已制作的市场分析图表全部隐藏，避免与当前用户画像内容重叠干扰。我们可以将市场分析大屏的组件所在的“市场分析”组整体复制、隐藏，复制的组重命名为“用户画像”，用户画像大屏的组件正常显示。

分析省份分布，是为了识别区域市场的“热点”与“空白”：

• 哪些省份用户最多？

• 这些省份是否连片（如沿海高活跃带）？

• 哪些省份是“灯下黑”？

这些信息直接指导区域运营资源的投放优先级，以及本地化推广的策略选择。同时，省份分布也是向投资人展示市场覆盖范围的直观方式。在大屏布局中，我们把省份分布地图放在最醒目的主视觉位置用地图组件来展示

（1）根据参考图布局，添加“基础平面地图”组件，设置好大小、位置后，添加“区域热力层”子组件

（2）点击“区域热力层”进入子组件配置页面，可根据自身需求配置颜色渐变、边界线宽、高亮样式等属性。助睿Max的地图组件支持自定义地图样式（如深色模式、清新模式），可匹配大屏整体风格

2.1.3 核心指标

我们在主视觉区域设计了4个核心指标：

业务问题	对应指标
用户规模有多大？	用户总数
用户偏年轻还是成熟？	平均年龄
用户的教育水平如何？	本科及以上用户占比
有没有消费潜力？	中高收入用户（月收入≥5k）占比

核心指标用指标卡（数字翻牌器）来呈现：

（1）根据参考图，添加4个“数字翻牌器”纵向排列，设置标题和数值样式

（2）每个“数字翻牌器”的标题，使用“单张图片”组件设置背景，

2.1.4 用户数TOP5省份排行榜

排行榜通常用表格或横向条形图来展示。表格的优点是信息密度高、精确，适合展示排名、省份名称、用户数三列信息，这里，我们采用表格形式：

（1）根据参考图，添加“单张图片”组件，作为排行榜区域背景

（2）添加“通用标题”组件，调整好样式

（3）添加“轮播列表”组件，调整好样式（行高、列宽、字体、交替行背景色等）

2.1.5 性别分布

性别分布用饼图来展示：

（1）使用“单张图片”组件设置区域背景，并设置好标题

（2）添加“基础饼图”组件，调整大小和位置

2.1.6 年龄段分布

年龄分布用柱状图来呈现，因为年龄是多个有序区间（如<18、18-25、26-35、>35），柱状图能直观展示分布形态：

（1）使用“单张图片”组件设置区域背景，并设置好标题

（2）助睿Max 支持多种柱状图：基础柱图、弧形柱图、水平基础柱图、水平胶囊柱图、垂直胶囊柱图、垂直基本柱图（堆叠柱状图），这里我们使用基础柱图

2.1.7 学历分布

学历分布用水平基础柱图来展示：

（1）使用“单张图片”组件设置区域背景，并设置好标题

（2）这里我们使用助睿Max 的水平基础柱图

2.1.8 职业分布

职业分布用柱状图来展示：

（1）使用“单张图片”组件设置区域背景，并设置好标题

（2）这里我们使用助睿Max的基础柱图

2.1.9 收入分布

收入分布用柱状图来展示：

（1）使用“单张图片”组件设置区域背景，并设置好标题

（2）这里我们使用助睿Max 的水平基础柱图

2.1.10 居住地类型分布

居住地类型只有三个类别，适合用饼图展示结构占比：

（1）使用“单张图片”组件设置区域背景，并设置好标题

（2）为了使大屏可视化效果更丰富，这里我们使用助睿Max 的轮播饼图

2.1.11 筛选器

用户画像分析大屏的核心价值之一，是支持按不同浏览器进行对比分析。通过筛选器，用户可以：

• 查看全部浏览器用户的整体画像（默认视图），了解产品大盘用户特征；

• 选择单个浏览器（如 Chrome、IE、360 等），聚焦该浏览器用户的画像，回答“使用 Chrome 的用户与其他用户有什么不同？”；

• 选择多个浏览器进行对比，直观比较不同浏览器用户的年龄、职业、地域等分布差异，为产品定位和竞争策略提供数据依据。

筛选器应满足多选、可清空、支持全选/默认全选的交互需求，同时要贴合大屏整体风格：

（1）在大屏顶部右侧合适位置，添加“下拉选择”组件（位于“交互”组件分类中），重命名为“浏览器筛选”，调整组件位置和大小

（2）在组件右侧属性面板中，调整样式

2.2 用户画像数据大屏数据接入

2.2.1 蓝图连接思路

节点连线说明：

起点节点	终点节点	连线含义
页面加载（页面初始化完成）	浏览器参数接收（输入）	大屏打开时触发参数初始化
浏览器筛选器（下拉框内容被选中）	浏览器参数接收（输入）	用户选择浏览器后触发
浏览器参数接收（输出）	维度数据SQL请求（执行SQL）	传递浏览器参数
浏览器参数接收（输出）	核心指标SQL请求（执行SQL）	传递浏览器参数
维度数据SQL请求（执行成功）	维度数据分发（输入）	将维度数据传给分发节点
核心指标SQL请求（执行成功）	核心指标分发（输入）	将核心指标数据传给分发节点
维度数据分发（分支1-7）	各维度图表（导入数据接口）	性别、年龄、学历等数据
核心指标分发（分支1-4）	四个指标卡（导入数据接口）	总用户数、平均年龄等

2.2.2 添加年龄字段并导入组件

在用户画像大屏中，我们需要展示平均年龄这一核心指标。原有的 user_profile_stats 表中只有年龄段（age_group）字段，没有精确年龄。如果使用年龄段中值估算平均年龄（如 26-35 岁取 30.5 岁），会存在一定误差。

为了更准确地计算平均年龄，我们需要在 user_profile_stats 表中增加一个 age 字段。

创建转换流拖入“执行一个SQL脚本”组件执行以下SQL修改表结构

SQL：

DROP TABLE IF EXISTS `user_profile_stats`;
CREATE TABLE `user_profile_stats` (
    `browser_name` VARCHAR(50) NOT NULL COMMENT '浏览器名称',
    `gender` VARCHAR(10) COMMENT '性别',
    `age` INT NOT NULL COMMENT '年龄',
    `age_group` VARCHAR(10) COMMENT '年龄段',
    `edu` VARCHAR(50) COMMENT '学历',
    `job` VARCHAR(50) COMMENT '职业',
    `income` VARCHAR(50) COMMENT '收入',
    `city_type` VARCHAR(10) COMMENT '居住地类型',
    `province` VARCHAR(50) COMMENT '省份',
    `user_count` INT NOT NULL COMMENT '用户数'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户画像统计表';

接下来打开“用户画像表加工”转换流，做以下修改：

（1）修改排序记录组件，增加 age 字段的升序排序

（2）修改分组组件，分组字段更加 age

（3）执行转换流

将以下组件依次导出到蓝图编辑器：

• 浏览器筛选器（下拉多选）

• 性别分布饼图

• 年龄段分布柱状图

• 学历分布条形图

• 职业分布柱状图

• 收入分布柱状图

• 居住地类型饼图

• 用户省份分布地图

• 省份排行榜（轮播列表）

• 核心指标卡（总用户数、平均年龄、中高收入占比）

2.2.3 添加浏览器参数接收节点

大屏上的浏览器筛选器让用户可以选择某个具体的浏览器。当用户切换选择时，地图、饼图、柱状图等所有图表的数据都需要跟着变，这个节点就是“浏览器参数接收”，它用“并行数据处理”组件来实现

双击节点，添加两个处理方法：

设置基础URL：

const BASE_URL = 'https://lab.guilian.cn';
window.GLOBAL_BASE_URL = BASE_URL;
return data;

接收浏览器参数：

const SELECTED_BROWSER = data.value;
window.GLOBAL_SELECTED_BROWSER = SELECTED_BROWSER;
return { value: SELECTED_BROWSER };

我们需要填写6个浏览器的对应内容，并刷新数据，同时，输入框中默认选中设置为“IE浏览器”

浏览器的选项我们可以直接使用静态数据：title为前端显示内容，value为实际查询内容，即数据库中存储的对应 browser_name，如：

{
    "title": "IE浏览器",
    "value": "IE浏览器"
}

2.2.4 添加SQL请求节点

这个节点负责查询性别、年龄、学历、职业、收入、居住地类型、省份等维度数据，使用 UNION ALL 合并，输出格式为 (dimension_type, name, value)

添加“SQL请求”节点，重命名为“维度数据SQL请求”

查询SQL如下：

// 从全局变量获取选中的浏览器值
const selectedBrowser = window.GLOBAL_SELECTED_BROWSER;

let sql = `
-- 性别分布
select 
    'gender' as dimension_type,
    gender as name,
    sum(user_count) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'
group by gender

union all

-- 年龄段分布
select 
    'age' as dimension_type,
    age_group as name,
    sum(user_count) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'
group by age_group

union all

-- 学历分布
select 
    'edu' as dimension_type,
    edu as name,
    sum(user_count) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'
group by edu

union all

-- 职业分布
select 
    'job' as dimension_type,
    job as name,
    sum(user_count) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'
group by job

union all

-- 收入分布
select 
    'income' as dimension_type,
    income as name,
    sum(user_count) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'
group by income

union all

-- 居住地类型分布
select 
    'city_type' as dimension_type,
    city_type as name,
    sum(user_count) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'
group by city_type

union all

-- 省份分布
select 
    'province' as dimension_type,
    province as name,
    sum(user_count) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'
group by province
`;
return sql

2.2.5 添加核心指标SQL请求节点

添加“SQL请求”节点，重命名为“核心指标SQL请求”

查询SQL如下：

// 从全局变量获取选中的浏览器值
const selectedBrowser = window.GLOBAL_SELECTED_BROWSER;

let sql = `
-- 核心指标（总用户数、平均年龄、本科及以上占比、中高收入占比）
select 
    'total_users' as name,
    sum(user_count) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'

union all

select 
    'avg_age' as name,
    round(sum(age * user_count) / sum(user_count), 1) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'

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), 1) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'

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), 1) as value
from labs.user_profile_stats
where browser_name = '${selectedBrowser}'
`;
return sql

2.2.6 添加维度数据分发节点

添加“并行数据处理”节点，重命名为“数据分发”。将SQL请求节点的“执行成功”连接到该节点。

双击节点，为每个图表添加一个处理方法：

性别分布（饼图）

var filtered = data.filter(item => item.dimension_type === 'gender');
return filtered.map(item => ({
    name: item.name,
    value: item.value
}));

年龄段分布（柱状图）

var filtered = data.filter(item => item.dimension_type === 'age');
var order = ['<18', '18-25', '26-35', '36-45', '>45'];
filtered.sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name));
return filtered.map(item => ({
    x: item.name,
    y: item.value,
    s: '用户数'
}));

学历分布（条形图）

var filtered = data.filter(item => item.dimension_type === 'edu');

var order = ['小学及以下', '初中', '高中/中专/技校', '大专', '大学本科', '硕士及以上'];
filtered.sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name));
return filtered.map(item => ({
    x: item.name,
    y: item.value,
    s: '学历'
}));

职业分布（柱状图）

var filtered = data.filter(item => item.dimension_type === 'job');
return filtered.map(item => ({
    x: item.name,
    y: item.value,
    s: '职业'
}));

收入分布（柱状图）

var filtered = data.filter(item => item.dimension_type === 'income');

// 按收入金额升序排序（提取数字进行比较）
filtered.sort((a, b) => {
    // 提取收入段中的最小金额
    var getMinIncome = (incomeStr) => {
        // 处理 "无收入"、"500元及以下" 等特殊情况
        if (incomeStr === '无收入') return -1;
        if (incomeStr === '500元及以下') return 0;
        // 提取数字，如 "1501~2000元" 提取 1501
        var match = incomeStr.match(/(\d+)/);
        return match ? parseInt(match[1]) : 999999;
    };
    return getMinIncome(a.name) - getMinIncome(b.name);
});

return filtered.map(item => ({
    x: item.name,
    y: item.value,
    s: '收入'
}));

居住地类型分布（饼图）

var filtered = data.filter(item => item.dimension_type === 'city_type');
return filtered.map(item => ({
    name: item.name === 'unknown' ? '未知' : item.name,
    value: item.value
}));

省份排行榜TOP5

// 过滤出省份数据
var filtered = data.filter(item => item.dimension_type === 'province');
// 按用户数降序排序
filtered.sort((a, b) => b.value - a.value);
// 取前5条
var top5 = filtered.slice(0, 5);
// 直接返回组件需要的字段名
return top5.map(item => ({
    province: item.name,
    user_count: item.value
}));

2.2.7 添加核心指标分发节点

通过“并行数据处理”节点，我们按 name 字段过滤，将每个指标单独输出给对应的指标卡。

示例（总用户数）：

var item = data.find(item => item.name === 'total_users');
return [{ value: item ? item.value : 0 }];

其他分支类似，只需修改 item.name === 'total_users'的条件即可

2.2.8 连接节点与测试

按照蓝图连接示意图，依次连接所有节点：

1. 页面加载 → 浏览器参数接收（输入）

2. 浏览器筛选器 → 浏览器参数接收（输入）

3. 浏览器筛选器 → 维度数据SQL请求（执行SQL）

4. 浏览器筛选器 → 核心指标SQL请求（执行SQL）

5. 维度数据SQL请求（执行成功） → 维度数据分发（输入）

6. 核心指标SQL请求（执行成功） → 核心指标分发（输入）

7. 维度数据分发（分支1-8） → 各维度图表组件（导入数据接口）

8. 核心指标分发（分支1-4） → 四个核心指标卡（导入数据接口）

点击蓝图编辑器右上角的“保存”按钮，然后返回大屏，点击“预览”，进行功能测试：

1. 大屏打开时，默认显示第一个浏览器的用户画像数据（如下拉框默认选中的浏览器）

2. 选择其他浏览器，所有图表应刷新为新浏览器的数据

3. 观察地图、饼图、柱状图是否都随筛选器变化

2.3 2012年浏览器全景分析数据大屏交互设置

2.3.1 蓝图连接思路

节点	职责
tab列表组件	提供“市场分析”和“用户画像”两个选项，捕获用户点击，输出对应的ID
基础平面地图	展示省份分布，捕获用户点击的省份区域
省份参数接收	接收省份名称，存储到全局变量
省份核心指标查询	根据省份和浏览器，查询该省份的核心指标
省份核心指标分发	将查询结果拆分为4个独立数值
四个指标卡	显示该省份的用户画像数据

2.3.2 大屏切换设置

使用Tab列表组件实现：

（1）添加Tab列表组件，调整大小、位置，两个导航按钮重合

（2）Tab列表组件的基本设置中，设置行数为1，列数为2，再标签默认配置中，将“背景颜色”、“选中背景色”、“悬浮背景色”的透明度设置为0，这样就看不见Tab列表组件，给用户的感觉就是只有2个按钮

（3）设置Tab列表组件每个选项的id：在数据中，保留2列数据，id分别为1、2，content为空，设置后记得刷新数据

（4）将“市场分析”组、“用户画像”组、Tab列表组件导出到蓝图编辑器

（5）在蓝图编辑器中，将“市场分析”组、“用户画像”组、Tab列表组件添加到蓝图编辑器画布中，通过“分支判断”节点来做“当Tab点击时”的id判断

（6）在“分支判断”的 满足 分支上，添加两个“设置图层可见性”动作：

• 目标图层：市场分析组 → 显示

• 目标图层：用户画像组 → 隐藏

（7）在“判断选项卡”的 不满足 分支上，添加两个“设置图层可见性”动作：

• 目标图层：市场分析组 → 隐藏

• 目标图层：用户画像组 → 显示

处理方法：

return data.id == 1;

2.3.3 地图省份点击联动配置

地图组件的“点击区域时”事件是起点，它会输出被点击区域的地理信息（如省份名称），前提是需要开启组件的交互事件：

提取地区名称（并行数据处理）：

// 省份特殊映射（直辖市、自治区、特别行政区）
const specialMap = {
    '北京市': '北京', '天津市': '天津', '上海市': '上海', '重庆市': '重庆',
    '广西壮族自治区': '广西', '内蒙古自治区': '内蒙古', '西藏自治区': '西藏',
    '宁夏回族自治区': '宁夏', '新疆维吾尔自治区': '新疆',
    '香港特别行政区': '香港', '澳门特别行政区': '澳门'
};

let provinceName = data.name;
// 优先使用特殊映射
if (specialMap[provinceName]) {
    provinceName = specialMap[provinceName];
} else {
    // 通用处理：去除末尾的“省”、“自治区”、“市”
    provinceName = provinceName.replace(/(省|自治区|市)$/, '');
}

window.globalProvinceName = provinceName;
return provinceName;

省份核心指标查询（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;

省份核心指标分发（并行数据处理）：

同前面的核心指标分发处理方法

示例（总用户数）：

var item = data.find(item => item.name === 'total_users');
return [{ value: item ? item.value : 0 }];

其他分支只需修改 item.name === 'total_users'的条件即可

蓝图连线与数据流：

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

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

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

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

2.3.4 地图热力层根据用户数渲染颜色配置

提取 adcode 映射表（并行数据处理）：

• 在蓝图中添加“并行数据处理”节点，命名为“提取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;

查询所有省份的用户数（SQL请求节点）：

• 添加“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;

地图数据映射（并行数据处理节点）：

• 添加“并行数据处理”节点，重命名为“地图数据与用户数映射”。

• 处理方法中输入以下代码：

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;

在地图组件（基础平面地图）中，已经添加了子组件“区域热力层”。我们需要将映射后的数据导入该子组件。

• 将“地图数据与用户数映射”节点的输出端口连接到“区域热力层”的“导入热力值数据接口”

完整的蓝图数据流如下（热力渲染部分独立于点击联动）：

三、实验结果

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

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

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

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

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

四、问题与解决

本次实验没有遇到问题

五、实验总结

本次实验完整完成浏览器用户画像分析大屏的静态布局设计、数据接入与交互配置、多屏联动拓展全链路操作，将用户画像分析理论与数据可视化大屏实操深度结合，收获颇丰：

• 掌握用户画像大屏布局设计方法：能够基于用户画像统计表（user_profile_stats），结合分析需求合理规划大屏的信息结构与叙事逻辑，理解不同图表类型在用户画像分析中的适用场景与分析价值，学会将数据结果转化为可直观理解、支撑决策的用户洞察，并能站在 “数据产品” 角度思考大屏向不同受众传递价值的方式。
• 熟悉助睿 Max 蓝图编辑器的使用：理解了蓝图编辑器的基本概念，包括数据源、触发器、动作、并行数据处理，能够使用并行数据处理节点接收筛选器参数并分发给多个 SQL 请求节点，为不同图表组件编写带参数的 SQL 查询语句，掌握了筛选器与图表的联动交互配置方法。
• 掌握多场景大屏交互拓展能力：能够使用图层可见性控制实现大屏内容切换，借助按钮组件配置页面跳转或内容显示 / 隐藏，学会利用地图组件的交互事件实现省份下钻联动，能够配置指标卡组件根据地图点击动态更新数据，完成了市场分析大屏与用户画像大屏之间的联动整合。附录：图片链接