一、实验目的

本实验旨在通过助睿数智（Uniplore）平台完成浏览器用户画像分析数据大屏的全流程制作，涵盖静态布局设计、动态数据接入和高级交互配置三大阶段。具体目标如下：

1. 掌握助睿Max数据大屏的静态布局设计方法，学会使用指标卡、饼图、柱状图、条形图、中国地图、轮播列表、轮播饼图等多种图表组件
2. 理解数据可视化大屏的设计原则与布局规范，能够根据数据特征选择合适的图表类型
3. 掌握蓝图编辑器的使用方法，学会配置数据源、SQL请求节点、并行数据处理与全局变量传递
4. 实现下拉筛选器与所有图表的动态联动，完成数据大屏从静态布局到动态数据接入的完整闭环
5. 学会Tab切换、地图省份点击下钻、定时刷新等高级交互功能的配置

二、实验环境

（一）平台与工具

项目	说明
实验平台	助睿在线实验平台 (lab.guilian.cn)
可视化工具	助睿Max（数据大屏） + 蓝图编辑器
ETL工具	助睿ETL数据集成平台 (udi-studio)
数据库	团队私有MySQL数据库
产品官网	https://www.uniplore.com/

（二）数据概况

本实验使用的前期数据加工结果包含以下核心数据表，按浏览器维度（Chrome、IE、360安全浏览器、Firefox、QQ浏览器、搜狗浏览器等）组织，覆盖1000名用户、800余万条行为记录（约825MB）。

（三）核心数据表：user_profile_stats

user_profile_stats表按浏览器维度统计用户在各人口属性上的分布，是大屏可视化的核心数据来源：

字段名	说明	示例值
browser_name	浏览器名称	Chrome, IE, 360, Firefox
gender	性别	男, 女
age_group	年龄段	18-24, 25-34, 35-44, 45-54, 55+
education	学历	高中及以下, 大专, 本科, 硕士, 博士
occupation	职业	学生, 白领, 蓝领, 自由职业, 退休等
income_level	收入水平	低, 中低, 中, 中高, 高
residence_type	居住地类型	城市, 乡镇, 农村
province	省份	广东, 江苏, 浙江, 北京等
user_count	用户数	156, 89, 234等

除user_profile_stats外，本次实验数据体系还包含browser_coverage（市场覆盖率）、browser_weekly_active（周活跃趋势）、browser_frequency_stats（使用频率分布）、browser_multi_usage（多浏览器使用分布）和browser_weekday_weekend（工作日vs周末对比）等辅助统计表，共同支撑两大屏的数据需求。

三、实验内容与步骤

阶段一：大屏静态布局制作

步骤1 | 创建大屏与图层管理

在助睿Max中新建数据大屏项目。为在同一大屏中容纳“市场行为分析”和“用户画像分析”两个主题，采用图层分组管理策略——创建“市场分析”组件组和“用户画像”组件组，通过右侧图层面板控制各组的显示与隐藏，实现两大屏在同一个画布上共存。

步骤2 | 核心指标区设计（4个数字翻牌器）

在大屏顶部添加4个数字翻牌器组件，分别对应四项核心指标：覆盖用户数、平均年龄、本科以上占比、中高收入占比。每个翻牌器配置背景图标（mbg.png），调整字体大小和颜色使其醒目突出，作为用户进入大屏后的“第一眼信息”。

步骤3 | 省份分布地图配置

添加基础平面地图组件，在其下添加区域热力层子组件。配置颜色渐变方案（低值浅色→高值深色）、边界线宽度和颜色、省份高亮样式，使地理空间数据直观呈现各省份用户数量差异。

步骤4 | 性别分布——基础饼图

添加基础饼图组件展示男/女用户占比。性别类别少（仅男女两类），使用饼图可使扇形比例直觉感知更清晰。配置饼图颜色（男蓝女粉）、数据标签格式和居中图例。

步骤5 | 年龄分布——基础柱状图

添加基础柱状图展示各年龄段（18-24岁、25-34岁、35-44岁、45-54岁、55岁以上）用户统计。配置X轴（年龄段）、Y轴（用户数）和柱子颜色。柱状图适合多区间有序对比的场景。

步骤6 | 学历分布——水平基础柱图（条形图）

