一、实验目的与核心价值本次实验的核心目标是基于已加工完成的用户画像统计表利用助睿Max平台完成“浏览器用户画像分析”大屏的静态布局设计。实验不仅要求掌握大屏搭建的技术操作更强调站在“数据产品”的角度理解如何将抽象的用户人口属性数据转化为更为直观数据大屏。核心价值在于回答一系列关键业务问题目标用户是谁年龄、性别、职业用户的教育与收入水平如何用户的地理分布在哪里不同浏览器的用户画像是否存在差异实验环境实验平台助睿在线实验平台可视化工具助睿Max数据大屏二、业务问题与分析维度业务问题对应的分析维度目标用户是谁年龄、性别、职业明确核心目标人群指导产品设计与营销沟通用户的教育与收入水平如何影响产品复杂度设计、定价策略与商业化路径用户分布在哪里指导区域市场投放与本地化运营不同浏览器的用户画像是否存在差异识别差异化人群特征制定针对性竞争策略三、整体设计方案与模块构成本次大屏设计遵循“信息层次清晰、分析逻辑连贯”的原则整体分为五大分析模块并搭配筛选器实现交互探索数据概览模块核心指标卡展示覆盖用户数、平均年龄、本科以上占比、中高收入占比四个关键指标快速勾勒用户群的规模与基本轮廓。基本信息模块饼图/柱状图/条形图包括性别分布、年龄分布、学历分布、职业分布、收入分布。针对不同维度特点选择合适图表——性别用饼图突出比例年龄、职业、收入用柱状图便于横向对比学历名称较长则采用横向条形图提升可读性。地域分布模块地图列表以中国地图区域热力层直观展示用户省份分布的空间热点与空白区域辅以“用户数TOP5省份”轮播列表弥补地图难以精确读数的不足实现“看趋势”与“读数值”的互补。居住地类型模块轮播饼图分析城市、城郊、乡村用户的结构占比为差异化市场策略提供依据。交互筛选模块下拉多选支持按单个、多个或全部浏览器进行筛选使大屏从静态展示变为可探索的分析工具便于对比不同浏览器用户的画像差异。整体效果预览四、具体实验步骤1.打开之前已完成“市场分析”大屏的项目文件。2.使用图层管理功能将“市场分析”大屏的所有组件选中并整体复制。3.将复制得到的组件组重命名为“用户画像分析”将“市场分析”组件隐藏我们针对“用户画像”逐步添加和布局本次实验所需的组件。接下来我们正式开始几个小板块的设计位置和大小可自行参照调整下边不一一展示噢1用户省份分布地图→基础平面地图在“子组件管理中”选择“区域热力层”2核心指标参考图片添加4个“数字翻牌器”纵向排列设置标题和数值样式用“单张图片”设置标题背景3用户数TOP5省份排行榜轮播列表①添加“单张图片”组件作为排行榜区域背景②添加“通用标题”组件作为排行榜标题③添加“轮播列表”组件作为排行榜主体4性别分布基础饼图①使用“单张图片”组件设置区域背景并设置好标题②添加“基础饼图”组件调整大小和位置5年龄段分布基础柱图①使用“单张图片”组件设置区域背景并设置好标题②助睿Max 支持多种柱状图基础柱图、弧形柱图、水平基础柱图、水平胶囊柱图等这里我们使用基础柱图进行展示6学历分布水平基础柱图①使用“单张图片”组件设置区域背景并设置好标题②这里我们使用助睿Max 的水平基础柱图7职业分布基础柱图①使用“单张图片”组件设置区域背景并设置好标题②这里我们使用助睿Max的基础柱图8收入分布水平基础柱图①使用“单张图片”组件设置区域背景并设置好标题②这里我们使用助睿Max 的水平基础柱图9居住地类型分布轮播饼图①使用“单张图片”组件设置区域背景并设置好标题②为了使大屏可视化效果更丰富这里我们使用助睿Max 的轮播饼图10筛选器下拉选择组件支持按不同浏览器进行对比分析。通过筛选器用户可以查看全部浏览器用户的整体画像默认视图了解产品大盘用户特征选择单个浏览器如 Chrome、IE、360 等聚焦该浏览器用户的画像回答“使用 Chrome 的用户与其他用户有什么不同”选择多个浏览器进行对比直观比较不同浏览器用【下拉选择框的数据属性设置用于蓝图编辑器中后边将基于这6个静态数据实现组件交互】到这里我们就完成了所需的10个小模块的静态设计下边是整体的效果展示。五、数据接入——使用蓝图编辑器1. 整体设计流程1页面加载或用户选择浏览器 → 触发两个SQL请求维度数据SQL查询性别、年龄、学历、职业、收入、居住地类型、省份分布。核心指标SQL查询总用户数、平均年龄、本科及以上占比、中高收入占比。2浏览器筛选器 → 将选中的浏览器值传递给两个SQL请求节点。维度数据分发通过一个并行数据处理节点按dimension_type分发到各个图表。核心指标分发通过另一个并行数据处理节点将单行多列的指标数据拆分为四个独立数值分别发送给四个指标卡。3各图表组件接收数据并展示。2.整体设计流预览3.前期准备由于在数据大屏中我们需要展示平均年龄这一核心指标为了更准确地计算平均年龄我们需要在user_profile_stats表中增加一个age字段。3.1 修改目标表的结构使用“执行一个SQL脚本”修改原有的表结构增加age字段。这一步执行的SQL语句如下DROP TABLE IF EXISTS user_profile_stats; CREATE TABLE user_profile_stats ( browser_name VARCHAR(50) NOT NULL COMMENT 浏览器名称, gender VARCHAR(10) COMMENT 性别, age INT NOT NULL COMMENT 年龄, age_group VARCHAR(10) COMMENT 年龄段, edu VARCHAR(50) COMMENT 学历, job VARCHAR(50) COMMENT 职业, income VARCHAR(50) COMMENT 收入, city_type VARCHAR(10) COMMENT 居住地类型, province VARCHAR(50) COMMENT 省份, user_count INT NOT NULL COMMENT 用户数 ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户画像统计表;3.2 修改原“用户画像表加工”转换流① 修改排序记录组件增加 age 字段的升序排序② 修改分组组件分组字段更加 age③ 执行转换流查看得到的数据表检查age字段是否已经成功显示。tips若数据异常可排查计算器组件的配置“计算”属性值可能会发生丢失运行前记得检查一下噢4.组件导出到蓝图编辑器当组件导入到蓝图编辑器后才可以为该组件配置交互和接入数据所以我们需要将标签卡、各数据表和热力图等导出到蓝图编辑器中注意本次实验中基本平面地图自身不需要导出导出的是它的 “区域热力层” 噢。其他组件正常导出到蓝图编辑器即可演示时我已导出大家操作时右键点击“导出到蓝图编辑器”即可接下来切换到蓝图编辑器最终我们需要导出的组件可以参考下图5.添加浏览器参数接收节点并行数据处理大屏上的浏览器筛选器让用户可以选择某个具体的浏览器。当用户切换选择时地图、饼图、柱状图等所有图表的数据都需要跟着变。实现联动的这个节点就是“浏览器参数接收”它用“并行数据处理”组件来实现。5.1 双击节点添加两个处理方法方法一页面加载时执行一次设置基础URLconst BASE_URL https://lab.guilian.cn; window.GLOBAL_BASE_URL BASE_URL; return data;这个方法主要是为后续可能用到的外部API预留一个基础地址本实验用不上但保留结构。方法二每次筛选器变化时执行接收浏览器参数const SELECTED_BROWSER data.value; window.GLOBAL_SELECTED_BROWSER SELECTED_BROWSER; return { value: SELECTED_BROWSER };这个方法把用户选中的浏览器存到window.GLOBAL_SELECTED_BROWSER这个全局变量里。后面的SQL请求节点只要读取这个变量就知道该查哪个浏览器的数据了。5.2 在画布编辑器中补全“下拉选择框”组件的配置其中浏览器的选项我们可以直接使用静态数据因为个数不多title为前端显示内容value为实际查询内容即数据库中存储的对应 browser_name如{ title: IE浏览器, value: IE浏览器 }有多个值时用“[]”框起来用“,”分割填写6个浏览器的对应内容并刷新数据同时输入框中默认选中设置为“IE浏览器”6.添加维度数据SQL请求SQL请求【注意所有SQL查询语句都需要将from修改为自己的数据库表】这个节点负责查询性别、年龄、学历、职业、收入、居住地类型、省份等维度数据使用UNION ALL合并输出格式为(dimension_type, name, value)。添加“SQL请求”节点重命名为“维度数据SQL请求”查询SQL如下// 从全局变量获取选中的浏览器值 const selectedBrowser window.GLOBAL_SELECTED_BROWSER; let sql -- 1.性别分布 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 -- 2.年龄段分布 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 -- 3.职业分布 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 -- 4.收入分布 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 -- 5.居住地类型分布 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 -- 6.省份分布 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 sql7.添加核心指标SQL请求SQL请求只查询四个核心指标输出单行多列格式一行包含四个字段不需要UNION ALL取值更简单。添加“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 sql8.添加维度数据分发节点并行数据处理基于上一步SQL查出来的是一张包含所有维度数据的大表但每个图表只需要其中一部分所以需要一个分发节点把数据按dimension_type拆开分别送给对应的图表。这个节点也用“并行数据处理”来实现。8.1 添加“并行数据处理”节点重命名为“数据分发”。将SQL请求节点的“执行成功”连接到该节点。8.2 双击节点为每个图表添加一个处理方法具体处理方法脚本如下分支1性别分布饼图var filtered data.filter(item item.dimension_type gender); return filtered.map(item ({ name: item.name, value: item.value }));分支2年龄段分布柱状图var filtered data.filter(item item.dimension_type age); var order [18, 18-25, 26-35, 36-45, 45]; filtered.sort((a, b) order.indexOf(a.name) - order.indexOf(b.name)); return filtered.map(item ({ x: item.name, y: item.value, s: 用户数 }));分支3学历分布条形图var filtered data.filter(item item.dimension_type edu); var order [小学及以下, 初中, 高中/中专/技校, 大专, 大学本科, 硕士及以上]; filtered.sort((a, b) order.indexOf(a.name) - order.indexOf(b.name)); return filtered.map(item ({ x: item.name, y: item.value, s: 学历 }));分支4职业分布柱状图var filtered data.filter(item item.dimension_type job); return filtered.map(item ({ x: item.name, y: item.value, s: 职业 }));分支5收入分布柱状图var filtered data.filter(item item.dimension_type income); // 按收入金额升序排序提取数字进行比较 filtered.sort((a, b) { // 提取收入段中的最小金额 var getMinIncome (incomeStr) { // 处理 无收入、500元及以下 等特殊情况 if (incomeStr 无收入) return -1; if (incomeStr 500元及以下) return 0; // 提取数字如 1501~2000元 提取 1501 var match incomeStr.match(/(\d)/); return match ? parseInt(match[1]) : 999999; }; return getMinIncome(a.name) - getMinIncome(b.name); }); return filtered.map(item ({ x: item.name, y: item.value, s: 收入 }));分支6居住地类型分布饼图var filtered data.filter(item item.dimension_type city_type); return filtered.map(item ({ name: item.name unknown ? 未知 : item.name, value: item.value }));分支7省份排行榜TOP5/ 过滤出省份数据 var filtered data.filter(item item.dimension_type province); // 按用户数降序排序 filtered.sort((a, b) b.value - a.value); // 取前5条 var top5 filtered.slice(0, 5); // 直接返回组件需要的字段名 return top5.map(item ({ province: item.name, user_count: item.value }));以上的输出结果不正确的话可以在最终输出结果的节点的处理方法代码中添加以下代码查看返回的数据// console.log(返回的数据,data)9.添加核心指标分发节点并行数据处理同样地通过“并行数据处理”节点我们按name字段过滤将每个指标单独输出给对应指标卡。分支示例总用户数var item data.find(item item.name total_users); return [{ value: item ? item.value : 0 }];其他分支类似参照指标数据的定义只需修改item.name total_users的条件即可10.连接节点并保存预览根据我们的需求和设计框架参照下图完成组件间的连线预览效果所有组件应该正常显示我的热力图和排行榜部分仍需排查问题六、大屏交互设置本实验基于前两个实验完成的市场分析大屏和用户画像大屏使用助睿Max的蓝图编辑器配置两个大屏之间的切换交互以及地图省份点击联动指标卡的功能。1. 大屏切换逻辑市场分析和用户画像两个大屏实际上是在同一个大屏文件中通过控制图层的可见性来实现切换。实现原理通过 tab列表组件实现。将市场分析的所有组件放入“市场分析组”用户画像的所有组件放入“用户画像组”。tab列表组件设置2列“市场分析”和“用户画像”每列设置不同的ID如id: 1和id: 2背景设为透明以融合导航栏样式。点击某列时根据ID控制两个组的可见性显示对应组隐藏另一组。助睿Max图层管理优势通过“图层”面板可以轻松控制组件的显示/隐藏无需编写代码。配合蓝图编辑器可以实现按钮与图层可见性的联动。2. 地图省份点击联动逻辑在用户画像大屏中点击地图上的某个省份时右侧的四个核心指标卡总用户数、平均年龄、本科及以上占比、中高收入占比需要更新为该省份的数据。用户点击省份 → 地图组件触发“点击区域”事件 → 蓝图接收省份名称 → SQL请求查询该省份的核心指标 → 指标卡刷新数据3. 完整蓝图连接示意图4. 具体操作步骤4.1 配置大屏切换1添加Tab列表组件调整大小、位置两个导航按钮重合2Tab列表组件的基本设置中设置行数为1列数为2再标签默认配置中将“背景颜色”、“选中背景色”、“悬浮背景色”的透明度设置为0这样就看不见Tab列表组件给用户的感觉就是只有2个按钮3设置Tab列表组件每个选项的id在数据中保留2列数据id分别为1、2content为空设置后记得刷新数据4将“市场分析”组、“用户画像”组、Tab列表组件导出到蓝图编辑器5在蓝图编辑器中将“市场分析”组、“用户画像”组、Tab列表组件添加到蓝图编辑器画布中通过“分支判断”节点来做“当Tab点击时”的id判断处理方法为return data.id 1;6在“分支判断”的 满足 分支上添加两个“设置图层可见性”动作也就是连线目标图层市场分析组 → 显示目标图层用户画像组 → 隐藏7在“判断选项卡”的 不满足 分支上添加两个“设置图层可见性”动作目标图层市场分析组 → 隐藏目标图层用户画像组 → 显示4.2 配置地图省份点击联动核心知识点事件驱动地图组件的“点击区域时”事件是起点它会输出被点击区域的地理信息如省份名称。变量传递通过window.globalProvinceName全局变量可以将省份名称在不同节点间共享避免重复连线。动态SQLSQL请求节点可以接收外部变量实现“根据用户点击的省份查询不同数据”。并行数据处理将一次查询返回的多行数据每个指标一行拆分、过滤分别发送给不同的目标组件。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的条件即可4组件连线将上述组件参照图片连接起来4.3 地图热力层根据用户数渲染颜色为了直观展示全国各省份的用户分布我们需要在地图上用颜色深浅来表示每个省份的用户数用户数越多颜色越深。这是数据大屏中常见的热力图效果。助睿Max 的地图组件支持通过“区域热力层”子组件接收自定义数据。数据格式要求为{ name, value, area_id }其中name为省份名称value为用户数area_id为行政区划代码adcode。因此我们需要完成以下步骤提取地理数据中的 adcode 和 name地图组件内部包含全国各省份的 GeoJSON 边界数据其中包含adcode行政区划代码和标准名称。我们需要提取并建立一个“省份名称 → adcode”的映射表存储在全局变量中。查询所有省份的用户数根据当前选中的浏览器从user_profile_stats表中统计每个省份的用户总数。数据映射与格式化将查询结果中的省份名称与 adcode 映射表匹配输出格式{ name, value, area_id }。导入热力值数据将格式化后的数据导入地图的“区域热力层”子组件即可自动渲染颜色深浅。1提取 adcode 映射表并行数据处理/** * 提取地理数据中的 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请求节点const 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地图数据映射并行数据处理节点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蓝图连线与数据流5.预览与发布部分细节存在问题完整的结果参照下图噢以上我们就完成了本次实验的全部内容。七、实验问题与总结评价实验问题数据库账号权限报错现象在预览调试蓝图时控制台显示1045 Access denied账号访问拒绝。原因使用的数据库账号se_group_8未被授权当前客户端 IP 访问或账号密码配置有误无法直连数据库执行脚本。临时处理重新输入数据库密码刷新数据源。SQL 请求节点未配置数据源现象Server error500报错。后果平台无法执行查询直接抛出服务器错误。处理检查所有SQL请求节点的数据源配置以及SQL表名是否正确修改数据加工组件配置丢失现象修改数据转换流、新增age字段后计算器、分组、排序等组件配置意外丢失导致加工后数据异常。原因平台数据转换流组件稳定性不足多次编辑、重新运行后易丢失自定义配置。临时处理每次运行转换流前逐项核对组件配置补全丢失的排序、分组、计算规则。实验总结本次完成浏览器用户画像分析大屏搭建实现布局设计、数据接入、多组件交互联动等操作。实验中遇到服务器报错经查是 SQL 节点未选择数据源导致同时存在数据查询返回空值、地图省份编码匹配异常、组件联动偶尔失效等问题逐一排查后完成全部功能。通过实操掌握了数据可视化大屏搭建、低代码蓝图配置与数据流转的基本方法。平台评价平台功能齐全集成数据处理、可视化设计、交互配置等模块组件丰富、上手简单贴合课程教学需求。但报错提示有些模糊的问题。整体而言是较优质的教学实验平台若优化细节体验使用效果会更好。