助睿 Max 蓝图编辑器实战:数据联动、标签切换与地图交互实现

一、实验背景

1、实验目的

本实验依托已加工完成的用户画像统计表user_profile_stats，开展浏览器用户画像分析大屏静态布局设计，旨在帮助学习者结合用户画像分析需求搭建合理的大屏信息结构与展示逻辑，明晰各类图表的适用场景与分析作用，学会将数据转化为直观易懂、可辅助决策的用户洞察，并从数据产品视角思考大屏面向不同受众的价值传递方式。

2、实验环境

工具为助睿数智（Uniplore）在线实验平台：https://lab.guilan.cn/， 助睿数智（Uniplore）是AI驱动的一站式数据科学平台，覆盖从数据接入、ETL处理、机器学习建模到可视化展示的全链路零代码功能，产品官网为 Uniplore iDIS-大数据智能全流程服务平台-BI数据可视化工具

本次使用助睿 Max 数据大屏开展可视化开发，该平台为低代码数据可视化工具，依托丰富的图表与交互组件、灵活的图层管理功能，搭配拖拽式搭建与蓝图编辑器的低代码操作模式，上手简单、布局灵活；同时具备工业级海量数据处理能力，可实现千万级数据点秒级渲染，还兼容 3D 场景、GIS 地图及物联数据接入，支持数字孪生搭建，广泛应用于业务监控、用户洞察、营销分析等各类可视化场景。

1. 实验数据

本次实验基于《浏览器用户行为分析与流失预测 – 数据加工》的加工结果，搭配demographic用户属性原始表开展研究。已有成果包含：明细数据表daily_browser_detail、浏览器覆盖率统计表browser_coverage、时段活跃统计表browser_hourly，daily_browser_detail。

二、实验步骤

1、平台基础模块认知

（1）资源库用于对工作流的管理,包括新建、删除、修改、查看工作流的信息;导出导入工作空间;调度管理等操作。

（2）文件库用于保存工作流中需要用到的文件和工作流产生的文件。

（3）元数据管理是数据集成的重要基石,可以为工作流定义“运行配置”、“数据库”、“flink集群”等配置。

1. 设计实验项目

项目说明：

搭建数据大屏前需先明确使用受众与核心分析内容：围绕用户身份属性、教育收入、地域分布、不同浏览器用户特征差异四大维度展开分析，依次定位目标人群、指导产品设计与营销、规划区域运营、制定差异化竞争策略。本大屏核心价值并非单纯展示数据，而是解答产品用户群体画像问题，把抽象的用户属性转化为可落地、可指导业务的人群认知。

参考图：

助睿Max的“基础平面地图”组件支持多种子图层：区域热力层（按省份颜色深浅）、散点层（城市级别标记）、飞线层（展示流向关系）、迁徙层（动态流动效果）。本实验使用区域热力层即可满足需求，也可以根据实际数据复杂度叠加多个图层，实现更丰富的地理洞察。对于需要数字孪生的场景，助睿Max还支持三维地图、倾斜摄影模型、实时物联数据叠加，可直接构建智慧城市、工业仿真等数字孪生应用。

实验步骤：

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

点击区域热力层即可进入子组件配置界面，可按需设置颜色渐变、边界线宽、高亮样式等参数；平台地图组件还支持深色、清新等多种自定义地图样式，能够灵活适配大屏整体视觉风格。

分析用户画像，需要一个快速获取整体印象的概览区。 在大屏布局中，核心指标卡通常放置在地图的上方、下方或左侧，与地图形成“数据总览+空间分布”的呼应关系。

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

每个“数字翻牌器”的标题，使用“单张图片”组件设置背景，背景图链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/mbg.png

用户数TOP5省份排行榜

地图呈现整体分布趋势，排行榜直观展示排名与精确数值，便于运营锁定核心区域、规划投放与线下活动，同时通过排名变动挖掘潜力市场。该场景选用表格类呈现形式，结合助睿Max组件特性，最终采用轮播列表，它支持样式、内容、超链接及图片自定义，搭配轮播动画，兼顾展示效果与空间利用率，呈现简洁清晰。

根据参考图，添加“单张图片”组件，作为排行榜区域背景，背景图链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/enrollment-data/top-list-bg.png

添加“通用标题”组件，调整样式

添加“轮播列表”组件，调整样式