添加水平基础柱图展示各学历层次（高中及以下、大专、本科、硕士、博士）的统计分布。学历类别名称较长（如“高中及以下”），使用条形图可让文字标签水平排列，阅读更流畅。

步骤7 | 职业分布——基础柱状图

添加柱状图展示各职业（学生、白领、蓝领、自由职业、退休等）的用户统计。配置排序方式，使用户数最多的职业排在前面，便于快速识别主要用户群体。

步骤8 | 收入分布——基础柱状图

添加柱状图展示各收入段（低、中低、中、中高、高）的用户统计。收入为有序分类数据，柱状图能清晰展示各收入组间的数量差异和整体分布趋势。

步骤9 | 居住地类型——轮播饼图

添加轮播饼图展示城市、乡镇、农村三类居住地占比。轮播饼图通过动画效果动态高亮每个扇区，增强视觉吸引力，适合三类别数据的展示。

步骤10 | TOP5省份——轮播列表

添加轮播列表组件展示用户数TOP5省份排行。配置排名背景图（如金银铜牌图标）、通用标题和滚动动画，以动态轮播的方式依次展示各省份排名及对应数值。

步骤11 | 筛选器——下拉多选

添加下拉多选组件（位于交互分类中），配置浏览器选项列表：Chrome、IE、360安全浏览器、Firefox、QQ浏览器、搜狗浏览器等，默认选中“全部浏览器”。该组件支持单选或多浏览器组合筛选，为后续蓝图数据联动做好准备。

阶段二：大屏数据接入

步骤12 | 创建数据源

在平台“我的数据”模块中新建MySQL数据源连接。依次填写数据库连接信息（主机地址、端口号、数据库名称、用户名、密码），点击测试连接，确认连接成功后保存。此数据源将在后续SQL请求节点中被引用。

步骤13 | 导出组件到蓝图编辑器

在大屏画布中逐一右键各图表组件（指标卡、饼图、柱状图、地图、轮播列表等），选择“导出到蓝图编辑器”。也可批量选中所有组件后，点击顶部工具栏的蓝图编辑器图标一键导出。导出完成后每个图表在蓝图中对应一个可视化节点。

步骤14 | 配置全局节点（页面加载触发器）

在蓝图编辑器中拖入“全局节点”，该节点内置“页面初始化完成”事件。将此事件作为数据加载的主触发器，连接至SQL请求节点的“执行SQL”动作端口，实现大屏页面打开时自动发起数据查询请求。

步骤15 | 配置筛选器参数接收节点

拖入“并行数据处理”节点，用于接收下拉筛选器的“选项变更”事件。在该节点中编写JavaScript处理代码，将用户选中的浏览器名称存入全局变量，供后续SQL节点动态读取：

const SELECTED_BROWSER = data.value;

window.GLOBAL_SELECTED_BROWSER = SELECTED_BROWSER;

return { value: SELECTED_BROWSER };

步骤16 | 编写维度数据SQL请求节点

创建SQL请求节点，通过UNION ALL语句一次性查询7类分布数据（性别、年龄、学历、职业、收入、居住地、省份），统一输出为（dimension_type, name, value）的三列格式。使用全局变量动态拼接WHERE条件，实现按筛选器选中的浏览器过滤数据：

SELECT 'gender' AS dimension_type,

  gender AS name, COUNT(*) AS value

FROM user_profile_stats

WHERE browser_name = '${selectedBrowser}'

GROUP BY gender

UNION ALL

SELECT 'age', age_group, COUNT(*)

FROM user_profile_stats

WHERE browser_name = '${selectedBrowser}'

GROUP BY age_group

UNION ALL

SELECT 'education', education, COUNT(*)

FROM user_profile_stats

WHERE browser_name = '${selectedBrowser}'

GROUP BY education

UNION ALL  -- 同理: occupation, income,

          -- residence, province

步骤17 | 编写核心指标SQL请求节点

创建独立的SQL请求节点查询4项核心指标（总用户数、平均年龄、本科及以上占比、中高收入占比）。由于指标格式与维度数据不同（单行多列 vs 多行），使用单独的SQL节点更清晰：

