浏览器用户画像分析大屏搭建——从布局到交互

一、实验背景

1. 实验目的

实验四我们完成了浏览器行为数据的ETL加工，生成了browser_coverage和browser_hourly两张统计表。实验五做了市场分析大屏。这次实验六的目标是搭建用户画像分析大屏，具体要做三件事：

• 大屏静态布局：在助睿Max上拖拽摆放各种图表组件，设计好整个页面的视觉结构；

• 数据接入：用蓝图编辑器把user_profile_stats表的数据接到各个图表上，并配置浏览器筛选器联动；

• 交互设置：配置大屏切换（市场分析↔用户画像）和地图省份点击联动。

三个子实验合起来就是一个完整的数据大屏开发流程：设计→接数→交互。

2. 实验环境

• 平台：助睿数智（Uniplore）一站式数据科学实验平台

• 登录地址：https://lab.guilian.cn/

• 可视化工具：助睿Max（低代码数据大屏工具，支持拖拽搭建、蓝图编辑器配置交互）

• 数据来源：团队私有数据库（MySQL）中的user_profile_stats表，该表按浏览器维度统计了用户在各人口属性上的分布，包含性别、年龄、学历、职业、收入、居住地类型、省份等字段

3. 整体处理流程

三个子实验的逻辑关系是这样的：

6-1 静态布局→ 在大屏画布上摆放组件，确定位置和样式
↓
6-2 数据接入→ 用蓝图编辑器写SQL、配数据流，让图表显示真实数据
↓
6-3 交互设置→ 配置大屏切换和地图下钻，让大屏能互动

说白了一个是“搭架子”，一个是“通管道”，一个是“装开关”。

二、实验步骤

2.1 大屏静态布局制作。先看参考图

2.1.1 添加“基础平面地图”组件，设置好大小、位置后，添加“区域热力层”子组件

点击“区域热力层”进入子组件配置页面，可根据自身需求配置颜色渐变、边界线宽、高亮样式等属性。

2.1.2 核心指标

根据参考图的样式，添加4个“数字翻牌器”纵向排列，设置标题和数值样式。每个“数字翻牌器”，使用“单张图片”组件设置背景，背景图链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/mbg.png

2.1.3 用户数

根据参考图，添加“单张图片”组件，作为排行榜区域背景，背景图链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/enrollment-data/top-list-bg.png。添加“通用标题”组件，调整好样式。添加“轮播列表”组件，调整好样式。

2.1.4 性别分布

使用“单张图片”组件设置区域背景，设置标题。添加“基础饼图”组件，调整大小和位置。

2.1.5 年龄段分布

使用“单张图片”组件设置区域背景，设置标题。助睿Max 支持多种柱状图：基础柱图、弧形柱图、水平基础柱图等等，这里使用基础柱图：

2.1.6 学历分布

使用“单张图片”组件设置区域背景，并设置好标题。我们选择助睿Max 的水平基础柱图：

2.1.7 职业分布

使用“单张图片”组件设置区域背景，设置标题。这里使用助睿Max的基础柱图：

2.1.8 收入分布

使用“单张图片”组件设置区域背景，设置标题。请选择助睿Max 的水平基础柱图：

2.1.9

使用“单张图片”组件设置区域背景，设置标题。我们使用助睿Max 的轮播饼图：

2.1.10 筛选器

在大屏顶部右侧位置，添加“下拉选择”组件，重命名为“浏览器筛选”，调整组件位置和大小。在组件右侧属性面板中，调整样式：

2.1.11 预览

点击“保存”并“预览”，检查整体布局是否协调、组件是否对齐、颜色是否一致。

2.2 大屏数据接入

本次实验只做全国范围的数据展示，包括：

• 全国省份地图（各省份用户数分布）

• 全国核心指标（总用户数、平均年龄、本科及以上占比、中高收入占比）

• 全国各维度分布（性别、年龄、学历、职业、收入、居住地类型）

先看参考图。

2.2.1 前置准备

修改目标表：在团队私有数据库中执行以下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='用户画像统计表';

修改转换流，在分组聚合中保留 age 字段：

打开“用户画像表加工”转换流，做以下修改：（1）修改排序记录组件，增加 age 字段的升序排序；（2）修改分组组件，分组字段更加 age；（3）执行转换流

2.2.2 组件导出

打开上一实验制作的“用户画像”数据大屏，在画布编辑器内，右键单击左侧图层栏或中间画布区的组件，选择导出到蓝图编辑器，即可将对应组件导出到蓝图编辑器中。

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

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

• 性别分布饼图

