新手友好！基于零代码平台浏览器市场与用户画像分析-用户画像数据大屏与大屏交互制作全流程演示

一、实验背景

1.1 实验目的

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

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

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

1.2 实验环境

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

1.3 实验数据

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

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

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

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

该表结构如下：

二、实验步骤

2.1 用户画像数据大屏制作

2.1.1 大屏设计方案

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

参考图：

2.1.2 用户省份分布

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

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

• 哪些省份用户最多？

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

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

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

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

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

2.1.3 核心指标

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

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

（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 蓝图连接思路

节点连线说明：

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 蓝图连接思路

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 查询语句，掌握了筛选器与图表的联动交互配置方法。
• 掌握多场景大屏交互拓展能力：能够使用图层可见性控制实现大屏内容切换，借助按钮组件配置页面跳转或内容显示 / 隐藏，学会利用地图组件的交互事件实现省份下钻联动，能够配置指标卡组件根据地图点击动态更新数据，完成了市场分析大屏与用户画像大屏之间的联动整合。附录：图片链接