SELECT

  COUNT(DISTINCT user_id) AS total_users,

  AVG(age) AS avg_age,

  SUM(CASE WHEN education IN

    ('本科','硕士','博士')

    THEN 1 ELSE 0 END) * 100.0

    / COUNT(*) AS higher_edu_ratio,

  SUM(CASE WHEN income_level IN

    ('中','高')

    THEN 1 ELSE 0 END) * 100.0

    / COUNT(*) AS mid_high_income_ratio

FROM user_profile_stats

WHERE browser_name =

  '${selectedBrowser}'

步骤18 | 配置维度数据分发节点

拖入“并行数据处理”节点，在其子节点中按dimension_type字段过滤拆分SQL查询结果。每个分支编写对应的JS映射代码，将数据格式化为各自图表组件要求的格式后，推送至对应图表的“导入数据接口”：

// 分支示例：性别 -> 饼图(需name/value)

const genderData = data.filter(

  d => d.dimension_type === 'gender'

);

return genderData.map(d => ({

  name: d.name, value: d.value

}));

// 分支示例：年龄 -> 柱状图(需x/y)

const ageData = data.filter(

  d => d.dimension_type === 'age'

);

// 自定义排序保证年龄顺序

const order = ['18-24','25-34',

  '35-44','45-54','55+'];

ageData.sort((a,b) => order.indexOf

  (a.name) - order.indexOf(b.name));

return ageData.map(d => ({

  x: d.name, y: d.value

}));

7个分发目标依次为：性别饼图、年龄柱状图、学历条形图、职业柱状图、收入柱状图、居住地轮播饼图、省份地图热力层。

步骤19 | 配置核心指标分发节点

添加“并行数据处理”节点，将核心指标SQL返回的单行结果拆分为4个独立数值。每个子节点提取对应字段（total_users / avg_age / higher_edu_ratio / mid_high_income_ratio），包装为[{value: xxx}]格式后，分别送入4个数字翻牌器的“导入数据接口”。

步骤20 | 连线与数据流配置

按照数据流转逻辑完成蓝图编辑器中的所有节点连线，形成两条核心数据链路：

链路①（初始化加载）：页面加载事件 → SQL请求节点 → 并行分发节点 → 各图表“导入数据接口”

链路②（交互刷新）：筛选器选项变更 → 参数接收处理 → SQL请求节点（重新执行） → 并行分发 → 各图表数据刷新

两条链路共享同一套SQL节点和分发节点，维护方便，数据一致性高。

步骤21 | 预览与测试

保存蓝图配置后，点击“预览”按钮查看大屏实际运行效果。分别测试：切换下拉筛选器中不同浏览器选项（如从Chrome切换到IE），逐一验证4个指标卡数值是否更新、7个图表数据是否同步变化、地图热力层颜色深浅是否正确反映数据变化。

阶段三：大屏交互设置

步骤22 | Tab大屏切换配置

在大屏顶部添加Tab切换按钮组，包含“市场分析”和“用户画像”两个选项。在蓝图编辑器中添加“分支判断”节点，根据Tab选中值判断应显示哪个组件组，再通过“设置图层可见性”动作节点控制“市场分析组”和“用户画像组”的显示与隐藏，实现两大屏无缝切换。

步骤23 | 地图省份点击联动

在蓝图编辑器中监听中国地图组件的“点击区域时”事件。当用户点击地图上某个省份时，触发以下流程：提取被点击省份名称 → 执行省份名称映射 → 发起省份级SQL查询 → 将结果推送至指标卡和海量图表，实现从“全国数据概览”到“单省数据详情”的下钻交互。

步骤24 | 省份名称映射处理

由于地图组件返回的省份名称为全称格式（如“江苏省”、“广东省”），而数据库中存储的是简称（“江苏”、“广东”），需要通过JavaScript建立名称映射表进行转换：

const nameMap = {

  '北京市':'北京','天津市':'天津',

  '上海市':'上海','重庆市':'重庆',

  '江苏省':'江苏','浙江省':'浙江',

  '广东省':'广东','四川省':'四川',

  '湖北省':'湖北','湖南省':'湖南',

  // ... 其余省份类推

};

const raw = data.name;

const mapped = nameMap[raw]

  || raw.replace(

    /省|市|自治区|壮族|回族/g,''

  );

window.GLOBAL_SEL_PROVINCE = mapped;

