助睿数智实验：浏览器用户画像可视化大屏全套实操

Liuxuya24

47人浏览 · 2026-06-17 22:36:23

Liuxuya24 · 2026-06-17 22:36:23 发布

一、前言

本文完整记录实验 6-1 静态布局制作、实验 6-2 蓝图数据接入、实验 6-3 交互下钻配置三套连贯实训操作，基于助睿数智（Uniplore）一站式数据科学实验平台，使用助睿 Max 零代码大屏工具完成浏览器用户画像分析大屏开发，包含页面搭建、SQL 数据绑定、筛选器联动、Tab 大屏切换、地图省份下钻热力图全套流程，适合大数据、商业数据分析实训作业直接参考。

平台基础信息

平台全称：助睿数智一站式数据科学实验平台
可视化工具：助睿 Max（低代码数据大屏模块）
数据源：团队私有 MySQL 数据库，核心业务表user_profile_stats

整体实训目标

掌握大屏标准化布局设计，匹配用户画像业务分析逻辑
理解蓝图编辑器数据流、节点、全局变量、并行分发机制
实现下拉筛选器全图表数据联动刷新
完成双大屏 Tab 切换（市场分析 / 用户画像）
实现地图省份热力渲染、点击省份下钻查看单省指标

（示例图）

二、实验 6-1：浏览器用户画像分析 - 大屏静态布局制作

1 实验目的

基于前期加工完成的用户画像统计表user_profile_stats，搭建浏览器用户画像分析大屏静态页面，掌握大屏设计规范与组件使用：

根据用户画像业务需求搭建大屏信息结构与叙事逻辑
区分饼图、柱状图、地图、指标卡、轮播列表等图表适用场景
从数据产品视角完成可视化页面布局，支撑运营决策
熟练使用助睿 Max 图层管理、背景素材、各类基础组件

2 实验环境

在线实验平台：助睿数智 https://lab.guilian.cn/
可视化工具：助睿 Max 数据大屏
平台能力：全链路零代码，覆盖数据接入、ETL、AI 建模、可视化大屏；支持图层管理、拖拽搭建、GIS 地图、交互控件、千万级数据秒渲染、数字孪生 3D 场景

3 实验数据

使用预处理完成的user_profile_stats用户画像统计表，按浏览器维度统计人口属性分布，包含字段：

基础人口：性别、age 年龄、age_group 年龄段、edu 学历、job 职业、income 收入
地域维度：city_type 居住地类型、province 省份
聚合指标：browser_name 浏览器名称、user_count 用户数

4 整体分析框架

4.1 业务问题

表格

业务问题	对应分析维度	业务价值
核心目标用户是谁？年龄、性别、职业	性别、年龄段、学历、职业分布	产品功能迭代、广告内容定向投放
用户消费与教育水平如何？	学历、收入分层占比	定价策略、增值付费功能设计
用户区域分布在哪？	省份地图、TOP5 省份榜单	区域线下推广、渠道资源倾斜
不同浏览器人群特征差异	浏览器下拉筛选器	竞品差异化运营策略制定

大屏核心价值：不单纯罗列数字，将原始统计数据转化为可落地运营的用户人群洞察。

4.2 大屏设计方案（组件匹配表）

表格

模块	子模块	展示指标	选用组件	数据源表
数据概览核心指标	用户总览	用户总数、平均年龄、本科及以上占比、中高收入占比	数字翻牌器（指标卡）	user_profile_stats
人口基础信息	性别分布	男女用户占比	基础饼图	user_profile_stats
人口基础信息	年龄段分布	各年龄段用户数量	基础柱状图	user_profile_stats
人口基础信息	学历分布	各学历层级用户数量	水平条形图	user_profile_stats
人口基础信息	职业分布	各职业用户数量	基础柱状图	user_profile_stats
人口基础信息	收入分布	各收入分段用户数量	水平条形图	user_profile_stats
地域分布	居住地类型	城市 / 城郊 / 乡村占比	轮播饼图	user_profile_stats
地域分布	全国省份分布	各省用户空间热力	基础平面地图（区域热力层）	user_profile_stats
地域分布	用户 TOP5 省份	省份用户数排行榜	轮播列表	user_profile_stats
全局交互	浏览器筛选	多浏览器切换查看画像	下拉多选筛选器	静态浏览器列表

4.3 项目整体说明

