数据大屏进阶:三步搞定“市场分析”与“用户画像”无缝切换
实验6-1：浏览器用户画像分析-大屏静态布局制作
1 实验目的
本实验基于之前实验加工完成的用户画像统计表（user_profile_stats），完成浏览器用户画像分析大屏的静态布局设计。
通过本实验，学生应掌握：
根据用户画像分析需求，合理设计大屏的信息结构与叙事逻辑
理解不同图表类型在用户画像分析中的适用场景与分析价值
将数据结果转化为可直观理解、可支撑决策的用户洞察
站在“数据产品”角度，思考大屏如何向不同受众传递价值
2 实验环境
实验平台：助睿在线实验平台 https://lab.guilian.cn/
本次实验使用助睿数智（Uniplore）作为一站式数据科学平台。该平台覆盖从数据接入、ETL处理、机器学习建模到可视化展示的全链路零代码功能，适用于数据分析教学与企业数据加工场景。
助睿数智官网为 https://www.uniplore.com//
3 实验数据
本实验使用上一阶段加工完成的 user_profile_stats 表，该表按浏览器维度，统计了用户在各人口属性上的分布，包括：
基本信息：性别、年龄、学历、职业、收入
地域信息：居住地类型（城市/城郊/乡村）、省份
维度：按浏览器名称分组，支持整体分析与分浏览器对比
4 整体分析框架
4.1 业务问题
在开始搭建大屏之前，先明确：这张大屏要帮助谁、看懂什么？
业务问题 对应的分析维度
目标用户是谁？（年龄、性别、职业） 明确核心目标人群，指导产品设计与营销沟通
用户的教育与收入水平如何？ 影响产品复杂度设计、定价策略与商业化路径
用户分布在哪里？ 指导区域市场投放与本地化运营
不同浏览器的用户画像是否存在差异？ 识别差异化人群特征，制定针对性竞争策略
用户画像大屏的核心价值不是“罗列统计数字”，而是回答“谁在用我们的产品”，并将抽象的人口属性转化为可行动的人群认知。
4.2 大屏设计方案
最终整理用户画像大屏的具体方案如下：
模块 子模块 指标项 组件 关联数据表 备注
数据概览 用户概况 覆盖用户数 指标卡 user_profile_stats 满足筛选条件的用户总数
性别比例 指标卡 user_profile_stats 用户年龄均值
本科以上占比 指标卡 user_profile_stats 学历本科及以上的用户比例
中高收入占比 指标卡 user_profile_stats 月收入>5k的用户比例
基本信息 性别分布 饼图 user_profile_stats 男/女用户占比
年龄分布 柱状图 user_profile_stats 按年龄段统计用户数
学历分布 条形图 user_profile_stats 按学历层次统计用户数
职业分布 柱状图 user_profile_stats 按职业类别统计用户数
收入分布 柱状图 user_profile_stats 按收入段统计用户数
地域分布 城市 vs 乡镇分布 饼图 user_profile_stats 城市/城郊/乡村用户占比
用户省份分布 中国地图 user_profile_stats 展示各省份用户数量分布
省份用户数TOP5 轮播列表 user_profile_stats 展示用户数量top5省份
筛选器 浏览器选择 下拉多选 – 支持选择单个、多个或全部浏览器，默认全部
4.3 参考图
暂略
4.4 项目整体说明
本次大屏项目包含“市场分析”和“用户画像”两个大屏，通过顶部导航按钮切换。市场分析大屏已在上一个实验中完成，本次实验只制作用户画像大屏。因此，在开始布局前，需要先将上一个实验已制作的市场分析图表全部隐藏，避免与当前用户画像内容重叠干扰。
5 各模块设计思路与步骤
5.1 用户省份分布（中国地图）
添加基础平面地图组件，设置位置和大小，添加区域热力层子组件。在子组件配置中设置颜色渐变、边界线宽、高亮样式等属性。
5.2 核心指标
添加4个数字翻牌器纵向排列，设置标题和数值样式。每个翻牌器的标题使用单张图片组件设置背景，背景图链接替换为指定链接。
5.3 用户数TOP5省份排行榜
添加单张图片组件作为排行榜区域背景，设置背景图链接。添加通用标题组件，调整样式。添加轮播列表组件，调整行高、列宽、字体、交替行背景色等样式。
5.4 性别分布
使用单张图片组件设置区域背景和标题。添加基础饼图组件，调整大小和位置。
5.5 年龄段分布
使用单张图片组件设置区域背景和标题。添加基础柱图组件。
5.6 学历分布
使用单张图片组件设置区域背景和标题。添加水平基础柱图（横向条形图）。
5.7 职业分布
使用单张图片组件设置区域背景和标题。添加基础柱图组件。
5.8 收入分布
使用单张图片组件设置区域背景和标题。添加水平基础柱图。
5.9 居住地类型分布
使用单张图片组件设置区域背景和标题。添加轮播饼图组件。
5.10 筛选器
在大屏顶部右侧添加下拉选择组件，重命名为“浏览器筛选”，调整位置和大小，在属性面板中调整样式（边框、背景、字体颜色等），默认选中“全部浏览器”。
6 预览与总结
点击保存并预览，检查整体布局是否协调、组件是否对齐、颜色是否一致。
实验6-2：浏览器用户画像分析-大屏数据接入
1 实验目的
本实验基于上一实验《浏览器用户画像分析-大屏静态布局制作》完成的大屏布局，使用助睿Max的蓝图编辑器，将之前实验加工好的用户画像数据表接入到大屏的各个图表组件中，并配置筛选器实现多浏览器联动。
通过本实验，学生应掌握：
理解蓝图编辑器的基本概念（数据源、触发器、动作、并行数据处理）
使用并行数据处理节点接收筛选器参数并分发给多个SQL请求节点
为不同图表组件编写带参数的SQL查询语句
配置筛选器与图表的联动交互
2 实验环境
实验平台：助睿在线实验平台 https://lab.guilian.cn/
本次实验使用助睿数智（Uniplore）作为一站式数据科学平台。该平台覆盖从数据接入、ETL处理、机器学习建模到可视化展示的全链路零代码功能，适用于数据分析教学与企业数据加工场景。
助睿数智官网为 https://www.uniplore.com//
可视化工具：助睿Max（数据大屏）
助睿Max 是低代码数据可视化平台，支持零代码拖拽搭建、多种图表组件、地图可视化、交互筛选等能力，适用于业务监控、用户洞察、营销战报等场景。
助睿Max核心优势：
组件丰富：覆盖所有常见图表和交互控件，满足企业级可视化需求
图层管理：支持图层堆叠、锁定、隐藏、排序，复杂布局轻松实现
低代码操作：拖拽式搭建 + 蓝图编辑器，无需复杂编程即可完成大屏布局与数据交互配置
工业级数据处理能力：支持海量数据实时接入与渲染，千万级数据点秒级响应，满足企业级生产环境要求
支持数字孪生：支持3D场景、GIS地图、实时物联数据接入，可快速构建数字孪生可视化系统
数据来源：团队私有数据库（MySQL）
本实验将重点使用蓝图编辑器完成数据接入与筛选器联动配置。
3 实验数据
本实验使用上一阶段加工完成的 user_profile_stats 表，该表结构如下：
字段 类型 说明
browser_name VARCHAR(50) 浏览器名称
gender VARCHAR(10) 性别
age_group VARCHAR(10) 年龄段
edu VARCHAR(50) 学历
job VARCHAR(50) 职业
income VARCHAR(50) 收入
city_type VARCHAR(10) 居住地类型
province VARCHAR(50) 省份
user_count INT 用户数
4 整体蓝图逻辑说明
4.1 什么是蓝图编辑器？
蓝图编辑器是助睿Max中用于配置数据流和交互逻辑的可视化编程工具。它采用“节点-连线”的方式，帮助您自由管理可视化应用中多个组件之间的交互关系。
蓝图编辑器的优势：
蓝图编辑器可以保证交互和数据的实时性和同步性。
蓝图编辑器支持数据请求合并和数据分发的功能。
蓝图编辑器可模块化拆分，只需要专注于业务规则和交互需求即可。
4.2 核心概念
概念 说明
数据源 数据库连接配置，定义数据从哪里来
查询 SQL语句，定义取什么数据
触发器 触发数据加载的事件（如页面加载、组件点击、定时刷新等）
动作 触发器执行后的操作（如查询数据、刷新图表）
变量 用于在查询之间传递参数（如筛选器选中的浏览器名称）
4.3 核心流程
页面加载或用户选择浏览器 → 触发两个SQL请求：
维度数据SQL：查询性别、年龄、学历、职业、收入、居住地类型、省份分布。
核心指标SQL：查询总用户数、平均年龄、本科及以上占比、中高收入占比。
4.4 各节点职责
节点 职责
页面加载 大屏打开时自动触发一次数据加载
浏览器筛选器 用户选择浏览器后，触发数据刷新，并将选中的浏览器值传递给下游
浏览器参数接收 并行数据处理节点，接收筛选器参数，存储到全局变量
维度数据SQL请求 一次性查询所有维度数据（性别、年龄、学历、职业、收入、居住地类型、省份），输出格式 (dimension_type, name, value)
核心指标SQL请求 查询四个核心指标（总用户数、平均年龄、本科及以上占比、中高收入占比），输出单行多列格式
维度数据分发 并行数据处理节点，按 dimension_type 过滤，格式化后分发给7个图表
核心指标分发 并行数据处理节点，将单行多列数据拆分为四个独立数值，分发给四个指标卡
各图表组件 接收数据并渲染
4.5 本实验范围说明
本次实验只做全国范围的数据展示，包括：
全国省份地图（各省份用户数分布）
全国核心指标（总用户数、平均年龄、本科及以上占比、中高收入占比）
全国各维度分布（性别、年龄、学历、职业、收入、居住地类型）
点击省份查看该省份核心指标数据将在下一实验中完成。
4.6 完整蓝图连接示意图
暂略
助睿Max蓝图编辑器亮点：通过拖拽节点、连线即可完成复杂的交互逻辑，无需编写复杂代码。并行数据处理节点支持一个数据源同时分发到多个图表，实现高效的数据复用。
节点连线说明：
起点节点 终点节点 连线含义
页面加载（页面初始化完成） 浏览器参数接收（输入） 大屏打开时触发参数初始化
浏览器筛选器（下拉框内容被选中） 浏览器参数接收（输入） 用户选择浏览器后触发
浏览器参数接收（输出） 维度数据SQL请求（执行SQL） 传递浏览器参数
5 实验步骤
5.1 前置准备：添加年龄字段
在团队私有数据库中执行SQL，重建 user_profile_stats 表并增加 age 字段。打开“用户画像表加工”转换流，修改排序记录组件和分组组件（增加 age 字段），重新执行转换流。
5.2 组件导出到蓝图编辑器
打开“用户画像”大屏，右键将以下组件依次导出到蓝图编辑器：浏览器筛选器、性别分布饼图、年龄段分布柱状图、学历分布条形图、职业分布柱状图、收入分布柱状图、居住地类型饼图、用户省份分布地图、省份排行榜、核心指标卡（总用户数、平均年龄、中高收入占比）。切换到蓝图编辑器页面查看导入的节点。
5.3 添加浏览器参数接收节点（并行数据处理）
添加并行数据处理节点。添加两个处理方法：方法一（页面加载时设置基础URL），方法二（每次筛选器变化时，将选中的浏览器值存入全局变量 window.GLOBAL_SELECTED_BROWSER）。配置浏览器筛选器的静态选项（6个浏览器），设置默认选中值为“IE浏览器”。
5.4 添加SQL请求节点（一次除指标外所有维度数据）
添加SQL请求节点，重命名为“维度数据SQL请求”。编写SQL，从全局变量获取选中的浏览器值，使用 UNION ALL 查询 gender、age_group、edu、job、income、city_type、province 的分布数据，输出格式为 (dimension_type, name, value)。
5.5 添加核心指标SQL请求节点（单独查询四个指标）
添加SQL请求节点，重命名为“核心指标SQL请求”。编写SQL，从全局变量获取选中的浏览器值，查询总用户数、平均年龄、本科及以上占比、中高收入占比四个指标，输出格式为 (name, value)。
5.6 添加维度数据分发节点（并行数据处理）
添加并行数据处理节点，重命名为“数据分发”，将维度数据SQL请求节点的执行成功连接到该节点。为每个图表添加一个处理方法，按 dimension_type 过滤数据并排序，格式化输出。
5.7 添加核心指标分发节点（并行数据处理）
添加并行数据处理节点，重命名为“核心指标分发”，将核心指标SQL请求节点的执行成功连接到该节点。按 name 字段过滤，每个指标卡单独输出 value。
5.8 连接节点
按照节点连线说明，依次连接所有节点。
5.9 保存与预览
保存蓝图配置，返回大屏预览。测试：大屏打开时默认显示第一个浏览器的数据；选择其他浏览器后，所有图表应刷新为新浏览器的数据。
实验6-3：2012年浏览器全景分析-大屏交互设置
1 实验目的
使用图层可见性控制实现大屏内容切换
使用按钮组件配置页面跳转或内容显示/隐藏
使用地图组件的交互事件，实现省份下钻联动
配置指标卡组件根据地图点击动态更新数据
2 实验环境
实验平台：助睿在线实验平台 https://lab.guilian.cn/
本次实验使用助睿数智（Uniplore）作为一站式数据科学平台。该平台覆盖从数据接入、ETL处理、机器学习建模到可视化展示的全链路零代码功能，适用于数据分析教学与企业数据加工场景。
助睿数智官网为 https://www.uniplore.com//
可视化工具：助睿Max（数据大屏）
助睿Max 是一站式数据可视化平台，支持零代码拖拽搭建、多种图表组件、地图可视化、交互筛选等能力，适用于业务监控、用户洞察、营销战报等场景。
助睿Max核心优势：
3 整体交互逻辑说明
3.1 大屏切换逻辑
市场分析和用户画像两个大屏实际上是在同一个大屏文件中，通过控制图层的可见性来实现切换。
实现原理：通过 tab列表组件实现。将市场分析的所有组件放入“市场分析组”，用户画像的所有组件放入“用户画像组”。tab列表组件设置2列（“市场分析”和“用户画像”），每列设置不同的ID（如 “id”: 1 和 “id”: 2），背景设为透明以融合导航栏样式。点击某列时，根据ID控制两个组的可见性：显示对应组，隐藏另一组。
助睿Max图层管理优势：通过“图层”面板可以轻松控制组件的显示/隐藏，无需编写代码。配合蓝图编辑器，可以实现按钮与图层可见性的联动。
3.2 地图省份点击联动逻辑
在用户画像大屏中，点击地图上的某个省份时，右侧的四个核心指标卡（总用户数、平均年龄、本科及以上占比、中高收入占比）需要更新为该省份的数据。
用户点击省份 → 地图组件触发“点击区域”事件 → 蓝图接收省份名称 → SQL请求查询该省份的核心指标 → 指标卡刷新数据
4 整体蓝图逻辑说明
4.1 什么是蓝图编辑器？
蓝图编辑器是助睿Max中用于配置数据流和交互逻辑的可视化编程工具。它采用“节点-连线”的方式，帮助您自由管理可视化应用中多个组件之间的交互关系。
蓝图编辑器的优势：
蓝图编辑器可以保证交互和数据的实时性和同步性。
蓝图编辑器支持数据请求合并和数据分发的功能。
蓝图编辑器可模块化拆分，专注单个的交互链路，不需要考虑代码的整理和规范，只需要专注于业务规则和交互需求即可。
4.2 核心概念
概念 说明
数据源 数据库连接配置，定义数据从哪里来
查询 SQL语句，定义取什么数据
触发器 触发数据加载的事件（如页面加载、组件点击、定时刷新等）
动作 触发器执行后的操作（如查询数据、刷新图表）
变量 用于在查询之间传递参数（如筛选器选中的浏览器名称）
4.3 核心流程（大屏切换）
用户点击tab列表中的“市场分析”列 → 触发点击事件，输出ID 1
蓝图接收ID → 设置“市场分析组”可见，设置“用户画像组”隐藏
用户点击tab列表中的“用户画像”列 → 触发点击事件，输出ID 2
蓝图接收ID → 设置“市场分析组”隐藏，设置“用户画像组”可见
4.4 核心流程（地图点击联动）
用户点击地图上的省份区域 → 触发“点击区域”事件
地图组件 → 输出被点击的省份名称
省份参数接收节点 → 接收省份名称，存储到全局变量
省份核心指标查询节点 → 读取省份名称和当前浏览器，查询该省份的核心指标
省份核心指标分发节点 → 将查询结果拆分为4个独立数值
四个核心指标卡 → 接收新数据并刷新显示
4.5 各节点职责
节点 职责
tab列表组件 提供“市场分析”和“用户画像”两个选项，捕获用户点击，输出对应的ID
基础平面地图 展示省份分布，捕获用户点击的省份区域
省份参数接收 接收省份名称，存储到全局变量
省份核心指标查询 根据省份和浏览器，查询该省份的核心指标
省份核心指标分发 将查询结果拆分为4个独立数值
四个指标卡 显示该省份的用户画像数据
4.5 完整蓝图连接示意图
暂略
助睿Max蓝图编辑器亮点：通过拖拽节点、连线即可完成复杂的交互逻辑，无需编写复杂代码。并行数据处理节点支持一个数据源同时分发到多个图表，实现高效的数据复用。
5 实验步骤
5.1 配置大屏切换
添加Tab列表组件，调整位置与两个导航按钮重合。设置行数为1，列数为2，将背景色、选中背景色、悬浮背景色的透明度设为0。在数据中保留2列，id分别为1、2，content为空，刷新数据。将“市场分析”组、“用户画像”组、Tab列表组件导出到蓝图编辑器。添加分支判断节点，判断条件为 data.id == 1。满足分支上添加两个设置图层可见性动作：市场分析组显示，用户画像组隐藏。不满足分支上添加两个设置图层可见性动作：市场分析组隐藏，用户画像组显示。
5.2 配置地图省份点击联动
5.2.1 设计思路与原理
通过地图点击事件触发，提取省份名称，动态SQL查询，数据分发，指标卡刷新。
5.2.2 核心组件配置
（1）提取地区名称：添加并行数据处理节点，接收地图点击事件的data对象，提取name字段，通过映射表转换为数据表中的简称，存入全局变量 window.globalProvinceName。
（2）省份核心指标查询：添加SQL请求节点，读取 window.globalProvinceName 和 window.GLOBAL_SELECTED_BROWSER，使用 UNION ALL 查询总用户数、平均年龄、本科及以上占比、中高收入占比四个指标，输出格式 (name, value)。
（3）省份核心指标分发：添加并行数据处理节点，按 name 字段过滤，每个指标卡单独输出 value。
5.2.3 蓝图连线与数据流
将区域热力层的“点击区域时”事件连接到“提取地区名称”节点。将“提取地区名称”的执行成功连接到“省份核心指标查询”的执行SQL。将“省份核心指标查询”的执行成功连接到“省份核心指标分发”的输入。将“省份核心指标分发”的四个输出分支分别连接到四个核心指标卡的导入数据接口。
5.3 地图热力层根据用户数渲染颜色
5.3.1 设计思路与原理
通过提取地理数据中的adcode映射表，查询所有省份用户数，数据映射格式化后导入热力层，自动渲染颜色深浅。
5.3.2 核心组件配置
（1）提取adcode映射表：添加并行数据处理节点，将区域热力层的“当数据接口地理边界geojson数据加载完成时”事件连接到该节点。编写处理方法，从地图GeoJSON中提取每个省份的adcode和标准名称，建立映射表 window.globalProvinceAdcode。
（2）查询所有省份的用户数：添加SQL请求节点，命名为“各省份用户数查询”。根据当前选中的浏览器，统计每个省份的用户总数，输出 (name, value)。
（3）地图数据映射：添加并行数据处理节点，命名为“地图数据与用户数映射”。将SQL查询结果中的省份名称与 window.globalProvinceAdcode 匹配，输出 { name, value, area_id } 格式数据。
（4）导入地图热力层：将“地图数据与用户数映射”节点的输出端口连接到区域热力层的“导入热力值数据接口”。
5.3.3 蓝图连线与数据流
按照设计完成热力渲染部分的连线（独立于点击联动）。
5.4 预览与发布
保存预览，验证三个核心交互功能：大屏切换、地图热力层颜色渲染、省份点击联动指标卡。确认无误后发布，复制分享链接在线观看。