• 年龄段分布柱状图

• 学历分布条形图

• 职业分布柱状图

• 收入分布柱状图

• 居住地类型饼图

• 用户省份分布地图

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

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

导出成功后，单击“蓝图编辑器”切换到蓝图编辑器，可在导入节点列表中查看对应的节点。列表内所有节点都可供后续配置交互使用。

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

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

2.2.4 添加SQL请求节点

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

由于筛选器只能选单个浏览器，SQL 中直接用where browser_name = '${selectedBrowser}'就可以了。

2.2.5 添加核心指标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请求节点的“执行成功”连接到该节点。

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

分支1：性别分布（饼图）

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

return filtered.map(item => ({

name: item.name,

value: item.value

}));

分支2：年龄段分布（柱状图）

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: '用户数'

}));

分支3：学历分布（条形图）

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: '学历'

}));

分支4：职业分布（柱状图）

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

return filtered.map(item => ({

x: item.name,

y: item.value,

s: '职业'

}));

分支5：收入分布（柱状图）

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: '收入'

}));

分支6：居住地类型分布（饼图）

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

return filtered.map(item => ({

name: item.name === 'unknown' ? '未知' : item.name,

value: item.value

}));

分支7：省份排行榜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

}));

以上的输出结果不正确的话，可以在最终输出结果的节点的处理方法代码中添加以下代码，查看返回的数据：

// console.log("返回的数据",data)

2.2.7 添加核心指标分发节点

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

分支示例（总用户数）：

var item = data.find(item => item.name === 'total_users');

return [{ value: item ? item.value : 0 }];

2.2.8 连接节点

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

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

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

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

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

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

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

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

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

2.2.9 保存与预览

点击蓝图编辑器右上角的“保存”，返回大屏，再点击“预览”。

测试功能：

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

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

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

2.3 大屏交互设置

此小节基于前两个实验完成的市场分析大屏和用户画像大屏，使用助睿Max的蓝图编辑器，配置两个大屏之间的切换交互，以及地图省份点击联动指标卡的功能。

2.3.1 配置大屏切换

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

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

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

2.3.2 配置地图省份点击联动

（1）先做一个名称映射，代码如下：

// 省份特殊映射（直辖市、自治区、特别行政区）

const specialMap = {

'北京市': '北京', '天津市': '天津', '上海市': '上海', '重庆市': '重庆',

'广西壮族自治区': '广西', '内蒙古自治区': '内蒙古', '西藏自治区': '西藏',

'宁夏回族自治区': '宁夏', '新疆维吾尔自治区': '新疆',

'香港特别行政区': '香港', '澳门特别行政区': '澳门'

};

let provinceName = data.name;

// 优先使用特殊映射

if (specialMap[provinceName]) {

provinceName = specialMap[provinceName];

} else {

// 通用处理：去除末尾的“省”、“自治区”、“市”

provinceName = provinceName.replace(/(省|自治区|市)$/, '');

}

window.globalProvinceName = provinceName;

return provinceName;

（2）根据当前浏览器（window.GLOBAL_SELECTED_BROWSER）和省份（window.globalProvinceName），从user_profile_stats表中查询四个核心指标。为便于后续分发，使用UNION ALL将四个指标输出为多行，每行包含name（指标名）和value（数值）。

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）通过“并行数据处理”节点，我们按name字段过滤，将每个指标单独输出给对应的指标卡。

分支示例（总用户数）：

var item = data.find(item => item.name === 'total_users');

return [{ value: item ? item.value : 0 }];

其他分支类似。

（4）区域热力层的“点击区域时”事件 → 连接到 “提取地区名称” 节点；“提取地区名称” 的“执行成功”输出 → 连接到 “省份核心指标查询” 节点的“执行SQL”输入；“省份核心指标查询” 的“执行成功”输出 → 连接到 “省份核心指标分发” 节点的输入；“省份核心指标分发” 的四个输出分支 → 分别连接到四个核心指标卡的“导入数据接口”。

2.3.3 根据用户数给地图热力层渲染颜色

（1）提取 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;

（2）查询所有省份的用户数（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;

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

操作步骤：

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

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

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;

（4）导入地图热力层

操作步骤：

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

（5）完整蓝图数据流如下：

2.3.4 预览与发布

保存并发布，在弹出的发布对话框中打开发布分享开关，复制分享链接，打开浏览器，将复制的链接粘贴到地址栏中，即可在线观看

三、实验结果

1. 大屏展示效果

静态布局完成后的大屏整体效果，各组件位置、大小、配色基本与参考图一致：

2. 交互功能验证