大屏文件内置两套业务页面：市场分析大屏、用户画像大屏，共用画布，通过图层显隐切换。
操作规范：将市场分析全部组件打包为「市场分析组」，复制并重命名为「用户画像组」；实训阶段隐藏市场分析组件，仅编辑用户画像布局，页面切换交互在实验 6-3 完成。
图层管理功能：右侧图层面板支持拖拽排序、锁定、隐藏、分组，避免组件重叠干扰布局。

5 各模块设计思路与分步操作

5.1 用户省份分布（中国热力地图）

设计思路
- 识别区域市场热点省份、空白区域，支撑线下投放优先级；空间热力直观展示全国用户覆盖，适合作为大屏主视觉核心。
- 组件优势：地图可直观展示省份地理相邻关系，柱状图无法体现区域聚集特征。
- 助睿 Max 地图能力：基础平面地图支持热力层、散点层、飞线迁徙层；支持深色 / 浅色自定义地图样式，三维数字孪生地图拓展。
操作步骤
1. 画布添加「基础平面地图」组件，调整尺寸放置大屏中上部核心区域；新增子组件「区域热力层」。
2. 配置热力层样式：自定义颜色渐变、省份边界线宽、悬浮高亮样式，匹配大屏整体深色主题。

5.2 核心指标数字翻牌器

设计思路 4 个核心指标快速建立用户整体认知：总用户规模、用户年龄成熟度、高学历占比、付费潜力人群占比，放置地图左侧作为总览区。
组件优势：数字放大展示，无冗余元素，第一眼抓取核心业务结论。
操作步骤
1. 纵向排列 4 个「数字翻牌器」组件，分别设置标题：用户总数、平均年龄、本科及以上占比、中高收入占比。
2. 每个指标卡上方添加「单张图片」，填入指标标题背景素材链接，美化标题区域。
3. 配置翻牌器样式：开启千分位、自定义单位（万人、%）、数值动画、字体阴影。

5.3 用户数 TOP5 省份轮播榜单

设计思路：地图只能看趋势，榜单提供精确省份用户数值，二者互补，快速定位头部运营省份。
组件选择：轮播列表，节省布局空间，自带滚动动画。
操作步骤
1. 添加单张图片组件，填入排行榜背景素材。
2. 插入通用标题组件，设置榜单标题文字样式。
3. 添加轮播列表，调整行高、列宽、交替行底色、字体大小。

5.4 性别分布饼图

设计思路：区分男女用户占比，指导内容推荐、广告投放；性别仅 2-3 个分类，饼图可直观感知占比。
操作步骤：添加分区背景图 + 标题组件，插入基础饼图，调整内外圈半径、引导线、标签位置。

5.5 年龄段分布柱状图

设计思路：识别主力用户年龄段，指导产品功能设计；年龄段为有序区间，柱状图分布趋势清晰。
操作步骤：添加分区背景，选用基础垂直柱状图。

5.6 学历分布水平条形图

设计思路：学历文字较长，横向条形图避免文字重叠，便于阅读长分类名称。
操作步骤：添加分区背景，使用水平基础柱图。

5.7 职业分布柱状图

设计思路：判断用户使用场景（学生 / 职场 / 自由职业），针对性迭代配套功能。
操作步骤：添加分区背景，基础垂直柱状图展示各类职业用户数量。

5.8 收入分布水平条形图

设计思路：收入分层直接决定商业化变现方案，条形图清晰区分各收入区间体量。
操作步骤：添加分区背景，水平基础柱图展示收入分段数据。

5.9 居住地类型轮播饼图

设计思路：仅城市、城郊、乡村三类，饼图展示结构；选用轮播饼图增加大屏动态视觉效果。
操作步骤：分区背景 + 标题，插入轮播饼图组件，开启扇区自动轮播高亮。

5.10 浏览器下拉筛选器

设计思路：支持单 / 多浏览器切换，对比不同浏览器人群画像差异，实现全局图表联动。
组件选择：下拉多选组件，占用空间小，支持搜索、全选、清空。
操作步骤：画布右上角添加「下拉多选」交互组件，命名为浏览器筛选，预留 6 款浏览器静态选项配置位置，默认全选。

6 预览与静态布局总结

点击大屏右上角保存、全屏预览，统一校验：组件对齐、配色协调、背景素材完整、无重叠遮挡。
本实验仅完成静态页面搭建，无数据绑定；下一实验通过蓝图编辑器接入真实业务数据，实现图表数值填充与筛选联动。

