实验6 浏览器用户画像可视化大屏搭建实验报告（精简版，约9200字）
一、实验6.1 用户画像大屏静态布局搭建
1.1 实验目的
本实验基于已完成ETL处理的`user_profile_stats`浏览器用户画像统计表，依托Uniplore助睿数智平台与助睿Max可视化大屏工具，完成用户画像分析大屏的页面静态布局搭建。通过本次实验需掌握以下能力：
1. 根据用户画像业务分析需求规划大屏信息结构、数据展示逻辑，搭建层次清晰的可视化页面；
2. 熟练区分饼图、柱状图、条形图、地图、指标卡、下拉筛选器等组件的适用场景，合理完成图表选型；
3. 将统计数据转化为可视化报表，提炼用户特征，为产品运营、市场投放、商业化决策提供数据支撑；
4. 从数据产品视角优化大屏布局，适配运营、决策等多类使用人群，提升大屏实用性与专业性。
1.2 实验环境
1.2.1 实验平台
实训平台地址：https://lab.guilian.cn/
依托Uniplore一站式大数据平台，覆盖数据接入、ETL清洗、机器学习建模、数据可视化全链路零代码操作，可满足高校实训与企业数据处理场景。平台官网：https://www.uniplore.com/。
1.2.2 可视化工具：助睿Max数据大屏
低代码拖拽式大屏开发工具，多用于用户画像、业务监控、营销复盘类可视化场景，核心优势：
1. 组件丰富：内置指标、图表、地图、列表、交互控件等上百种企业级可视化组件；
2. 图层管理高效：支持组件分组、锁定、显隐控制、层级调整，便于复杂大屏排版；
3. 低代码易上手：拖拽式布局搭配蓝图编辑器，无需编程即可完成页面搭建与交互配置；
4. 高性能渲染：支持千万级数据秒级加载，适配海量业务统计场景；
5. 拓展性强：支持GIS地图、3D数字孪生、物联网实时数据流接入。
1.3 实验数据
复用前期ETL生成的`user_profile_stats`用户画像统计表，以浏览器为分组维度，统计用户属性、地域相关数据，主要维度：
1. 用户基础属性：性别、年龄段、学历、职业、收入；
2. 用户地域属性：居住地类型、所属省份；
3. 统计规则：按照不同浏览器分组聚合，既支持全网整体分析，也可实现不同浏览器用户横向对比。
1.4 整体分析框架
1.4.1 核心业务分析目标
通过可视化拆解浏览器用户群体特征，解决四大业务问题：
1. 核心用户人群定位：通过年龄、性别、职业分布确定主力受众，指导产品功能迭代与宣传策略；
2. 用户消费能力分析：依托学历、收入数据，确定产品定价、商业化变现模式；
3. 区域市场分析：基于省份、居住地分布锁定高流量区域，指导广告投放与本地化运营；
4. 差异化运营分析：对比不同浏览器用户特征，制定针对性市场竞争方案。
1.4.2 大屏组件选型方案
|分析内容|选用组件|选型原因|
|----|----|----|
|性别、居住地占比|饼图/轮播饼图|类别少，直观展示部分与整体占比关系|
|年龄、职业数量对比|柱状图|多类别数值差异直观，适合有序区间数据展示|
|学历、收入分布|横向条形图|适配长文本类别名称，避免坐标轴文字重叠|
|全国省份用户分布|平面热力地图|保留地理空间关系，通过颜色深浅识别热点区域|
|大盘关键数值|数字翻牌器|视觉聚焦，快速展示用户总量、平均年龄、占比等核心指标|
|多浏览器数据切换|下拉多选筛选器|占用空间小，支持单选、多选、全选，实现全大屏数据联动筛选|
1.4.3 大屏整体模块规划
整套大屏包含市场分析、用户画像两大模块，本次仅搭建用户画像静态页面，借助图层分组实现两个大屏隔离，后续通过导航切换。用户画像大屏分为四大板块：
1. 数据概览：4个数字翻牌器，分别展示用户总数、平均年龄、本科及以上学历占比、中高收入用户占比；
2. 用户基础属性：性别饼图、年龄段柱状图、学历横向条形图、职业柱状图、收入横向条形图、居住地轮播饼图；
3. 地域分析模块：全国省份热力地图、用户量TOP5省份轮播排行榜；
4. 交互筛选模块：顶部浏览器下拉多选筛选器。
1.4.4 大屏预处理操作
1. 在图层面板复制原有“市场分析”分组，重命名为“用户画像”；
2. 隐藏原始市场分析图层组，仅保留用户画像分组用于布局设计；
3. 利用图层锁定、拖拽排序功能规整组件位置，避免布局重叠错乱；
4. 本次仅做静态页面搭建，大屏切换交互、数据绑定在后续实验完成。
1.5 各模块布局设计与操作步骤
1.5.1 省份热力地图模块
1. 设计思路：放置在大屏中心主视觉位置，直观展示全国用户地域聚集特征，定位热门省份与空白市场，体现产品全网覆盖规模。地理数据必须使用地图组件，柱状图、表格无法体现区域地理位置关系。
2. 操作步骤：
（1）左侧组件库「地图」分类拖拽基础平面地图，放置画布中心，调整尺寸比例；
（2）选中地图，在属性面板添加区域热力层子组件；
（3）配置热力层样式：设置渐变色系、省份边框宽度、悬浮高亮、标签文字样式；
（4）匹配大屏整体风格选择深色/浅色地图主题，本次仅配置热力层，暂不添加散点、飞线等多余图层。
1.5.2 核心指标数字翻牌器模块
1. 设计思路：放置在地图侧边，作为数据总览，快速展示用户规模、年龄结构、学历、消费能力四大核心维度，让使用者快速建立用户整体认知，数值类数据最适合指标卡展示。
2. 操作步骤：
（1）左侧「指标」分类拖拽4个数字翻牌器，纵向均匀对齐排列；
（2）依次设置标题：用户总数、平均年龄、本科及以上占比、中高收入占比；
（3）开启数值动画、千分位分隔，配置单位：人、岁、%；
（4）导入背景图片素材`mbg.png`作为指标卡底图，统一字体、边框、透明度样式。
1.5.3 TOP5省份排行榜模块
1. 设计思路：作为地图数据的补充，精准展示各省用户具体数值与排名，确定重点运营省份，轮播列表节省页面空间且动态效果更强。
2. 操作步骤：
（1）添加背景图片组件，导入排行榜背景素材；
（2）添加通用标题组件，设置标题“用户数TOP5省份排行榜”；
（3）拖拽轮播列表组件放入背景区域，设置行高、字体颜色、隔行变色；
（4）预设排名、省份名称、用户数量三列字段，等待后续绑定数据。
1.5.4 用户性别分布饼图模块
1. 设计思路：通过男女用户占比优化内容推荐、广告投放策略，仅三类数据适合饼图展示占比结构。
2. 操作步骤：添加背景与标题，拖拽基础饼图，配置分区颜色、图例、数据标签、引导线样式。
1.5.5 年龄段分布柱状图模块
1. 设计思路：判断用户年轻化程度，指导产品功能轻量化或专业化优化，有序年龄段适合柱状图对比。
2. 操作步骤：配置模块背景、标题，拖拽柱状图，设置柱体圆角、坐标轴、数据标签，预设X轴年龄段、Y轴用户数。
1.5.6 学历、收入横向条形图模块
1. 设计思路：学历反映用户功能接受度，收入决定商业化策略，长文本类别采用横向条形图避免文字挤压重叠。
2. 操作步骤：分别搭建两个模块，拖拽水平条形图，配置配色、数据标签，预设坐标轴字段。
1.5.7 职业分布柱状图、居住地轮播饼图模块
1. 职业柱状图：根据用户职业定位产品使用场景，规整短文本类别使用柱状图；
2. 居住地轮播饼图：城市、城郊、乡村三类数据，轮播饼图增加大屏动态视觉效果，展示区域用户结构。
1.5.8 浏览器下拉筛选器模块
1. 设计思路：实现多浏览器数据切换对比，放置页面右上角，占用空间小，支持单选、多选、清空筛选。
2. 操作步骤：拖拽下拉多选组件，设置默认全选浏览器，统一样式与大屏风格。
1.6 预览校验与实验小结
全部组件布局完成后保存大屏，进入全屏预览，校验组件对齐、间距、配色、标题规范性，对排版错位、样式不协调的内容微调优化。
本次实验仅完成静态页面布局与视觉美化，未配置数据绑定与交互逻辑，下一实验将通过蓝图编辑器接入MySQL数据表，实现筛选联动与图表数据动态渲染。
二、实验6.2 大屏数据接入与筛选联动配置
2.1 实验目的
在已完成的静态大屏基础上，使用助睿Max蓝图编辑器将`user_profile_stats`数据表接入所有可视化组件，配置浏览器下拉筛选器全局联动，切换浏览器时所有图表自动刷新。通过实验掌握：
1. 理解蓝图触发器、全局变量、并行数据处理、SQL数据源等核心概念；
2. 通过并行节点接收筛选参数，实现一次参数下发、多SQL复用查询；
3. 根据不同图表格式编写带参数的条件SQL语句；
4. 实现筛选器与全量图表、指标卡的交互联动。
2.2 实验环境
1. 实训平台：助睿在线实验平台；
2. 可视化工具：助睿Max数据大屏；
3. 数据源：团队私有MySQL数据库`user_profile_stats`表（本次新增`age`精确年龄字段）。
数据表核心字段：browser_name、gender、age、age_group、edu、job、income、city_type、province、user_count。
2.3 蓝图整体逻辑原理
2.3.1 蓝图编辑器介绍
可视化拖拽式数据流配置工具，通过节点连线管理组件交互规则，优势为多组件数据同步刷新、数据源复用、业务逻辑模块化，便于调试维护。
2.3.2 核心概念
- 数据源：数据库连接配置；SQL查询：自定义数据筛选聚合语句；
- 触发器：页面加载、下拉框选中、点击等触发事件；
- 全局变量：跨节点存储浏览器、省份等筛选参数；
- 并行数据处理：统一接收参数、批量分发数据给多个前端组件。
2.3.3 整体执行流程
1. 页面初始化或切换浏览器筛选器，触发参数接收节点，将选中浏览器存入全局变量；
2. 两路SQL同时执行：维度全量属性查询、四大核心指标查询；
3. 维度数据通过并行分发节点按维度类型拆分，分别推送饼图、柱状图、地图、排行榜；
4. 指标数据拆分后分配给4张数字翻牌器，所有组件自动渲染最新数据。
2.4 详细实验步骤
2.4.1 前期数据表改造
由于需要计算平均年龄，在数据表新增`age`精确年龄字段，重建数据表并修改ETL转换流：排序、分组组件加入age字段，重新运行任务写入数据。
2.4.2 组件批量导出至蓝图编辑器
将下拉筛选器、所有图表、地图、排行榜、四张指标卡全部右键导出至蓝图，方可配置数据交互。
2.4.3 浏览器参数接收并行节点配置
1. 创建并行数据处理节点，两个处理方法：初始化全局地址、接收筛选值存入`GLOBAL_SELECTED_BROWSER`；
2. 页面加载事件、筛选器选中事件同时接入该节点；
3. 配置6类浏览器下拉选项，默认选中IE浏览器。
2.4.4 维度数据统一SQL节点
使用`UNION ALL`一次性查询性别、年龄、学历、职业、收入、居住地、省份数据，通过`dimension_type`区分数据类型，接收全局浏览器参数做条件筛选。
2.4.5 核心指标SQL节点
查询用户总数、平均年龄、高学历占比、中高收入占比，返回多行单字段结构，便于后续拆分赋值。
2.4.6 维度数据7分支并行分发
分别对7类维度数据过滤、按业务规则排序，格式化适配饼图、柱状图、横向条形图、排行榜要求的数据结构，每个分支连线对应前端组件数据接口。
2.4.7 核心指标4分支并行分发
分别提取四项指标数值，一对一推送给四张数字翻牌器，空数据默认填充0避免报错。
2.4.8 节点连线、保存调试
按照数据流顺序完成所有节点连线，保存蓝图后预览测试：切换浏览器，全图表同步刷新，数据与数据表统计结果一致。
2.5 实验小结
本次实验完成大屏全组件数据绑定与筛选联动，掌握全局参数传递、动态SQL编写、并行数据分发的低代码可视化开发方式，实现静态大屏向交互式数据看板的升级，为后续地理下钻、页面切换交互打下基础。
三、实验6.3 大屏交互功能开发：页面切换+地图下钻+热力渲染
3.1 实验目的
基于双大屏图层分组，通过蓝图实现Tab导航页面切换；配置地图省份点击下钻，选中省份后指标卡展示区域数据；实现地图根据用户数量动态渲染热力颜色。掌握：
1. 利用图层显隐+分支判断实现多页面大屏切换；
2. 地图点击事件捕获、省份名称格式统一、全局参数传递；
3. 区域维度动态SQL查询、指标数据二次分发；
4. 地图行政区划编码映射，实现热力值动态渲染。
3.2 整体交互逻辑
1. 大屏切换：Tab点击返回ID，分支判断控制市场分析、用户画像两个图层组显隐；
2. 省份下钻：点击省份→名称标准化→全局存储省份参数→SQL查询该省份四大指标→指标卡刷新；
3. 热力渲染：地图加载GeoJSON后提取省份adcode编码，匹配省份用户数据，动态渲染省份颜色深浅。
3.3 实验操作步骤
3.3.1 Tab导航实现双大屏切换
1. Tab组件与顶部导航按钮重合，设置透明样式，配置ID=1（市场分析）、ID=2（用户画像）；
2. Tab、两个图层组导出蓝图，新增分支判断节点，根据ID控制两组图层显示/隐藏；
3. 保存后测试，点击Tab可无缝切换两套大屏内容。
3.3.2 省份名称格式化并行节点
对地图返回的省份全称做映射处理，统一直辖市、自治区、省份后缀名称，转换为数据表存储的简称存入全局变量。
3.3.3 省份指标SQL与数据分发
结合浏览器、省份双条件查询区域四大指标，并行节点拆分后推送四张指标卡，实现点击省份实时查看区域用户画像。
3.3.4 地图热力动态渲染配置
1. 地图GeoJSON加载完成后提取省份名称与adcode映射表存入全局；
2. SQL查询当前浏览器下全部省份用户量；
3. 数据格式适配热力层`name、value、area_id`标准格式，自动根据用户数渲染颜色深浅。
3.3.5 功能校验与大屏发布
保存蓝图配置，依次测试页面切换、地图下钻、热力图三大功能，调试无误后发布大屏，生成公开分享链接。
3.4 实验总结
本次实验完成低代码大屏高阶交互开发，熟练掌握图层管控、事件驱动开发、地理数据格式处理、多条件动态SQL开发，理解企业级数据可视化大屏从静态布局、数据接入、筛选联动、交互下钻到上线发布的全流程，充分体会低代码平台在数据分析业务中的高效应用价值。
