一、实验概述1.1 实验背景在大数据时代理解“谁在使用产品”是产品设计和营销决策的基础。本次实验基于之前加工完成的用户画像统计表user_profile_stats从零开始搭建一个完整的浏览器用户画像分析数据大屏。实验涵盖从大屏布局设计、数据接入配置到交互功能实现的全流程帮助学生掌握低代码数据可视化平台的核心操作能力。1.2 实验目的本次实验共分为三个子实验分别达成以下目标实验6-1大屏静态布局制作根据用户画像分析需求合理设计大屏的信息结构与叙事逻辑理解不同图表类型在用户画像分析中的适用场景与分析价值将数据结果转化为可直观理解、可支撑决策的用户洞察实验6-2大屏数据接入理解蓝图编辑器的基本概念数据源、触发器、动作、并行数据处理使用并行数据处理节点接收筛选器参数并分发给多个SQL请求节点为不同图表组件编写带参数的SQL查询语句配置筛选器与图表的联动交互实验6-3大屏交互设置使用图层可见性控制实现大屏内容切换使用按钮组件配置页面跳转或内容显示/隐藏使用地图组件的交互事件实现省份下钻联动配置指标卡组件根据地图点击动态更新数据1.3 实验环境实验平台助睿在线实验平台核心工具助睿数智Uniplore一站式数据科学平台、助睿Max数据大屏数据来源团队私有数据库MySQL使用 user_profile_stats 用户画像统计表二、数据表结构说明在开始大屏搭建之前先了解本次实验使用的核心数据表 user_profile_stats 的结构字段类型说明browser_nameVARCHAR(50)浏览器名称genderVARCHAR(10)性别age_groupVARCHAR(10)年龄段eduVARCHAR(50)学历jobVARCHAR(50)职业incomeVARCHAR(50)收入city_typeVARCHAR(10)居住地类型城市/城郊/乡村provinceVARCHAR(50)省份user_countINT用户数该表按浏览器维度统计了用户在各人口属性上的分布支持整体分析与分浏览器对比分析。​三、实验6-1浏览器用户画像分析-大屏静态布局制作3.1 业务问题分析在开始搭建大屏之前需要先明确这张大屏要帮助谁、看懂什么业务问题对应的分析维度目标用户是谁年龄、性别、职业明确核心目标人群指导产品设计与营销沟通用户的教育与收入水平如何影响产品复杂度设计、定价策略与商业化路径用户分布在哪里指导区域市场投放与本地化运营不同浏览器的用户画像是否存在差异识别差异化人群特征制定针对性竞争策略用户画像大屏的核心价值不是“罗列统计数字”而是回答“谁在用我们的产品”并将抽象的人口属性转化为可行动的人群认知。3.2 图表选型方案分析目标推荐图表选择理由展示男女比例、城市/城郊/乡村占比饼图 / 环形图直观反映部分与整体的关系适合占比类指标对比各年龄段、各学历、各职业的用户数量柱状图 / 条形图便于横向比较不同类别的数量差异展示省份分布中国地图空间信息的最佳载体一眼看出热点与空白区域展示关键数值总用户、平均年龄等指标卡 / 翻牌器突出核心结论视觉聚焦适合大屏“第一眼信息”支持查看不同浏览器的用户画像差异筛选器如下拉多选提供交互能力让大屏从静态展示变为可探索的分析工具3.3 大屏布局设计5大模块最终整理的用户画像大屏方案包含5个核心模块模块一数据概览指标项总用户数、平均年龄、本科及以上占比、中高收入占比使用组件指标卡作用一眼获取最核心的结论模块二性别与居住地类型分布指标项性别分布、居住地类型分布城市/城郊/乡村使用组件环形图作用了解用户的性别构成和城乡分布模块三用户属性分布指标项年龄分布、学历分布、职业分布、收入分布使用组件条形图作用全面了解用户的基本属性特征模块四省份分布指标项各省份用户分布使用组件中国地图作用识别区域市场热点指导本地化运营模块五筛选器浏览器多选指标项浏览器名称选择Chrome/Safari/Firefox/Edge等使用组件下拉多选筛选器作用支持按浏览器筛选对比不同用户群体的画像差异​3.4 操作步骤步骤1创建大屏项目登录助睿在线实验平台进入“助睿Max”数据大屏模块点击“新建大屏”命名为“浏览器用户画像分析大屏”。步骤2添加标题和导航栏拖入“文本”组件作为大屏主标题如“浏览器用户画像分析”为后续两大屏切换预留导航区域​步骤3拖入模块一数据概览指标卡从组件库拖入4个“指标卡”组件或使用“翻牌器”组件分别放置在大屏中间靠左占位展示核心指标设置标题总用户数、平均年龄、本科及以上占比、中高收入占比指标卡样式建议字体醒目、背景半透明、边框圆润符合大屏风格​步骤4拖入模块二环形图拖入2个“环形图”组件分别用于展示性别分布和居住地类型分布设置环形图样式内径大小、颜色方案、标签显示位置建议显示百分比和标签​步骤5拖入模块三条形图拖入4个“条形图”组件分别用于展示年龄分布、学历分布、职业分布、收入分布设置条形图样式颜色、轴标签旋转角度当类别较多时、数据显示格式​步骤6拖入模块四中国地图拖入“中国地图”组件用于展示各省份用户分布设置地图样式颜色渐变方案深色代表用户多浅色代表用户少、地图缩放级别、显示数据标签​步骤7拖入模块五筛选器拖入“下拉多选”筛选器组件放置在页面顶部设置选项Chrome、Safari、Firefox、Edge、Opera等主流浏览器筛选器样式设置背景透明以融合导航栏样式​步骤8整体样式优化统一色系确保大屏整体风格一致利用图层管理功能调整各组件的前后层级预览大屏静态布局效果确认各组件位置、大小、样式符合预期​四、实验6-2浏览器用户画像分析-大屏数据接入4.1 蓝图编辑器核心概念蓝图编辑器是助睿Max中用于配置数据流和交互逻辑的可视化编程工具采用“节点-连线”方式管理可视化应用中多个组件之间的交互关系。概念说明数据源数据库连接配置定义数据从哪里来查询SQL语句定义取什么数据触发器触发数据加载的事件如页面加载、组件点击、定时刷新等动作触发器执行后的操作如查询数据、刷新图表变量用于在查询之间传递参数如筛选器选中的浏览器名称4.2 整体蓝图逻辑本次数据接入的总体逻辑如下页面加载或用户选择浏览器 → 触发两个SQL请求维度数据SQL查询性别、年龄、学历、职业、收入、居住地类型、省份分布核心指标SQL查询总用户数、平均年龄、本科及以上占比、中高收入占比数据分发维度数据通过并行数据处理节点按 dimension_type 分发到各个图表核心指标通过并行数据处理节点将单行多列的指标数据拆分为四个独立数值分别发送给四个指标卡4.3 操作步骤步骤1配置数据源打开大屏的“蓝图编辑器”添加“数据源”节点配置MySQL数据库连接信息数据源名称MySQL_UserProfile连接信息填写服务器地址、端口、数据库名称、用户名、密码测试连接确认成功​步骤2配置维度数据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​步骤3配置核心指标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 (50018000元, 800112000元,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​步骤4配置筛选器联动添加“页面加载”触发器设置页面初始化时加载全部浏览器数据添加“变量”节点定义 browser_filter 变量将筛选器组件的“值变更”事件连接到变量节点变量节点连接到两个SQL查询节点并行数据处理配置添加“并行数据处理”节点维度数据分发输入维度SQL查询结果按 dimension_type 字段值分发gender → 性别环形图age_group → 年龄条形图edu → 学历条形图job → 职业条形图income → 收入条形图city_type → 居住地类型环形图province → 中国地图添加第二个“并行数据处理”节点指标数据分发输入核心指标SQL查询结果单行多列提取各字段值分别发送给四个指标卡组件​步骤5绑定图表数据进入大屏编辑区依次选中各个图表组件导出到蓝图编辑器​步骤6测试和预览点击“预览”按钮查看大屏动态数据展示效果测试筛选器功能选择一个浏览器如Chrome观察所有图表数据是否同步刷新切换浏览器验证数据联动是否正常​​4.4 常见问题与排查问题现象可能原因解决方法图表无数据SQL查询错误或数据源连接失败检查SQL语法测试数据源连接筛选器不联动变量未正确传递检查变量节点配置确认筛选器值变更事件已连接指标卡数据显示错误数据分发节点配置错误检查并行数据处理节点的输出映射页面加载时无数据未设置页面加载触发器添加页面加载触发器连接至SQL查询五、实验6-32012年浏览器全景分析-大屏交互设置5.1 大屏切换功能实现实现原理市场分析和用户画像两个大屏实际上是在同一个大屏文件中通过控制图层的可见性来实现切换将所有市场分析的组件放入“市场分析组”将所有用户画像的组件放入“用户画像组”Tab列表组件设置2列ID为1的“市场分析”和ID为2的“用户画像”点击某列时根据ID控制两个组的可见性显示对应组隐藏另一组操作步骤步骤1创建图层分组在图层管理面板中创建两个新分组“市场分析组”和“用户画像组”将所有市场分析相关的组件移动到“市场分析组”将所有用户画像相关的组件移动到“用户画像组”​步骤2添加Tab列表组件从组件库拖入“Tab列表”组件设置2个标签页“市场分析”和“用户画像”​步骤3配置交互逻辑打开蓝图编辑器添加Tab列表的“当前选中项变化”触发器添加“条件判断”节点判断选中的ID分别添加两个“设置图层可见性”动作节点连接逻辑选中ID1市场分析显示“市场分析组”隐藏“用户画像组”选中ID2用户画像显示“用户画像组”隐藏“市场分析组”5.2 配置地图省份点击联动5.2.1 设计思路与原理在用户画像大屏中我们希望通过点击地图上的任意省份右侧的核心指标卡总用户数、平均年龄、本科及以上占比、中高收入占比能立即切换为该省份的数据。这是一种典型的地理下钻分析也是数据大屏的核心交互之一。助睿Max 的蓝图编辑器让这种交互无需编写后端代码只需通过“事件-动作”的连线即可实现。整个数据流如下地图点击事件 → 提取省份名称并行数据处理 → 动态SQL查询SQL请求 → 数据分发并行数据处理 → 四个指标卡刷新核心知识点事件驱动地图组件的“点击区域时”事件是起点它会输出被点击区域的地理信息如省份名称。变量传递通过window.globalProvinceName全局变量可以将省份名称在不同节点间共享避免重复连线。动态SQLSQL请求节点可以接收外部变量实现“根据用户点击的省份查询不同数据”。并行数据处理将一次查询返回的多行数据每个指标一行拆分、过滤分别发送给不同的目标组件。传统开发中实现此类下钻功能需要编写前端 JavaScript 和后端 API而助睿Max 通过蓝图编辑器将数据流可视化拖拽节点即可完成开发效率提升数倍。5.2.2 核心组件配置1提取地区名称并行数据处理地图组件点击后返回的省份名称是全称如“江苏省”、“广西壮族自治区”但我们的数据表中存储的是简称“江苏”、“广西”。因此需要先做一个名称映射。作用接收地图点击事件输出的data对象从中提取name字段并通过映射表转换为数据表中的简称最后存入全局变量window.globalProvinceName。代码已提供完整映射表支持省、自治区、直辖市、特别行政区// 省份特殊映射直辖市、自治区、特别行政区 const specialMap { 北京市: 北京, 天津市: 天津, 上海市: 上海, 重庆市: 重庆, 广西壮族自治区: 广西, 内蒙古自治区: 内蒙古, 西藏自治区: 西藏, 宁夏回族自治区: 宁夏, 新疆维吾尔自治区: 新疆, 香港特别行政区: 香港, 澳门特别行政区: 澳门 }; let provinceName data.name; // 优先使用特殊映射 if (specialMap[provinceName]) { provinceName specialMap[provinceName]; } else { // 通用处理去除末尾的“省”、“自治区”、“市” provinceName provinceName.replace(/(省|自治区|市)$/, ); } window.globalProvinceName provinceName; return provinceName;2省份核心指标查询SQL请求节点根据当前选中的浏览器window.GLOBAL_SELECTED_BROWSER和点击的省份window.globalProvinceName从user_profile_stats表中查询四个核心指标。为了便于后续分发使用UNION ALL将四个指标输出为多行每行包含name指标名和value数值const selectedProvince window.globalProvinceName; console.log(点击的省份名称处理后, selectedProvince); 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 (50018000元, 800112000元,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} ; console.log(生成的省份核心指标SQL, sql); return sql;3省份核心指标分发并行数据处理SQL 返回的是四行数据而四个指标卡每个只需要一个数值。通过“并行数据处理”节点我们按name字段过滤将每个指标单独输出给对应的指标卡。分支示例总用户数var item data.find(item item.name total_users); return [{ value: item ? item.value : 0 }];其他分支只需修改item.name total_users的条件即可分别对应avg_age→ 平均年龄指标卡high_edu_ratio→ 本科及以上占比指标卡high_income_ratio→ 中高收入占比指标卡5.2.3 蓝图连线与数据流按照以下顺序连接蓝图节点区域热力层的“点击区域时”事件→ 连接到“提取地区名称”节点。“提取地区名称”的“执行成功”输出→ 连接到“省份核心指标查询”节点的“执行SQL”输入。“省份核心指标查询”的“执行成功”输出→ 连接到“省份核心指标分发”节点的输入。“省份核心指标分发”的四个输出分支→ 分别连接到四个核心指标卡的“导入数据接口”。5.3 地图热力层根据用户数渲染颜色5.3.1 设计思路与原理为了直观展示全国各省份的用户分布我们需要在地图上用颜色深浅来表示每个省份的用户数用户数越多颜色越深。这是数据大屏中常见的热力图效果。助睿Max 的地图组件支持通过“区域热力层”子组件接收自定义数据。数据格式要求为{ name, value, area_id }其中name为省份名称value为用户数area_id为行政区划代码adcode。因此我们需要完成以下步骤提取地理数据中的 adcode 和 name地图组件内部包含全国各省份的 GeoJSON 边界数据其中包含adcode行政区划代码和标准名称。我们需要提取并建立一个“省份名称 → adcode”的映射表存储在全局变量中。查询所有省份的用户数根据当前选中的浏览器从user_profile_stats表中统计每个省份的用户总数。数据映射与格式化将查询结果中的省份名称与 adcode 映射表匹配输出格式{ name, value, area_id }。导入热力值数据将格式化后的数据导入地图的“区域热力层”子组件即可自动渲染颜色深浅。传统开发中实现地图热力层需要前端加载 GeoJSON、手动计算颜色映射、绑定事件等。而助睿Max 只需配置子组件的数据接口平台自动完成渲染极大降低了地理可视化的门槛。5.3.2 核心组件配置1提取 adcode 映射表并行数据处理此节点只需执行一次在页面加载时运行从地图组件内置的 GeoJSON 中提取每个省份的 adcode 和标准名称建立映射表globalProvinceAdcode。操作步骤在蓝图中添加“并行数据处理”节点命名为“提取adcode映射表”。将区域热力层的“当数据接口地理边界geojson数据加载完成时”事件连接到该节点确保地图数据加载后执行。处理方法代码javascript/** * 提取地理数据中的 adcode 和 name建立名称→adcode 映射 * param {Object} data - 地理数据对象包含 features 数组 * returns {Object} 名称到 adcode 的映射表 */ 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; console.log(省份adcode映射表已加载, Object.keys(mapping).length); return mapping;2查询所有省份的用户数SQL请求节点根据当前选中的浏览器window.GLOBAL_SELECTED_BROWSER统计每个省份的用户总数并按用户数降序排列。操作步骤添加“SQL请求”节点命名为“各省份用户数查询”。在“处理方法”中输入以下代码javascriptconst 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 ; console.log(生成的所有省份用户数SQL, sql); return sql;3地图数据映射并行数据处理节点将 SQL 查询结果中的省份名称与window.globalProvinceAdcode匹配生成{ name, value, area_id }格式的数据供地图热力层使用。操作步骤添加“并行数据处理”节点重命名为“地图数据与用户数映射”。处理方法代码function convertToMapData(data) { if (!Array.isArray(data) || data.length 0) { return []; } return data.map(item { const provinceName item.name; // 注意SQL 返回字段名为 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) { // console.warn(未找到省份 ${provinceName} 的匹配 adcode); area_id 000000; } return { name: provinceName, value: parseFloat(item.value) || 0, area_id: Number(area_id) }; }); } const result convertToMapData(data); // console.log(最终返回的地图热力数据, result); return result;4导入地图热力层在地图组件基础平面地图中已经添加了子组件“区域热力层”。我们需要将映射后的数据导入该子组件。操作步骤将“地图数据与用户数映射”节点的输出端口连接到“区域热力层”的“导入热力值数据接口”。助睿Max的地图组件及其子组件的事件和动作非常丰富。通过“导入热力值数据接口”动态更新数据可以实现浏览器切换时热力图自动刷新。5.3.3 蓝图连线与数据流完整的热力渲染数据流如下独立于点击联动区域热力层“geojson加载完成”事件 → 提取adcode映射表存储到window.globalProvinceAdcode ↓ 浏览器筛选器变化 → 各省份用户数查询 → 地图数据与用户数映射 → 区域热力层“导入热力值数据接口”5.4 预览与发布完成上述所有配置后大屏应具备三个核心交互功能功能验证方法预期效果大屏切换点击 tab 列表的“市场分析”/“用户画像”正确显示对应大屏内容无组件残留地图热力层切换浏览器筛选器如从“全部”切换到“Chrome”地图上各省份颜色深浅根据用户数变化用户数越多颜色越深省份点击联动点击地图上的任意省份如“广东省”右侧四个核心指标卡自动更新为该省份的数据验证步骤点击右上角“预览”按钮进入大屏预览模式。依次测试上述三项功能确保均正常工作。打开浏览器开发者工具F12的 Console 面板检查是否有报错信息如有根据错误提示调整蓝图配置。发布大屏确认所有功能正常后点击顶部工具栏的“发布”按钮。在弹出的发布对话框中打开“发布分享开关”。复制生成的分享链接。打开新浏览器窗口或使用无痕模式将复制的链接粘贴到地址栏中访问验证发布后的大屏是否与预览效果一致。六、实验成果展示完成全部三个实验后最终的用户画像分析大屏应具备以下功能功能模块实现状态说明5大模块静态布局✅ 已完成数据概览、环形图、条形图、地图、筛选器布局完整动态数据接入✅ 已完成所有图表已接入真实数据支持动态渲染筛选器联动✅ 已完成浏览器多选筛选所有图表同步更新市场/用户两大屏切换✅ 已完成Tab列表实现两组图层的显示/隐藏切换地图省份点击联动✅ 已完成点击省份四个核心指标卡动态更新关键成果总结数据驱动决策大屏回答了“谁在用我们的产品”这一核心问题将抽象的人口属性转化为直观的视觉表达为产品设计、定价策略、区域运营提供数据支撑。低代码高效开发通过拖拽式搭建和蓝图编辑器全程无需编写复杂前端代码即可完成专业级数据大屏开发大幅降低了可视化开发门槛。交互式探索分析筛选器与地图联动让大屏从“静态展示”升级为“可探索的分析工具”用户可以根据需要自由切换维度深入洞察数据。七、实验总结与心得7.1 技术收获通过本次三个实验的系统学习我掌握了以下技能数据驱动的大屏设计思维从业务问题出发选择合适的图表类型传递分析价值蓝图编辑器的灵活运用掌握数据源配置、SQL参数化查询、并行数据分发等核心功能交互联动配置实现筛选器联动和地图下钻联动提升大屏的可探索性7.2 踩坑与避坑指南筛选器参数传递确保变量命名一致SQL中使用{{变量名}}语法引用筛选器值并行数据分发注意区分维度数据分发和指标数据分发前者按类型字段拆分后者将一行多列拆为多行图层管理大屏切换时两组图层的组件不要相互重叠合理利用图层分组功能SQL性能优化使用聚合表而非原始明细表避免大屏加载过慢7.3 拓展思考如何在地图联动的同时联动所有图表同步更新为该省份的数据如何添加时间筛选器分析用户画像的月度趋势变化如何将大屏发布为企业级应用供业务部门日常使用