三、实验 6-2：浏览器用户画像分析 - 大屏数据接入（蓝图编辑器）

1 实验目的

基于实验 6-1 完成的静态大屏，使用助睿 Max 蓝图编辑器绑定 MySQL 数据源，配置筛选器全局联动，掌握零代码数据流开发：

理解蓝图编辑器核心概念：触发器、SQL 查询、全局变量、并行数据分发
编写带动态参数的 SQL 语句，一次性批量查询多维度图表数据
配置下拉筛选器参数传递，实现所有图表同步刷新
掌握单行、多行数据拆分分发逻辑，匹配不同图表数据格式

2 实验环境

同实验 6-1，新增数据源：团队私有 MySQL 数据库，核心表user_profile_stats，新增 age 精确年龄字段。

3 实验数据表结构（更新后）

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='用户画像统计表';

4 整体蓝图逻辑说明

4.1 蓝图编辑器定义

可视化低代码数据流工具，通过拖拽节点、连线实现组件交互、数据请求、数据分发，无需前后端开发；支持全局变量、并行数据处理、多请求合并复用，保证多图表数据同步刷新。

4.2 核心概念

表格

概念	说明
数据源	MySQL 数据库连接配置，定义数据读取来源
SQL 查询节点	编写查询语句，读取业务表聚合数据
触发器	页面加载、筛选点击、地图点击等触发事件
全局变量	window.xxx，跨节点传递浏览器、省份筛选参数
并行数据处理	统一接收一份数据，拆分输出给多个图表

4.3 核心执行流程

大屏初始化 / 用户切换浏览器筛选器 → 触发全局浏览器参数更新
参数同步传递给两类 SQL 节点：维度全量数据、核心指标数据
两类 SQL 一次性查询全部图表所需数据，减少数据库请求次数
通过并行分发节点拆分数据，分别推送至饼图、柱状图、指标卡、地图、榜单
所有图表自动接收数据完成渲染刷新

4.4 全节点职责清单

节点名称	核心功能
页面加载触发器	大屏打开自动初始化，加载默认浏览器数据
浏览器筛选器	捕获用户选择的浏览器名称，触发数据重载
浏览器参数接收（并行处理）	存储选中浏览器至全局变量`GLOBAL_SELECTED_BROWSER`
维度数据 SQL 请求	UNION ALL 一次性查询性别、年龄、学历、职业、收入、居住地、省份全维度数据
核心指标 SQL 请求	查询总用户、平均年龄、高学历占比、中高收入占比 4 个指标
维度数据分发节点	按 dimension_type 过滤数据，分发给 7 个维度图表
核心指标分发节点	拆分 4 行指标数据，分别输出至 4 个数字翻牌器
各可视化组件	接收格式化数据并渲染展示

4.5 蓝图整体连线逻辑

页面加载 → 浏览器参数接收节点
浏览器筛选器点击事件 → 浏览器参数接收节点
浏览器参数接收输出 → 维度 SQL 请求、核心指标 SQL 请求
维度 SQL 执行成功 → 维度数据分发节点
核心指标 SQL 执行成功 → 核心指标分发节点
维度分发 7 条分支 → 性别 / 年龄 / 学历 / 职业 / 收入 / 居住地 / 省份榜单组件
核心指标分发 4 条分支 → 4 个核心指标卡

5 分步实验操作

5.1 前置准备：数据表新增 age 精确年龄字段

原表仅存年龄段区间，无法精准计算平均年龄，需修改 ETL 转换流重新生成数据表：

打开用户画像表加工转换流，排序组件新增 age 升序排序；
分组聚合组件保留 age 字段；
执行转换流，刷新user_profile_stats表结构。

5.2 将所有图表组件导出至蓝图编辑器

返回大屏画布，右键图层内所有组件（筛选器、所有图表、指标卡、轮播榜单），选择【导出到蓝图编辑器】；
切换顶部蓝图编辑器入口，画布内可查看全部导入组件节点。

5.3 添加浏览器参数接收并行处理节点

蓝图新增「并行数据处理」节点，命名：浏览器参数接收；

新增两段处理代码：

// 方法1：页面初始化全局基础地址
const BASE_URL = 'https://lab.guilian.cn';
window.GLOBAL_BASE_URL = BASE_URL;
return data;

// 方法2：接收筛选器选中浏览器存入全局变量
const SELECTED_BROWSER = data.value;
window.GLOBAL_SELECTED_BROWSER = SELECTED_BROWSER;
return { value: SELECTED_BROWSER };