性别分布

分析浏览器用户性别构成是搭建用户画像的基础，不同性别用户的内容偏好差异明显，男性多关注科技、财经、体育类内容，女性更偏好娱乐、育儿、时尚类内容，该特征可直接指导广告投放与信息流推荐。本次通过分析男女用户占比，判断整体性别结构，以此优化内容推荐策略，同时监控比例波动，及时捕捉市场与产品动态变化。由于性别分类较少，饼图能借助扇形角度直观传递占比关系，可让观看者快速感知比例情况，因此选用饼图展示性别分布数据。

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

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

年龄段分布

分析浏览器用户年龄结构是挖掘用户需求的重要切入点，结合各年龄段占比，可判断主力用户群体，并据此明确产品功能设计方向：面向年轻群体可强化个性化、社交分享功能，面向成熟用户则侧重稳定性、安全性与办公协同能力；同时监测年龄结构变化，可及时预判品牌老化等潜在风险。由于年龄为多个有序区间分类，柱状图能清晰呈现数据分布与变化趋势，相比饼图更便于多类别数据对比，因此选择柱状图展示年龄分布。

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

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

学历分布

分析浏览器用户学历分布，能够进一步完善用户特征画像。不同学历的用户在信息获取习惯、专业内容接受度及新功能探索意愿上存在区别，通过研判高学历用户占比，可判断产品对高等教育群体的吸引力，并以此规划产品复杂度：若本科及以上用户居多，可增设高级自定义设置、开发者工具等功能。由于学历类别名称偏长，横向条形图可实现标签左对齐，阅读体验更佳，因此选用该图表展示学历分布数据。

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

职业分布

分析用户职业分布有助于掌握用户生活背景与使用场景，以此判别主流用户群体类型，针对性开展场景化功能设计：面向学生可增设学习辅助功能，面向职场人群则强化密码管理、云同步等办公功能；同时也能从占比偏低的职业群体中，挖掘后续推广与功能拓展的潜在机会。由于职业类别名称简短，采用柱状图可直观完成数据对比，因此选择该图表呈现职业分布数据。

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

收入分布

浏览器用户的收入数据直接服务于商业化策略。用户的收入水平是衡量其付费能力与消费意愿的核心指标之一，直接关系到产品商业化的天花板。

居住地类型分布

用户居住地类型（城市/城郊/乡村）反映了用户所处环境的数字化程度和消费习惯差异。城市用户通常网络基础设施更好、线上消费更活跃；城郊和乡村用户可能对某些本地化服务或轻量级应用有独特需求。了解这一分布有助于制定差异化的市场策略和产品功能适配。

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

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

最后，点击“保存”并“预览”

下面我们进入蓝图编辑器，为这些静态组件绑定真实数据，让大屏“活”起来。

基于前面实验完成的大屏布局，使用助睿Max的蓝图编辑器，将之前实验加工好的用户画像数据表接入到大屏的各个图表组件中，并配置筛选器实现多浏览器联动。

实验数据

user_profile_stats表

核心流程

页面加载或用户选择浏览器 → 触发两个SQL请求：

维度数据SQL：查询性别、年龄、学历、职业、收入、居住地类型、省份分布。

核心指标SQL：查询总用户数、平均年龄、本科及以上占比、中高收入占比。

浏览器筛选器 → 将选中的浏览器值传递给两个SQL请求节点。

维度数据分发：通过一个并行数据处理节点，按 dimension_type 分发到各个图表。

核心指标分发：通过另一个并行数据处理节点，将单行多列的指标数据拆分为四个独立数值，分别发送给四个指标卡。

各图表组件接收数据并展示。

在用户画像大屏展示中，为精准呈现平均年龄核心指标，需对原有数据表进行优化：原 user_profile_stats 表仅包含年龄段（age_group）字段，采用年龄段中值估算平均年龄会存在误差，因此需要在该表中新增 age 精确年龄字段，以便更准确地计算平均年龄，具体可在团队私有数据库中执行对应 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=’用户画像统计表’;

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

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

② 修改分组组件，分组字段更加 age

③ 执行转换流

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

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

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

性别分布饼图

年龄段分布柱状图

学历分布条形图

职业分布柱状图

收入分布柱状图

居住地类型饼图

用户省份分布地图

