一、实验目的①熟练掌握助睿 Uniplore 平台数据集成 ETL与助睿 Max 数据大屏两大模块的操作流程理解从数据加工→数据表创建→可视化大屏搭建→交互联动配置的全链路业务流程。②掌握执行SQL脚本、表输入、排序记录、分组、表输出等 ETL 组件用法完成用户画像统计表的创建与数据加工。③掌握大屏基础组件图表、指标卡、地图、轮播列表的布局、样式配置完成浏览器用户画像大屏静态页面搭建。④理解蓝图编辑器核心逻辑学会使用并行数据处理、SQL 请求、分支判断、图层显隐、地图交互等节点实现筛选器联动、大屏切换、地图下钻等交互功能。⑤掌握 JS 代码在并行处理、SQL 动态参数、省份名称映射、数据格式化中的应用理解全局变量在多节点间传参的原理。二、实验环境与数据源2.1 实验环境实验平台助睿数智Uniplore大数据实训平台平台地址https://lab.guilian.cn/工具模块①数据集成ETL完成数据表创建、数据清洗、分组聚合、表输出②助睿 Max数据大屏完成页面布局、组件配置、蓝图交互、联动测试。操作方式可视化拖拽式零代码开发配合少量 JS 代码完成参数传递与数据格式化。2.2 实验数据源本次实验基于平台公共行为日志数据加工生成目标表 user_profile_stats用户画像统计表表结构如下字段名类型字段说明browser_nameVARCHAR(50)浏览器名称genderVARCHAR(10)用户性别ageINT用户精确年龄age_groupVARCHAR(10)年龄段分组eduVARCHAR(50)学历jobVARCHAR(50)职业incomeVARCHAR(50)收入区间city_typeVARCHAR(10)居住地类型provinceVARCHAR(50)省份user_countINT统计用户数业务目标基于该表搭建2012 年浏览器全景分析大屏分为市场分析、用户画像两大模块实现浏览器下拉筛选、双大屏切换、省份地图点击下钻、热力图渲染等交互效果。三、实验原理与整体设计思路3.1 整体流程原理本次实验分为数据加工和大屏可视化交互两大阶段①ETL 数据加工阶段抽取、转换、加载抽取读取原始用户行为、用户属性数据转换数据排序、分组聚合、字段规整补充年龄字段生成标准用户画像统计表加载将加工后的数据写入团队私有数据库 user_profile_stats 表。②大屏可视化阶段静态布局添加标题、背景、指标卡、各类图表、地图、下拉筛选器完成页面排版与样式美化蓝图交互通过蓝图编辑器搭建数据流利用全局变量传递浏览器、省份参数实现筛选联动、页面切换、地图下钻、热力图渲染。3.2 功能逻辑说明①浏览器筛选联动下拉选择框选中浏览器 → 并行处理节点接收值并存入全局变量 → SQL 请求读取变量过滤数据 → 所有图表、指标卡同步刷新。②双大屏切换使用 Tab 选项卡组件 分支判断节点控制 “市场分析组”“用户画像组” 图层显示 / 隐藏实现页面切换。三地图交互下钻点击地图省份 → 提取并标准化省份名称存入全局变量 → 联合浏览器参数查询该省份指标 → 指标卡刷新对应数据。④地图热力渲染提取行政区划编码 (adcode) → 按浏览器查询各省用户数 → 数据格式适配后导入热力层实现颜色深浅区分用户规模。四、实验详细步骤4.1 第一阶段ETL 数据加工创建用户画像统计表4.1.1 新建转换流与数据表创建①登录助睿平台进入数据集成模块新建项目创建转换流并命名为用户画像表加工。②拖拽执行一个 SQL 脚本组件连接团队私有数据库输入建表语句创建 user_profile_stats 用户画像统计表配置完成后执行脚本完成数据表初始化。4.1.2 原始数据抽取与预处理①拖拽表输入组件读取平台原始用户行为与属性数据源获取基础用户数据。②添加排序记录组件对数据按照 browser_name、age、gender 等字段升序排序保证分组数据有序。4.1.3 分组聚合加工①拖拽分组组件设置分组字段browser_name、age_group、gender、edu、job、income、city_type、province完成用户数据按多维度聚合统计。②聚合计算 user_count用户数量同时保留精确年龄 age 字段满足后续平均年龄计算需求。4.1.4 数据落地输出①拖拽表输出组件将分组聚合后的数据映射到 user_profile_stats 表对应字段。②检查字段映射关系确认所有业务字段一一对应保存配置。③点击运行执行转换流查看运行日志与步骤度量确认数据读取、处理、写入均无报错数据表生成完成。。4.2 第二阶段大屏静态布局搭建4.2.1 新建大屏与页面基础配置①进入数据大屏模块新建空白大屏设置画布尺寸 1920*1080上传统一背景图配置页面缩放方式为等比缩放宽度铺满。②使用单张图片、通用标题组件制作顶部 Banner、导航栏添加 “市场分析”“用户画像” 导航按钮。4.2.2 组件分区摆放与样式配置按照业务模块分区添加组件完成两大板块布局①数据概览区添加 4 个数字翻牌器指标卡用于展示总用户数、平均年龄、本科及以上占比、中高收入占比配置字体、数值样式、标题背景。②维度图表区性别、居住地类型使用基础饼图 / 轮播饼图年龄段、职业、收入使用基础柱状图学历使用水平基础柱图条形图省份排名使用轮播列表制作 TOP5 排行榜。③地理可视化区添加基础平面地图并新增区域热力层子组件用于展示各省用户分布热力效果。④筛选组件在页面右上角添加下拉选择框浏览器筛选器作为全局交互控件。4.2.3 筛选器基础配置①选中下拉选择框切换至数据面板添加静态选项IE 浏览器等多款浏览器设置title为前端展示名称value为数据库对应字段值。②设置默认选中项为IE浏览器点击刷新数据确保下拉选项正常加载。4.2.4 图层分组管理①打开右侧图层面板将所有市场分析相关组件编组为市场分析组用户画像组件编组为用户画像组。②初始状态设置显示用户画像组、隐藏市场分析组为后续页面切换做准备。。4.3 第三阶段蓝图编辑器交互配置核心代码与节点配置将页面所有图表、指标卡、地图、下拉框、Tab 选项卡导出到蓝图编辑器开始数据流与交互配置。4.3.1 配置浏览器筛选参数接收节点①拖拽并行数据处理节点命名为浏览器参数接收。②连线浏览器筛选器下拉框内容被选中 → 浏览器参数接收 输入端。③双击节点在处理方法中写入代码接收选中值并存入全局变量。④补充页面初始化代码保证大屏打开时参数正常初始化。4.3.2 配置两类 SQL 请求节点共创建两组 SQL 请求节点分别查询维度数据、核心指标数据所有 SQL 均读取全局浏览器参数实现动态过滤①维度数据 SQL 请求使用UNION ALL联合查询性别、年龄、学历、职业、收入、居住地、省份多维度数据统一输出 dimension_type、name、value 格式。②核心指标 SQL 请求统计总用户数、平均年龄、高学历占比、高收入占比四大指标按行输出指标名与数值。③连线浏览器参数接收 → 两个 SQL 请求节点执行 SQL 入口。4.3.3 配置数据分发并行节点①维度数据分发节点添加并行处理节点按dimension_type过滤数据分 7 个分支分别对应饼图、柱状图、条形图、轮播列表等组件每个分支编写过滤、排序、格式化代码。②核心指标分发节点添加并行处理节点按指标名称筛选单条数据分为 4 个分支分别对接 4 个数字翻牌器。③连线SQL 请求执行成功 → 对应分发节点分发各分支 → 对应图表 / 指标卡导入数据接口。4.3.4 配置双大屏切换交互①页面顶部添加Tab 列表组件设置 2 列ID 分别为1市场分析、2用户画像设置背景透明贴合导航按钮样式。②拖拽分支判断节点判断代码return data.id 1;③连线Tab列表当Tab点击时 → 分支判断节点。④分支配置满足条件id1添加设置图层可见性显示市场分析组、隐藏用户画像组不满足条件id2添加设置图层可见性隐藏市场分析组、显示用户画像组。4.3.5 配置地图省份点击下钻交互①开启基础平面地图点击区域时交互事件。②添加并行数据处理节点提取地区名称编写省份名称映射代码将地图全称转换为数据库简称存入全局变量 globalProvinceName。③添加省份核心指标 SQL 请求同时读取GLOBAL_SELECTED_BROWSER浏览器与globalProvinceName省份双参数查询单省份指标。④添加省份指标分发节点拆分数据并分发至 4 个指标卡完成下钻联动。⑤完整连线地图点击事件 → 省份名称提取 → 省份 SQL 查询 → 指标分发 → 指标卡。4.3.6 配置地图热力层渲染①添加并行节点提取adcode映射表读取地图地理数据生成省份名称 - 行政区划编码映射并存入全局变量。②添加各省份用户数查询SQL 节点按浏览器统计各省用户数量。③添加地图数据与用户数映射节点匹配 adcode、格式化数据适配热力层要求格式。④连线至地图区域热力层-导入热力值数据接口实现切换浏览器时热力图自动刷新。4.4 第四阶段保存、预览与功能测试①蓝图编辑器、大屏页面依次保存返回大屏编辑页点击预览。②功能逐项测试浏览器筛选切换下拉选项所有图表、指标卡数据同步更新大屏切换点击顶部导航两大板块正常切换、图层显隐无误地图热力省份颜色深浅随用户数量变化切换浏览器热力图同步刷新省份下钻点击任意省份顶部指标卡刷新为该省份对应数据。所有功能测试正常后执行发布生成分享链接。。实验结果分析①ETL 数据加工结果转换流运行成功无报错日志。原始用户数据经过排序、分组、聚合后成功生成 user_profile_stats 统计表字段完整、数据逻辑正确包含浏览器、性别、年龄、学历、省份等全维度统计数据为大屏提供可靠数据源。②大屏静态布局结果页面布局规整标题、导航、指标卡、各类图表、地图分区清晰样式统一组件大小、位置、配色符合大屏可视化设计规范两大业务板块分区明确。③交互功能结果浏览器下拉筛选切换不同浏览器全页面图表、指标、排行榜数据实时联动刷新筛选逻辑生效页面切换点击导航按钮市场分析、用户画像两大模块自由切换图层控制正常地图热力图颜色深浅直观区分各省用户规模数据渲染正常省份下钻点击地图省份指标卡精准展示该省份 当前浏览器的用户指标下钻功能实现。整体实验效果完全匹配实验要求数据流转、交互逻辑、页面展示均达到预期。六、实验中遇到的问题及解决方法①问题 1SQL 查询无法读取浏览器参数筛选不生效原因并行处理节点未正确将参数存入全局变量或 SQL 代码中变量名拼写错误。解决核对并行节点 JS 代码确认全局变量 GLOBAL_SELECTED_BROWSER 命名统一检查 SQL 语句中变量引用格式修正拼写错误重新连线测试。②问题 2地图点击省份后查询不到对应数据原因地图返回的省份全称如 “广西壮族自治区”与数据库简称“广西”不匹配。解决使用省份名称映射代码对直辖市、自治区、省份名称做标准化转换统一简称后再传入 SQL 查询。③问题 3Tab 切换图层无反应原因分支判断代码错误或设置图层可见性未绑定正确图层组。解决修正分支判断表达式 return data.id 1;重新选择目标图层组确认显隐配置相反重启预览。④问题 4ETL 分组后字段缺失表输出失败原因分组字段、表输出字段映射不完整。解决重新核对分组规则补全所有业务字段在表输出组件中重新获取流字段逐条映射至数据表字段。七、实验总结与心得体会本次实验完成了数据 ETL 加工到可视化大屏交互的全流程实操串联起数据处理、数据表设计、可视化布局、低代码交互开发等多项知识点对助睿 Uniplore 平台两大核心模块有了全面且深入的掌握。在 ETL 环节我进一步巩固了排序、分组、聚合、表输出等常用组件的使用深刻理解了 ETL 抽取、转换、加载的核心思想学会排查字段映射、数据写入等常见问题。在大屏搭建环节熟悉了不同图表饼图、柱状图、地图、轮播列表的适用场景掌握了大屏布局、样式美化、图层管理的技巧。蓝图编辑器是本次实验的重点与难点我理解了节点、连线、事件、动作、全局变量的工作逻辑学会通过少量 JS 代码完成参数传递、数据过滤、格式转换实现筛选联动、页面切换、地图下钻等复杂交互。同时也认识到可视化大屏不只是静态页面展示更需要结合业务需求设计交互逻辑让数据可查询、可下钻、可对比。本次实验锻炼了我的业务分析能力、问题排查能力和综合实操能力为后续大数据可视化、数据分析类课程与实训打下了坚实的基础。在后续学习中我会继续深入学习动态 SQL、复杂数据流、高级交互配置等内容提升低代码数据开发的综合能力。