筛选器静态配置 6 款浏览器名称，默认选中第一款浏览器。

5.4 维度数据 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

5.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

5.6 维度数据分发并行节点

新增并行数据处理节点「维度数据分发」，分 7 条分支分别过滤对应维度数据，示例分支代码：

性别饼图分支

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

学历、职业、收入、居住地、TOP5 省份榜单分支按对应逻辑过滤排序，TOP5 省份取前 5 条降序数据输出。

5.7 核心指标分发并行节点

新增并行节点「核心指标分发」，4 条分支分别匹配 4 个指标卡，示例总用户数分支：

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

其余分支修改匹配 name 字段：avg_age、high_edu_ratio、high_income_ratio。

5.8 蓝图节点连线

按照前文 4.5 节点连线逻辑完成全部节点连线，保证数据流完整闭环。

5.9 保存蓝图并预览测试

蓝图编辑器点击保存，返回大屏画布；
点击预览，测试功能：
- 页面加载自动加载默认浏览器全部图表数据；
- 切换下拉筛选器浏览器选项，所有图表、指标卡同步刷新对应数据；
- 地图、饼图、柱状图、榜单数值与数据库统计结果一致。

四、实验 6-3：2012 年浏览器全景分析 - 大屏交互设置

1 实验目的

在前两次实验基础上完善大屏高级交互，掌握图层联动、地图下钻、热力图渲染：

使用 Tab 列表组件实现市场分析 / 用户画像双大屏切换；
配置地图省份点击事件，下钻查看单省份核心指标；
实现地图热力层根据用户数量自动渲染深浅颜色；
掌握全局省份映射、adcode 行政区划匹配、动态 SQL 传参开发。

2 实验环境

同前两次实验，依赖已完成数据绑定的蓝图工程。

3 整体交互逻辑

3.1 双大屏 Tab 切换逻辑

两套画布组件分别打包为「市场分析组」「用户画像组」；
Tab 导航组件点击输出唯一 ID，蓝图通过分支判断控制图层显隐；
ID=1：显示市场分析，隐藏用户画像；ID=2：显示用户画像，隐藏市场分析。

3.2 地图省份下钻联动逻辑

用户点击地图省份区域 → 触发点击事件输出省份全称；
并行节点处理省份名称，转换为数据表存储简称存入全局变量globalProvinceName；
SQL 节点读取当前浏览器 + 选中省份，查询单省四项核心指标；
分发节点拆分数据，实时刷新右侧 4 个指标卡为单省数据。

3.3 地图热力分层渲染逻辑

页面加载完成后提取地图内置 GeoJSON，生成省份名称 - adcode 映射表；
根据当前筛选浏览器查询全部省份用户总量；
匹配 adcode 行政区划编码，格式化热力图标准数据；
数据推送至地图区域热力层，自动按用户数深浅渲染省份色块。

4 蓝图节点新增职责

表格

节点名称	功能说明
Tab 列表导航组件	捕获页面切换点击，输出 ID 标识
分支判断节点	判断 Tab ID，控制图层可见性
设置图层可见性动作	显示 / 隐藏市场 / 用户画像分组
省份名称转换节点	地图全称转数据表简称，存入全局变量
单省份指标 SQL 节点	根据浏览器 + 省份查询单省画像指标
单省指标分发节点	拆分单省数据推送至指标卡
adcode 映射提取节点	读取地图 GeoJSON，生成省份编码映射表
全省份用户查询 SQL	查询当前浏览器所有省份用户总数
热力数据格式化节点	匹配省份 adcode，生成热力图层标准数据

5 分步实操流程

5.1 配置 Tab 大屏切换交互

画布添加 Tab 列表组件，尺寸与顶部导航按钮重合；
Tab 配置：1 行 2 列，背景色、选中态透明度设为 0（透明隐藏 Tab 原生样式）；
Tab 数据配置两条记录：id=1（市场分析）、id=2（用户画像）；
将 Tab 组件、市场分析组、用户画像组导出蓝图；
蓝图新增分支判断节点，判断表达式data.id == 1；
- 满足分支：添加两个图层动作，显示市场分析组、隐藏用户画像组；
- 不满足分支：添加两个图层动作，隐藏市场分析组、显示用户画像组；
连线：Tab 点击事件 → 分支判断节点，完成切换逻辑。