步骤25 | 地图热力层数据渲染

编写省份用户数统计SQL查询。将查询结果（省份名称 + 用户数）通过数据处理节点映射为区域热力层所需的数据格式（需包含省份行政区划代码adcode和数值value），导入到区域热力层的“导入热力值数据接口”，实现省份颜色深浅随用户数量实时变化。

步骤26 | 定时刷新配置

添加“定时器”逻辑节点，配置数据刷新间隔（例如每60秒自动刷新一次）。将定时器的触发事件连接至SQL请求节点的“执行SQL”端口，使大屏数据按设定间隔自动更新，无需人工干预。

步骤27 | 全局预览与综合调试

完成所有27个步骤后，逐一验收以下交互功能：（1）Tab切换——两个大屏是否无缝切换；（2）筛选器联动——切换浏览器后所有图表是否同步刷新；（3）地图省份下钻——点击省份后指标卡是否展示该省数据；（4）定时刷新——数据是否按设定间隔自动更新。发现任何问题及时返回蓝图编辑器排查节点配置和连线关系。

四、设计原则与核心概念

（一）数据大屏布局设计原则

设计原则	核心要求	具体做法
叙事逻辑清晰	自上而下、从左到右布局	顶部为概览指标，中部为主体图表，左侧为辅维度
核心指标突出	指标卡占据视觉焦点区	4个翻牌器置于大屏最顶部，“第一眼信息”即时传达
图表适配数据	根据数据特征选型	占比→饼图，趋势→折线图，对比→柱状图，地理→地图
视觉统一规范	配色、字体、间距一致	6款浏览器固定专属配色方案，全屏统一色系
交互优先	筛选器置于操作便捷位	下拉多选放在顶部，触发所有图表联动刷新

（二）图表选型对照表

数据维度	图表类型	选型理由
性别分布	基础饼图	仅2类，扇形比例直觉感知强，一目了然
年龄分布	基础柱状图	5个年龄段有序对比，柱高差异直观
学历分布	水平条形图	类别名称长（如“高中及以下”），水平排列易读
职业分布	基础柱状图	多类别横向对比，快速识别主要用户职业
收入分布	基础柱状图	有序分类数据，展示各收入段的梯度分布
居住地类型	轮播饼图	仅3类，动态轮播高亮各扇区，视觉效果更佳
省份分布	中国地图+热力层	地理空间数据，空间位置感知直观
TOP5省份	轮播列表	排行类数据，列表滚动展示更高效

（三）蓝图编辑器核心概念

概念	作用	本实验中的应用
数据源	预配置的数据库连接信息	连接团队私有MySQL数据库，读取user_profile_stats等表
触发器	驱动数据加载的事件	页面初始化完成（自动加载）、筛选器选项变更（交互刷新）、定时器到期（周期更新）
SQL请求节点	编写并执行SQL查询语句	通过UNION ALL一次性查出7类维度数据，减少数据库请求次数
并行数据处理节点	拆分SQL结果并格式化	按dimension_type过滤后分别映射为饼图/柱状图/地图所需的格式
全局变量	节点间共享数据的存储	window.GLOBAL_SELECTED_BROWSER存储筛选器选中值
分支判断节点	按条件选择不同执行路径	Tab切换时判断显示“市场分析”还是“用户画像”组件组

（四）数据流转总链路

整个大屏的数据流转可概括为以下闭环链路：

触发器（页面加载 / 筛选器变更 / 定时器到期） → 参数接收与处理 → SQL请求节点（动态拼接WHERE条件） → 并行数据处理（拆分+格式化） → 各图表组件“导入数据接口” → 图表重新渲染

该链路实现了从“用户操作/系统事件”到“数据库查询”再到“可视化更新”的完整自动化闭环，将大屏从静态看板升级为可自主探索的交互式分析工具。

五、常见问题与解决方案

在实验过程中，以下问题较为常见，此处汇总原因分析和解决方案供参考：