省份排行榜（轮播列表）

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

添加浏览器参数接收节点（并行数据处理）

大屏上的浏览器筛选器让用户可以选择某个具体的浏览器。当用户切换选择时，地图、饼图、柱状图等所有图表的数据都需要跟着变。

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

方法一（页面加载时执行一次，设置基础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 };

在数据大屏的数据准备环节，需添加SQL 请求节点并将其重命名为 “维度数据 SQL 请求”，该节点专门用于一次性查询性别、年龄、学历、职业、收入、居住地类型、省份等全量非指标维度数据，通过 UNION ALL 将多组维度查询结果合并，最终统一输出为(dimension_type, name, value)标准格式，为大屏各可视化组件提供规整的维度数据源。

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

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_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 = ‘/, ”);

}

window.globalProvinceName = provinceName;

return provinceName;

省份核心指标查询（SQL 请求节点）

该 SQL 请求节点依据全局变量中当前选中的浏览器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 = ‘{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 = ‘{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 = ‘{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 = ‘{selectedProvince}’

`;

console.log(“生成的省份核心指标SQL：”, sql);

return sql;

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

SQL 返回的是四行数据，而四个指标卡每个只需要一个数值。通过“并行数据处理”节点，我们按 name 字段过滤，将每个指标单独输出给对应的指标卡。

总用户数： var item = data.find(item => item.name === ‘total_users’);

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

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

为直观呈现全国各省份用户分布情况，采用颜色深浅表示用户数量（用户数越多，颜色越深），实现大屏常用的地图热力图效果。助睿 Max 地图组件依托区域热力层子组件支持自定义数据渲染，要求数据格式为{ name, value, area_id }，其中 name 为省份名称、value 为用户数、area_id 为行政区划代码（adcode）。实现流程分为四步：首先提取地图内置 GeoJSON 地理数据中的 adcode 与省份名称，建立省份名称→adcode映射表并存入全局变量；其次根据当前选中的浏览器，从 user_profile_stats 表统计各省用户总数；接着将用户数数据与 adcode 映射表匹配，格式化输出标准数据结构；最后将处理后的数据传入区域热力层，自动完成颜色渲染。相较于传统开发需手动加载 GeoJSON、配置颜色映射与事件绑定，助睿 Max 仅需配置数据接口即可快速实现地理可视化，大幅降低开发难度。

提取 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;

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

根据当前选中的浏览器（window.GLOBAL_SELECTED_BROWSER），统计每个省份的用户总数，并按用户数降序排列。

添加“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 = ‘{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;

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

保存并发布

三、实验结果

本次借助助睿 Max 平台，完成浏览器市场分析与用户画像一体化大屏开发。完成页面布局、组件配置与图层分组，优化数据表结构提升数据精度；通过蓝图编辑器接入数据源，实现浏览器筛选、模块切换、地图点击联动、热力图渲染等交互功能。大屏运行稳定，数据展示正常，可直观呈现用户多维度画像，满足业务分析需求。

四、问题与解决

1、平均年龄计算存在误差

原表只有年龄段字段，估算结果不准确。新增精确年龄age字段，修改数据流转规则，采用加权算法计算平均年龄，数据结果更精准。

2、地图省份名称与数据表不匹配

地图返回省份全称，数据表存储简称。编写名称映射规则，自动转换全称与简称，保证数据正常查询。

五、实验分析与总结

1、实验分析

本次大屏围绕用户性别、年龄、学历、职业、地域等维度搭建可视化图表，结合不同图表特性完成选型：饼图展示占比、柱状图呈现分类数据、热力图体现地域分布、排行榜展示排名数据，各类图表各司其职。依托低代码蓝图编辑器，实现数据联动、图层切换、地图交互，将原始数据表转化为可视化成果，能够帮助运营人员快速掌握用户特征，为产品运营、营销投放、功能优化提供数据支撑。

2、实验总结

通过本次实验，我掌握了助睿 Max 大屏组件使用、数据表优化、SQL 数据查询、蓝图逻辑配置等技能，理解了不同可视化图表的适用场景。同时认识到数据格式统一、字段匹配、逻辑节点配置对大屏正常运行的重要性。本次搭建的用户画像大屏，实现了数据可视化与交互应用结合，后续可结合业务需求进一步优化样式与交互逻辑，提升大屏实用性。