5.2 地图省份点击下钻配置

5.2.1 省份名称转换并行节点

地图输出省份全称（如广西壮族自治区），数据表存储简称，配置映射转换代码：

const specialMap = {
    '北京市': '北京', '天津市': '天津', '上海市': '上海', '重庆市': '重庆',
    '广西壮族自治区': '广西', '内蒙古自治区': '内蒙古', '西藏自治区': '西藏',
    '宁夏回族自治区': '宁夏', '新疆维吾尔自治区': '新疆',
    '香港特别行政区': '香港', '澳门特别行政区': '澳门'
};
let provinceName = data.name;
if (specialMap[provinceName]) {
    provinceName = specialMap[provinceName];
} else {
    provinceName = provinceName.replace(/(省|自治区|市)$/, '');
}
window.globalProvinceName = provinceName;
return provinceName;

5.2.2 单省份指标查询 SQL 节点

const selectedProvince = window.globalProvinceName;
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}'
`;
return sql;

5.2.3 单省指标分发节点

同实验 6-2 核心指标分发逻辑，4 条分支分别推送至 4 个指标卡；

5.2.4 下钻数据流连线

地图区域热力层「点击区域时」事件 → 省份名称转换节点 → 单省 SQL 查询节点 → 单省指标分发节点 → 四个核心指标卡。

5.3 地图热力层自动渲染配置

5.3.1 adcode 行政区划映射提取节点

页面加载地图 GeoJSON 完成后自动执行，建立省份名称与编码映射：

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;
return mapping;

5.3.2 全省份用户统计 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
`;
return sql;

5.3.3 热力数据格式化节点

匹配省份与 adcode，输出热力图层标准数据格式：

function convertToMapData(data) {
  if (!Array.isArray(data) || data.length === 0) {
    return [];
  }
  return data.map(item => {
    const provinceName = item.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) area_id = "000000";
    return {
      name: provinceName,
      value: parseFloat(item.value) || 0,
      area_id: Number(area_id)
    };
  });
}
const result = convertToMapData(data);
return result;

5.3.4 热力图层数据流连线

地图 GeoJSON 加载完成 → adcode 映射节点；浏览器参数更新 → 全省份用户 SQL 查询 → 热力格式化节点 → 地图区域热力层导入数据接口。

5.4 最终预览与大屏发布

保存蓝图全部配置，返回大屏预览，校验三大交互功能：
1. Tab 切换：点击导航按钮，市场 / 用户画像页面正常切换；
2. 地图热力：切换浏览器，省份颜色随用户数深浅自动变化；
3. 省份下钻：点击任意省份，右侧指标卡刷新为该省专属数据；
点击大屏右上角【发布】，开启分享链接权限，复制分享地址即可在线访问完整可视化大屏。分享链接： http://47.109.66.142:30887/#/dataScreen/release?shareId=6c8835415fd44ee88317766691976922

五、全套实训问题与解决（作业通用踩坑汇总）

问题：筛选器切换浏览器，图表数据不刷新
- 原因：全局变量未正确传递、SQL 节点未绑定筛选器触发事件
- 解决：检查筛选器输出连线至参数接收节点，SQL 读取全局变量语法无误
问题：地图省份点击后指标卡数值为空
- 原因：省份全称 / 简称映射不匹配、数据表省份字段名称不一致
- 解决：完善省份映射表，去除省 / 市 / 自治区后缀统一匹配
问题：热力地图全部灰色无颜色区分
- 原因：adcode 映射提取失败、热力数据格式缺少 area_id
- 解决：确认 GeoJSON 加载完成再执行映射节点，格式化代码输出标准热力结构
问题：Tab 切换图层无变化
- 原因：分支判断表达式错误、图层可见性动作目标分组选错
- 解决：核对 Tab 输出 ID 与判断条件，重新绑定图层分组动作
问题：柱状图 / 条形图分类文字错乱、排序混乱
- 原因：未手动配置有序排序数组
- 解决：在分发节点增加年龄段、学历、收入分段排序逻辑

六、整套实训实验总结

1 实训收获

熟练掌握助睿 Max 大屏完整开发流程：静态布局→数据绑定→交互下钻；
理解零代码蓝图编辑器数据流设计思想，掌握全局变量、并行分发、动态 SQL 传参；
区分各类可视化图表业务适用场景，具备标准化用户画像大屏设计能力；
掌握 GIS 地图热力渲染、地理数据名称映射、省份下钻等高级可视化交互；
具备多页面大屏切换、多组件联动、海量数据聚合查询的实操能力。