3. 示例数据验证

以Chrome浏览器为例，从地图上点击“广东”省份，右侧指标卡显示：

• 总用户数：约XXX人

• 平均年龄：约XX岁

• 本科及以上占比：约XX%

• 中高收入占比：约XX%

数据与直接在数据库中查询select ... where browser_name='Chrome' and province='广东'的结果一致，说明数据流配置正确。

四、问题与解决

问题1：Tab列表组件点击后无反应

• 现象：配置好Tab列表组件的两列数据后，点击按钮没有触发任何切换效果。

• 原因：Tab列表组件虽然导入了蓝图，但图层的可见性控制动作没有正确连接“分支判断”节点的输出端口。

• 解决方法：检查蓝图连线，确保“判断选项卡”节点的“满足”输出端口连接到了“设置图层可见性”动作（市场分析组显示、用户画像组隐藏），“不满足”端口连接到了另一组动作（市场分析组隐藏、用户画像组显示）。重新连线后切换正常。

问题2：地图点击省份后指标卡不更新

• 现象：点击地图上的省份，右侧核心指标卡没有任何变化。

• 原因：排查后发现两个问题：一是地图组件的“点击区域时”事件没有开启交互事件开关（默认是关闭的）；二是省份名称映射不完整，部分省份简称匹配失败，导致查询没有返回数据。

• 解决方法：在地图组件属性面板中勾选“开启交互事件”。然后在“提取地区名称”节点的映射代码里补充了所有直辖市、自治区、特别行政区的映射规则，测试了几个省份都能正常匹配。

问题3：地图热力层数据不显示

• 现象：配置完数据映射节点并连接到热力层后，地图上只显示底图，没有颜色深浅。

• 原因：区域热力层的数据接口是“导入热力值数据接口”，我一开始连到了“导入数据”接口，两个接口不一样。

• 解决方法：检查组件动作列表，选择正确的“导入热力值数据接口”进行连线。同时确认映射输出的数据格式为{name, value, area_id}，其中area_id必须是数字类型（Number(area_id)）。修改后热力层正常渲染。

问题4：筛选器切换后地图热力层未刷新

• 现象：浏览器下拉框切换选项后，其他图表都刷新了，但地图颜色没变。

• 原因：热力层的数据更新依赖“各省份用户数查询”节点重新执行，但这个节点没有被筛选器的变化触发。

• 解决方法：在蓝图里增加一条连线：从“浏览器参数接收”节点的“执行成功”端口连接到“各省份用户数查询”节点的“执行SQL”端口。这样筛选器变化时，会先更新全局变量，然后触发SQL重新执行，最后热力层数据更新。调整后切换浏览器时地图颜色同步变化。

五、实验总结

1. 收获

通过这三个子实验，我完整走完了一个数据大屏从布局到交互的开发流程。

关于大屏设计：学会了在不同图表类型之间做取舍——饼图适合看占比（性别、居住地），柱状图适合看分布形态（年龄、职业），条形图适合类别名称长的场景（学历、收入），地图则是最直观的地理空间信息载体。指标卡放在最显眼位置，用大数字传达核心结论。

关于蓝图编辑器：这是一个让我比较惊喜的工具。以前写前端页面，数据请求、事件监听、状态管理都要写一堆代码。蓝图用节点连线的方式把这些逻辑可视化出来，学习成本不高但能做的事情不少——SQL请求、数据分发、条件判断、图层控制，都能拖拽完成。“并行数据处理”节点让一条数据流同时喂给多个图表，确实比每个图表单独发请求要高效。

关于交互设计：大屏切换通过控制图层显隐来实现，这个思路很巧妙。地图点击联动涉及名称映射、动态SQL、数据分发三个环节，每个环节都需要仔细处理数据格式。热力层渲染需要匹配adcode，这个坑踩完之后对地图可视化的工作机制有了更深理解。

2. 对平台的评价

助睿Max的可视化能力在这次实验中得到了比较充分的体现：

• 组件丰富度：地图、翻牌器、轮播饼图、轮播列表这些组件都派上了用场，样式自定义选项也够用。

• 图层管理：通过组来管理市场分析和用户画像两个大屏的内容，切换时只需要控制组的显隐，不需要逐个操作组件，这个设计方便。

• 蓝图编辑器：这是助睿Max的核心竞争力。数据流和交互逻辑可视化后，调试问题比看代码直观很多。SQL请求节点支持动态拼接，配合全局变量可以实现复杂筛选逻辑。

• 性能：数据量不算特别大，但地图渲染和图表刷新响应都很快，没有卡顿。