一、实验背景1. 实验目的实验四我们完成了浏览器行为数据的ETL加工生成了browser_coverage和browser_hourly两张统计表。实验五做了市场分析大屏。这次实验六的目标是搭建用户画像分析大屏具体要做三件事大屏静态布局在助睿Max上拖拽摆放各种图表组件设计好整个页面的视觉结构数据接入用蓝图编辑器把user_profile_stats表的数据接到各个图表上并配置浏览器筛选器联动交互设置配置大屏切换市场分析↔用户画像和地图省份点击联动。三个子实验合起来就是一个完整的数据大屏开发流程设计→接数→交互。2. 实验环境平台助睿数智Uniplore一站式数据科学实验平台登录地址https://lab.guilian.cn/可视化工具助睿Max低代码数据大屏工具支持拖拽搭建、蓝图编辑器配置交互数据来源团队私有数据库MySQL中的user_profile_stats表该表按浏览器维度统计了用户在各人口属性上的分布包含性别、年龄、学历、职业、收入、居住地类型、省份等字段3. 整体处理流程三个子实验的逻辑关系是这样的6-1 静态布局→ 在大屏画布上摆放组件确定位置和样式↓6-2 数据接入→ 用蓝图编辑器写SQL、配数据流让图表显示真实数据↓6-3 交互设置→ 配置大屏切换和地图下钻让大屏能互动说白了一个是“搭架子”一个是“通管道”一个是“装开关”。二、实验步骤2.1 大屏静态布局制作。先看参考图2.1.1 添加“基础平面地图”组件设置好大小、位置后添加“区域热力层”子组件点击“区域热力层”进入子组件配置页面可根据自身需求配置颜色渐变、边界线宽、高亮样式等属性。2.1.2 核心指标根据参考图的样式添加4个“数字翻牌器”纵向排列设置标题和数值样式。每个“数字翻牌器”使用“单张图片”组件设置背景背景图链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/mbg.png2.1.3 用户数根据参考图添加“单张图片”组件作为排行榜区域背景背景图链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/enrollment-data/top-list-bg.png。添加“通用标题”组件调整好样式。添加“轮播列表”组件调整好样式。2.1.4 性别分布使用“单张图片”组件设置区域背景设置标题。添加“基础饼图”组件调整大小和位置。2.1.5 年龄段分布使用“单张图片”组件设置区域背景设置标题。助睿Max 支持多种柱状图基础柱图、弧形柱图、水平基础柱图等等这里使用基础柱图2.1.6 学历分布使用“单张图片”组件设置区域背景并设置好标题。我们选择助睿Max 的水平基础柱图2.1.7 职业分布使用“单张图片”组件设置区域背景设置标题。这里使用助睿Max的基础柱图2.1.8 收入分布使用“单张图片”组件设置区域背景设置标题。请选择助睿Max 的水平基础柱图2.1.9使用“单张图片”组件设置区域背景设置标题。我们使用助睿Max 的轮播饼图2.1.10 筛选器在大屏顶部右侧位置添加“下拉选择”组件重命名为“浏览器筛选”调整组件位置和大小。在组件右侧属性面板中调整样式2.1.11 预览点击“保存”并“预览”检查整体布局是否协调、组件是否对齐、颜色是否一致。2.2 大屏数据接入本次实验只做全国范围的数据展示包括全国省份地图各省份用户数分布全国核心指标总用户数、平均年龄、本科及以上占比、中高收入占比全国各维度分布性别、年龄、学历、职业、收入、居住地类型先看参考图。2.2.1 前置准备修改目标表在团队私有数据库中执行以下SQLDROP 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用户画像统计表;修改转换流在分组聚合中保留 age 字段打开“用户画像表加工”转换流做以下修改1修改排序记录组件增加 age 字段的升序排序2修改分组组件分组字段更加 age3执行转换流2.2.2 组件导出打开上一实验制作的“用户画像”数据大屏在画布编辑器内右键单击左侧图层栏或中间画布区的组件选择导出到蓝图编辑器即可将对应组件导出到蓝图编辑器中。将以下组件依次导出到蓝图编辑器浏览器筛选器下拉多选性别分布饼图年龄段分布柱状图学历分布条形图职业分布柱状图收入分布柱状图居住地类型饼图用户省份分布地图省份排行榜轮播列表核心指标卡总用户数、平均年龄、中高收入占比导出成功后单击“蓝图编辑器”切换到蓝图编辑器可在导入节点列表中查看对应的节点。列表内所有节点都可供后续配置交互使用。2.2.3 添加浏览器参数接收节点双击节点添加两个处理方法方法一页面加载时执行一次设置基础URLconst BASE_URL https://lab.guilian.cn;window.GLOBAL_BASE_URL BASE_URL;return data;方法二每次筛选器变化时执行接收浏览器参数const SELECTED_BROWSER data.value;window.GLOBAL_SELECTED_BROWSER SELECTED_BROWSER;return { value: SELECTED_BROWSER };浏览器的选项我们可以直接使用静态数据title为前端显示内容value为实际查询内容即数据库中存储的对应 browser_name如2.2.4 添加SQL请求节点添加“SQL请求”节点重命名为“维度数据SQL请求”SQL如下// 从全局变量获取选中的浏览器值const selectedBrowser window.GLOBAL_SELECTED_BROWSER;let sql -- 性别分布selectgender as dimension_type,gender as name,sum(user_count) as valuefrom labs.user_profile_statswhere browser_name ${selectedBrowser}group by genderunion all-- 年龄段分布selectage as dimension_type,age_group as name,sum(user_count) as valuefrom labs.user_profile_statswhere browser_name ${selectedBrowser}group by age_groupunion all-- 学历分布selectedu as dimension_type,edu as name,sum(user_count) as valuefrom labs.user_profile_statswhere browser_name ${selectedBrowser}group by eduunion all-- 职业分布selectjob as dimension_type,job as name,sum(user_count) as valuefrom labs.user_profile_statswhere browser_name ${selectedBrowser}group by jobunion all-- 收入分布selectincome as dimension_type,income as name,sum(user_count) as valuefrom labs.user_profile_statswhere browser_name ${selectedBrowser}group by incomeunion all-- 居住地类型分布selectcity_type as dimension_type,city_type as name,sum(user_count) as valuefrom labs.user_profile_statswhere browser_name ${selectedBrowser}group by city_typeunion all-- 省份分布selectprovince as dimension_type,province as name,sum(user_count) as valuefrom labs.user_profile_statswhere browser_name ${selectedBrowser}group by province;return sql由于筛选器只能选单个浏览器SQL 中直接用where browser_name ${selectedBrowser}就可以了。2.2.5 添加核心指标SQL请求节点添加“SQL请求”节点重命名为“核心指标SQL请求”// 从全局变量获取选中的浏览器值const selectedBrowser window.GLOBAL_SELECTED_BROWSER;let sql -- 核心指标总用户数、平均年龄、本科及以上占比、中高收入占比selecttotal_users as name,sum(user_count) as valuefrom labs.user_profile_statswhere browser_name ${selectedBrowser}union allselectavg_age as name,round(sum(age * user_count) / sum(user_count), 1) as valuefrom labs.user_profile_statswhere browser_name ${selectedBrowser}union allselecthigh_edu_ratio as name,round(sum(case when edu in (本科, 硕士及以上) then user_count else 0 end) * 100.0 / sum(user_count), 1) as valuefrom labs.user_profile_statswhere browser_name ${selectedBrowser}union allselecthigh_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 valuefrom labs.user_profile_statswhere browser_name ${selectedBrowser};return sql2.2.6 添加维度数据分发节点添加“并行数据处理”节点重命名为“数据分发”。将SQL请求节点的“执行成功”连接到该节点。双击节点为每个图表添加一个处理方法分支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元 提取 1501var 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)2.2.7 添加核心指标分发节点添加另一个“并行数据处理”节点重命名为“核心指标分发”。将“核心指标SQL请求”节点的“执行成功”连接到该节点。分支示例总用户数var item data.find(item item.name total_users);return [{ value: item ? item.value : 0 }];2.2.8 连接节点按照蓝图连接示意图依次连接所有节点页面加载 → 浏览器参数接收输入浏览器筛选器 → 浏览器参数接收输入浏览器筛选器 → 维度数据SQL请求执行SQL浏览器筛选器 → 核心指标SQL请求执行SQL维度数据SQL请求执行成功 → 维度数据分发输入核心指标SQL请求执行成功 → 核心指标分发输入维度数据分发分支1-8 → 各维度图表组件导入数据接口核心指标分发分支1-4 → 四个核心指标卡导入数据接口2.2.9 保存与预览点击蓝图编辑器右上角的“保存”返回大屏再点击“预览”。测试功能大屏打开时默认显示第一个浏览器的用户画像数据如下拉框默认选中的浏览器选择其他浏览器所有图表应刷新为新浏览器的数据观察地图、饼图、柱状图是否都随筛选器变化2.3 大屏交互设置此小节基于前两个实验完成的市场分析大屏和用户画像大屏使用助睿Max的蓝图编辑器配置两个大屏之间的切换交互以及地图省份点击联动指标卡的功能。2.3.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在“判断选项卡”的不满足分支上添加两个“设置图层可见性”动作目标图层市场分析组 → 隐藏目标图层用户画像组 → 显示2.3.2 配置地图省份点击联动1先做一个名称映射代码如下// 省份特殊映射直辖市、自治区、特别行政区const specialMap {北京市: 北京, 天津市: 天津, 上海市: 上海, 重庆市: 重庆,广西壮族自治区: 广西, 内蒙古自治区: 内蒙古, 西藏自治区: 西藏,宁夏回族自治区: 宁夏, 新疆维吾尔自治区: 新疆,香港特别行政区: 香港, 澳门特别行政区: 澳门};let provinceName data.name;// 优先使用特殊映射if (specialMap[provinceName]) {provinceName specialMap[provinceName];} else {// 通用处理去除末尾的“省”、“自治区”、“市”provinceName provinceName.replace(/(省|自治区|市)$/, );}window.globalProvinceName provinceName;return provinceName;2根据当前浏览器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 valuefrom labs.user_profile_statswhere browser_name ${selectedBrowser} and province ${selectedProvince}union allselect avg_age as name,round(sum(age * user_count) / sum(user_count), 0) as valuefrom labs.user_profile_statswhere browser_name ${selectedBrowser} and province ${selectedProvince}union allselect high_edu_ratio as name,round(sum(case when edu in (本科, 硕士及以上) then user_count else 0 end) * 100.0 / sum(user_count), 2) as valuefrom labs.user_profile_statswhere browser_name ${selectedBrowser} and province ${selectedProvince}union allselect 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 valuefrom labs.user_profile_statswhere browser_name ${selectedBrowser} and province ${selectedProvince};console.log(生成的省份核心指标SQL, sql);return sql;3通过“并行数据处理”节点我们按name字段过滤将每个指标单独输出给对应的指标卡。分支示例总用户数var item data.find(item item.name total_users);return [{ value: item ? item.value : 0 }];其他分支类似。4区域热力层的“点击区域时”事件 → 连接到 “提取地区名称” 节点“提取地区名称” 的“执行成功”输出 → 连接到 “省份核心指标查询” 节点的“执行SQL”输入“省份核心指标查询” 的“执行成功”输出 → 连接到 “省份核心指标分发” 节点的输入“省份核心指标分发” 的四个输出分支 → 分别连接到四个核心指标卡的“导入数据接口”。2.3.3 根据用户数给地图热力层渲染颜色1提取 adcode 映射表并行数据处理操作步骤在蓝图中添加“并行数据处理”节点命名为“提取adcode映射表”。将区域热力层的“当数据接口地理边界geojson数据加载完成时”事件连接到该节点确保地图数据加载后执行。提取 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请求节点操作步骤添加“SQL请求”节点命名为“各省份用户数查询”。处理方法中输入以下代码const selectedBrowser window.GLOBAL_SELECTED_BROWSER; // 当前选中的浏览器const sql SELECTprovince AS name,SUM(user_count) AS valueFROM labs.user_profile_statsWHERE browser_name ${selectedBrowser}AND province IS NOT NULLAND province ! GROUP BY provinceORDER 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 返回字段名为 namelet 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完整蓝图数据流如下2.3.4 预览与发布保存并发布在弹出的发布对话框中打开发布分享开关复制分享链接打开浏览器将复制的链接粘贴到地址栏中即可在线观看三、实验结果1. 大屏展示效果静态布局完成后的大屏整体效果各组件位置、大小、配色基本与参考图一致区域内容状态顶部导航市场分析 / 用户画像 切换按钮正常显示顶部右侧浏览器下拉多选筛选器正常显示核心指标区4个翻牌器用户数、平均年龄、本科占比、高收入占比数据正常刷新主视觉区中国地图区域热力层按用户数渲染颜色排行榜用户数TOP5省份轮播列表正常排序显示维度分布区性别饼图、年龄柱图、学历条形图、职业柱图、收入条形图、居住地饼图全部正常渲染2. 交互功能验证交互功能操作预期结果实际结果大屏切换点击“市场分析”/“用户画像”显示对应大屏内容✅浏览器筛选下拉选择不同浏览器所有图表更新为对应浏览器的数据✅省份点击联动点击地图上的省份右侧4个指标卡更新为该省份数据✅地图热力渲染切换浏览器各省份颜色深浅按用户数变化✅3. 示例数据验证以Chrome浏览器为例从地图上点击“广东”省份右侧指标卡显示总用户数约XXX人平均年龄约XX岁本科及以上占比约XX%中高收入占比约XX%数据与直接在数据库中查询select ... where browser_nameChrome and province广东的结果一致说明数据流配置正确。四、问题与解决问题1Tab列表组件点击后无反应现象配置好Tab列表组件的两列数据后点击按钮没有触发任何切换效果。原因Tab列表组件虽然导入了蓝图但图层的可见性控制动作没有正确连接“分支判断”节点的输出端口。解决方法检查蓝图连线确保“判断选项卡”节点的“满足”输出端口连接到了“设置图层可见性”动作市场分析组显示、用户画像组隐藏“不满足”端口连接到了另一组动作市场分析组隐藏、用户画像组显示。重新连线后切换正常。问题2地图点击省份后指标卡不更新现象点击地图上的省份右侧核心指标卡没有任何变化。原因排查后发现两个问题一是地图组件的“点击区域时”事件没有开启交互事件开关默认是关闭的二是省份名称映射不完整部分省份简称匹配失败导致查询没有返回数据。解决方法在地图组件属性面板中勾选“开启交互事件”。然后在“提取地区名称”节点的映射代码里补充了所有直辖市、自治区、特别行政区的映射规则测试了几个省份都能正常匹配。问题3地图热力层数据不显示现象配置完数据映射节点并连接到热力层后地图上只显示底图没有颜色深浅。原因区域热力层的数据接口是“导入热力值数据接口”我一开始连到了“导入数据”接口两个接口不一样。解决方法检查组件动作列表选择正确的“导入热力值数据接口”进行连线。同时确认映射输出的数据格式为{name, value, area_id}其中area_id必须是数字类型Number(area_id)。修改后热力层正常渲染。问题4筛选器切换后地图热力层未刷新现象浏览器下拉框切换选项后其他图表都刷新了但地图颜色没变。原因热力层的数据更新依赖“各省份用户数查询”节点重新执行但这个节点没有被筛选器的变化触发。解决方法在蓝图里增加一条连线从“浏览器参数接收”节点的“执行成功”端口连接到“各省份用户数查询”节点的“执行SQL”端口。这样筛选器变化时会先更新全局变量然后触发SQL重新执行最后热力层数据更新。调整后切换浏览器时地图颜色同步变化。五、实验总结1. 收获通过这三个子实验我完整走完了一个数据大屏从布局到交互的开发流程。关于大屏设计学会了在不同图表类型之间做取舍——饼图适合看占比性别、居住地柱状图适合看分布形态年龄、职业条形图适合类别名称长的场景学历、收入地图则是最直观的地理空间信息载体。指标卡放在最显眼位置用大数字传达核心结论。关于蓝图编辑器这是一个让我比较惊喜的工具。以前写前端页面数据请求、事件监听、状态管理都要写一堆代码。蓝图用节点连线的方式把这些逻辑可视化出来学习成本不高但能做的事情不少——SQL请求、数据分发、条件判断、图层控制都能拖拽完成。“并行数据处理”节点让一条数据流同时喂给多个图表确实比每个图表单独发请求要高效。关于交互设计大屏切换通过控制图层显隐来实现这个思路很巧妙。地图点击联动涉及名称映射、动态SQL、数据分发三个环节每个环节都需要仔细处理数据格式。热力层渲染需要匹配adcode这个坑踩完之后对地图可视化的工作机制有了更深理解。2. 对平台的评价助睿Max的可视化能力在这次实验中得到了比较充分的体现组件丰富度地图、翻牌器、轮播饼图、轮播列表这些组件都派上了用场样式自定义选项也够用。图层管理通过组来管理市场分析和用户画像两个大屏的内容切换时只需要控制组的显隐不需要逐个操作组件这个设计方便。蓝图编辑器这是助睿Max的核心竞争力。数据流和交互逻辑可视化后调试问题比看代码直观很多。SQL请求节点支持动态拼接配合全局变量可以实现复杂筛选逻辑。性能数据量不算特别大但地图渲染和图表刷新响应都很快没有卡顿。