2 助睿数智平台整体评价

Uniplore 一站式零代码数据平台覆盖数据 ETL、AI 建模、可视化大屏全链路，无需专业编程基础即可完成企业级数据分析项目；蓝图编辑器可视化数据流大幅降低交互开发门槛，内置 200 + 算法组件、20 + 可视化图表、完整 GIS 地图能力，兼顾教学实训与企业数字化落地，适合商业数据分析、大数据专业课程配套实训使用。

EazyDevelop社区

一站式 AI 云服务平台

更多推荐

CAN/CANopen/J1939 数据采集上云架构评测：IPCSUN PBC3222L 边缘解析与捷宸云免费生态解析

EazyDevelop社区

告别拖拉拽！开源平台Nexent：用一句话，让AI智能体自己“长”出来！

EazyDevelop社区

AI应用开发框架深度对比：LangChain、Dify、Coze怎么选？

选择AI应用开发框架，本质上是在开发效率和控制力追求极致控制、复杂逻辑→LangChain，前提是接受陡峭的学习曲线追求开发效率、企业级落地→Dify，可视化编排+RAG能力是杀手锏追求快速验证、零代码上手→Coze，插件生态和低门槛是最大优势一句话建议：如果你是开发者且项目复杂，选LangChain；如果你是团队负责人且需要快速交付，选Dify；如果你是非技术背景想做AI应用验证，选Coze。

EazyDevelop社区

所有评论(0)

查看更多评论

Liuxuya24

@Liuxuya24

已为社区贡献4条内容

助睿数智实验：浏览器用户画像可视化大屏全套实操

Liuxuya24

一、前言

平台基础信息

整体实训目标

二、实验 6-1：浏览器用户画像分析 - 大屏静态布局制作

1 实验目的

2 实验环境

3 实验数据

4 整体分析框架

4.1 业务问题

4.2 大屏设计方案（组件匹配表）

4.3 项目整体说明

5 各模块设计思路与分步操作

5.1 用户省份分布（中国热力地图）

5.2 核心指标数字翻牌器

5.3 用户数 TOP5 省份轮播榜单

5.4 性别分布饼图

5.5 年龄段分布柱状图

5.6 学历分布水平条形图

5.7 职业分布柱状图

5.8 收入分布水平条形图

5.9 居住地类型轮播饼图

5.10 浏览器下拉筛选器

6 预览与静态布局总结

三、实验 6-2：浏览器用户画像分析 - 大屏数据接入（蓝图编辑器）

1 实验目的

2 实验环境

3 实验数据表结构（更新后）

4 整体蓝图逻辑说明

4.1 蓝图编辑器定义

4.2 核心概念

4.3 核心执行流程

4.4 全节点职责清单

4.5 蓝图整体连线逻辑

5 分步实验操作

5.1 前置准备：数据表新增 age 精确年龄字段

5.2 将所有图表组件导出至蓝图编辑器

5.3 添加浏览器参数接收并行处理节点

5.4 维度数据 SQL 请求节点（一次性查询所有维度）

5.5 核心指标 SQL 请求节点

5.6 维度数据分发并行节点

5.7 核心指标分发并行节点

5.8 蓝图节点连线

5.9 保存蓝图并预览测试

四、实验 6-3：2012 年浏览器全景分析 - 大屏交互设置

1 实验目的

2 实验环境

3 整体交互逻辑

3.1 双大屏 Tab 切换逻辑

3.2 地图省份下钻联动逻辑

3.3 地图热力分层渲染逻辑

4 蓝图节点新增职责

5 分步实操流程

5.1 配置 Tab 大屏切换交互

5.2 地图省份点击下钻配置

5.2.1 省份名称转换并行节点

5.2.2 单省份指标查询 SQL 节点

5.2.3 单省指标分发节点

5.2.4 下钻数据流连线

5.3 地图热力层自动渲染配置

5.3.1 adcode 行政区划映射提取节点

5.3.2 全省份用户统计 SQL 节点

5.3.3 热力数据格式化节点

5.3.4 热力图层数据流连线

5.4 最终预览与大屏发布

五、全套实训问题与解决（作业通用踩坑汇总）

六、整套实训实验总结

1 实训收获

2 助睿数智平台整体评价

所有评论(0)

温馨提示：您尚未绑定手机号

Liuxuya24