序号	问题现象	原因分析	解决方案
1	图表数据不刷新	筛选器节点未连接至SQL请求的“执行SQL”端口，或连线遗漏	在蓝图中补全筛选器→SQL节点的连线，确认事件类型为“选项变更”
2	指标卡显示undefined	返回数据的字段格式与翻牌器要求不匹配	确保每个翻牌器收到的数据格式严格为 [{value: xxx}]
3	柱状图顺序错乱	SQL查询结果未按预期排序，或默认按字母序排列	在JS分支代码中使用自定义order数组，手动调用sort()方法排序
4	地图省份名称不匹配	地图返回全称（如“江苏省”），数据库存储简称（“江苏”）	建立完整的名称映射表，使用正则表达式去除“省”/“市”/“自治区”等后缀
5	饼图/柱状图数据为空	字段名与组件接口要求不一致	饼图组件要求{name, value}字段；柱状图要求{x, y, s}字段，注意大小写
6	地图热力层无颜色	未正确导入热力值数据或adcode映射错误	确认数据包含adcode字段，并已正确连接到“导入热力值数据接口”
7	Tab切换后数据未更新	未将可见性切换事件连接至数据刷新链路	在分支判断节点后增加SQL执行触发，确保切换Tab时重新查询

六、实验结果与交互效果

完成全部配置后，大屏具备以下交互能力，核心交互效果总结如下：

交互功能	触发方式	数据来源	预期效果
页面自动加载	大屏打开时	全局节点→SQL请求	所有图表自动填充默认浏览器数据
筛选器联动	切换下拉多选选项	参数接收→SQL拼接WHERE条件	切换浏览器后全部图表（指标卡+7图表+地图）实时刷新
Tab双屏切换	点击顶部Tab按钮	分支判断→设置图层可见性	市场分析大屏和用户画像大屏无缝切换显示
地图省份下钻	点击中国地图某省份	点击事件→名称映射→省份SQL	指标卡和图表更新为该省专属数据
定时自动刷新	每60秒自动触发	定时器节点→执行SQL	数据自动更新，保持内容实时性

七、实验总结与心得

（一）技能收获

通过本次实验的完整实践，从大屏静态布局到蓝图数据接入再到交互设置，我掌握了以下核心技能：

1. 数据大屏布局设计能力——熟练使用助睿Max平台配置指标卡、饼图、柱状图、条形图、中国地图热力层、轮播列表、轮播饼图、下拉筛选器等多种可视化组件，理解组件选型与数据特征之间的匹配关系
2. 可视化设计原则——深刻理解并实践了“叙事逻辑清晰、核心指标突出、图表适配数据、视觉统一规范”四大设计原则，学会从用户视角规划信息层级
3. 蓝图可视化编程——掌握蓝图编辑器的完整使用方法，包括触发器配置、SQL请求节点编写（UNION ALL多维度查询）、并行数据处理分发、全局变量传递、分支判断等核心机制
4. 动态数据接入——打通了“数据源配置→编写动态SQL→数据格式转换→图表数据绑定”的完整链路，实现筛选器驱动的实时数据查询与刷新
5. 高级交互配置——实现Tab大屏切换、地图省份点击下钻、筛选器全量联动、定时自动刷新等企业级大屏交互功能
6. 零代码平台认知——深入体验了助睿数智（Uniplore）平台在数据科学全链路的零代码/低代码能力，理解其在降低数据可视化门槛方面的价值

（二）实验体会

本次实验让我对数据大屏可视化有了全面而深刻的认识。从数据加工到静态布局，再到动态数据接入和高级交互配置，形成了一条完整的技能链。实验采用助睿数智（Uniplore）平台，其零代码/低代码的设计理念大大降低了数据可视化大屏的开发门槛。通过拖拽式组件搭建和蓝图可视化编程，无需编写复杂的前端代码即可完成专业级数据大屏的制作。

实验的核心收获在于理解了数据大屏不仅仅是图表的堆砌，更是一个完整的“数据 → 图表 → 交互”系统工程。静态布局决定了信息呈现的清晰度，动态数据接入保证了内容的实时性，而交互配置则赋予用户自主探索数据的能力。三者缺一不可，共同构成了一个优秀的数据可视化大屏解决方案。

此外，通过本次实验，我也深刻体会到“图表选型要适配数据特征”这一原则的重要性。性别这类二分类数据适合用饼图直观感知比例，年龄、收入等有序多分类数据适合用柱状图对比差异，而学历等类别名称较长的场景则更适合使用条形图。正确的图表选型是数据可视化信息传达效率的基础。