浏览器市场与用户画像分析实验

一、实验背景1. 实验目的1. 基于助睿数智Uniplore平台完成浏览器日志数据ETL加工清洗、聚合每日浏览器访问明细数据生成周活跃、使用频率、时长统计等8张业务表。2. 掌握数据大屏静态布局搭建完成9个多类型图表柱状图、饼图、指标卡、折线图页面排版与样式美化。3. 学习蓝图编辑器交互配置实现MySQL数据源接入、并行数据分发、图表自动渲染数据库真实数据。4. 排查数据链路报错、字段映射错误、页面脚本异常等可视化常见故障形成完整排错思路。2. 实验环境- 平台全称助睿数智Uniplore一站式数据科学实验平台- 实验地址https://lab.guilian.cn/- 数据规模1000用户800万条行为记录约825MB- 数据源团队私有MySQL数据库- 实验模块1. 数据加工ETL对应官方手册topic/1182. 大屏静态布局对应官方手册topic/1193. 大屏蓝图数据接入对应官方手册topic/1203. 整体处理流程1. **数据加工阶段**创建用户-日-浏览器-小时明细表 → 生成8张业务统计表 → 数据探查验证2. **大屏布局阶段**新建市场分析大屏 → 导入背景与素材 → 9个图表组件拖拽排版 → 组件导出至蓝图编辑器3. **数据接入阶段**创建数据库数据源 → 全局节点触发 → 6个SQL请求节点拉取数据 → 并行数据处理 → 图表绑定数据接口4. **验证发布阶段**预览调试 → 故障排查 → 发布生成分享链接---二、实验步骤模块1浏览器数据加工步骤1创建用户_日_浏览器_小时明细表1. 打开项目互联网用户行为日志新建转换流**创建用户_日_浏览器_小时明细表**2. 拖拽**执行一个SQL脚本**组件数据库连接选择团队私有数据库3. 输入建表SQLsqlCREATE TABLE IF NOT EXISTS daily_browser_detail (user_id VARCHAR(50) NOT NULL COMMENT 用户ID,usage_date DATE NOT NULL COMMENT 使用日期,browser_name VARCHAR(50) NOT NULL COMMENT 浏览器名称,hour TINYINT NOT NULL COMMENT 小时,total_duration_sec INT NOT NULL COMMENT 总使用时长(秒),active_count INT NOT NULL COMMENT 活跃次数) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户_日_浏览器_小时明细表;4. 点击运行执行转换流步骤2复制并修改转换流1. 复制互联网用户行为日志数据清洗抽取转换流重命名为**输出用户日浏览器小时明细表**2. 修正**排序记录1**组件排序字段改为user_id、usage_date、process_name、hour与分组组件一致3. 添加**值映射**组件连接分组1输出完成浏览器名称映射| 进程名 | 目标值 ||--------|--------|| iexplore.exe | IE浏览器 || 360chrome.exe | 360极速 || 360se.exe | 360se || chrome.exe | Google || sogouexplorer.exe | 搜狗 || QQBrowser.exe | QQ浏览器 |4. 修改**过滤记录**组件仅保留上述6个浏览器进程删除EXCEL.EXE等非浏览器进程5. 修改分组组件将聚合类型个数改为统计不同值的数量(N)6. 添加**表输出**组件目标表daily_browser_detail字段映射| 表字段 | 流字段 ||--------|--------|| user_id | user_id || usage_date | usage_date || browser_name | process_name || hour | hour || total_duration_sec | total_duration_sec || active_count | active_count |7. 勾选裁剪表运行转换流步骤3创建全部目标数据表1. 新建转换流**创建浏览器大屏分析目标数据表**2. 拖拽执行一个SQL脚本组件输入完整建表语句包含7张表的DROPCREATEsql-- 1. 核心指标概览表DROP TABLE IF EXISTS browser_overview;CREATE TABLE browser_overview (metric_name VARCHAR(50) NOT NULL COMMENT 指标名称,metric_value DECIMAL(12,2) NOT NULL COMMENT 指标值) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT核心指标概览表;-- 2. 各浏览器周活跃趋势表DROP TABLE IF EXISTS browser_weekly_active;CREATE TABLE browser_weekly_active (browser_name VARCHAR(50) NOT NULL COMMENT 浏览器名称,week_range VARCHAR(20) NOT NULL COMMENT 周日期范围,active_user_count INT NOT NULL COMMENT 活跃用户数) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT各浏览器周活跃趋势表;-- 3. 浏览器使用频率分布表DROP TABLE IF EXISTS browser_frequency_stats;CREATE TABLE browser_frequency_stats (browser_name VARCHAR(50) NOT NULL COMMENT 浏览器名称,usage_level VARCHAR(10) NOT NULL COMMENT 使用等级,user_count INT NOT NULL COMMENT 用户数) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT浏览器使用频率分布表;-- 4. 用户使用浏览器数量分布表DROP TABLE IF EXISTS browser_multi_usage;CREATE TABLE browser_multi_usage (browser_count VARCHAR(10) NOT NULL COMMENT 使用浏览器数量,user_count DECIMAL(5,2) NOT NULL COMMENT 用户数量) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户使用浏览器数量分布表;-- 5. 浏览器工作日周末对比表DROP TABLE IF EXISTS browser_weekday_weekend;CREATE TABLE browser_weekday_weekend (browser_name VARCHAR(50) NOT NULL COMMENT 浏览器名称,day_type VARCHAR(10) NOT NULL COMMENT 工作日/周末,avg_duration_sec INT NOT NULL COMMENT 人均使用时长(秒),total_duration_hour BIGINT NOT NULL COMMENT 总使用时长(小时),user_count INT NOT NULL COMMENT 用户数) COMMENT 浏览器工作日周末对比表;-- 6. 用户画像统计表DROP TABLE IF EXISTS user_profile_stats;CREATE TABLE user_profile_stats (browser_name VARCHAR(50) NOT NULL COMMENT 浏览器名称,gender VARCHAR(10) 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. 运行转换流完成所有表创建步骤4各浏览器周活跃趋势表数据抽取1. 新建转换流**各浏览器周活跃趋势表数据抽取**2. **表输入**读取daily_browser_detail表3. **字段选择**修改usage_date字段类型为Date格式yyyy-MM-dd4. **值映射**将所有日期映射为对应周区间5/7-5/13、6/4-6/10、7/2-7/8、8/6-8/12目标字段week_range5. **排序记录**按browser_name、week_range升序6. **分组**分组字段browser_name、week_range聚合user_id为统计不同值的数量输出active_user_count7. **表输出**写入browser_weekly_active勾选裁剪表8. 运行转换流步骤5各浏览器使用频率分布表数据抽取1. 新建转换流**使用频率分布数据抽取**2. **表输入**读取daily_browser_detail3. **排序记录**按user_id、browser_name升序4. **分组**按用户浏览器聚合total_duration_sec总和输出total_seconds5. **增加常量**新增hour_m_s36006. **计算器**计算total_hours total_seconds / hour_m_s保留2位小数7. **JavaScript代码**实现时长分级javascriptvar total_hours total_hours;var usage_level ;if (total_hours 3) {usage_level 轻度;} else if (total_hours 3 total_hours 10) {usage_level 中度;} else {usage_level 重度;}8. **排序记录**按browser_name、usage_level升序9. **分组**按浏览器使用等级统计用户数10. **表输出**写入browser_frequency_stats11. 运行转换流步骤6各浏览器使用数量分布表数据抽取1. 新建转换流**浏览器使用数量分布数据抽取**2. **表输入**读取daily_browser_detail3. **排序记录**按user_id升序4. **分组**按用户统计浏览器种类数量输出browser_cnt5. **JavaScript代码**转换为1种、2种、3种及以上javascriptvar browser_cnt browser_cnt;var browser_count ;if (browser_cnt 1) {browser_count 1种;} else if (browser_cnt 2) {browser_count 2种;} else {browser_count 3种及以上;}6. **排序记录**按browser_count升序7. **分组**按使用数量统计用户数8. **表输出**写入browser_multi_usage9. 运行转换流步骤7各浏览器工作日周末对比表数据抽取1. 新建转换流**浏览器工作日周末对比数据抽取**2. **表输入**读取daily_browser_detail3. **JavaScript代码**判断工作日/周末javascriptvar date usage_date;var dayOfWeek date.getDay();var day_type ;if (dayOfWeek 1 dayOfWeek 5) {day_type 工作日;} else {day_type 周末;}4. **排序记录**按browser_name、day_type升序5. **分组**聚合平均时长、总时长、用户数6. **增加常量**hour_m_s36007. **计算器**总时长转换为小时8. **字段选择**删除冗余字段9. **表输出**写入browser_weekday_weekend10. 运行转换流步骤8核心指标数据抽取1. 新建转换流**核心指标数据抽取**2. **表输入**执行SQL计算4个核心指标sqlSELECTROUND(SUM(total_duration_sec) / 3600, 2) AS total_hours,ROUND(SUM(total_duration_sec) / 3600 / COUNT(DISTINCT user_id), 2) AS avg_hours,ROUND((SELECT COUNT(DISTINCT user_id) FROM daily_browser_detailWHERE usage_date BETWEEN 2012-08-06 AND 2012-08-12) * 100.0 / COUNT(DISTINCT user_id), 2) AS active_ratio,ROUND((SELECT COUNT(*) FROM (SELECT user_id FROM daily_browser_detailWHERE usage_date BETWEEN 2012-05-07 AND 2012-07-08GROUP BY user_idHAVING SUM(total_duration_sec) / 3600 30) t) * 100.0 / COUNT(DISTINCT user_id), 2) AS heavy_ratioFROM daily_browser_detail3. **行转列**将4个指标转为键值对格式4. **值映射**将指标名映射为中文5. **表输出**写入browser_overview6. 运行转换流步骤9用户画像表加工1. 从公共空间导出demographic.csv到项目根目录2. 新建转换流**用户画像表加工**3. **CSV文件输入**读取demographic.csv编码UTF-84. **增加常量**year20125. **计算器**计算年龄age year - BIRTHDAY6. **JavaScript代码**年龄分段javascriptvar age_group ;if (age 18) {age_group 18;} else if (age 25) {age_group 18-25;} else if (age 35) {age_group 26-35;} else {age_group 35;}7. **表输入**读取daily_browser_detail8. 两个数据流分别按user_id和USERID排序9. **记录集连接**左连接两个表关联字段user_id和USERID10. **排序记录**按所有分组字段排序11. **分组**按浏览器所有用户属性统计用户数12. **表输出**写入user_profile_stats13. 运行转换流模块2大屏静态布局制作步骤1新建市场分析大屏1. 进入助睿数据大屏平台点击新建→新建大屏2. 选择空白模板命名为市场分析3. 进入编辑界面步骤2大屏基础样式设置1. **背景设置**右侧页面设置→背景图片粘贴链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/bg-2.png2. **标题设置**- 拖拽单张图片组件重命名标题banner- 图片链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/banner01.png- 基础属性宽度1920高度114位置x0,y03. **导航设置**- 拖拽单张图片作为导航背景链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/comprehensive-data/navigation-bg-1.png- 添加通用标题组件文本市场分析- 复制导航组件修改为用户画像调整位置4. 将顶部所有组件成组命名顶部步骤39个图表组件布局制作按照官方手册布局依次制作以下9个图表区域| 图表名称 | 组件类型 | 标题 | 背景图链接 ||----------|----------|------|------------|| 浏览器用户数 | 基础柱状图 | 浏览器用户数 | 短标题背景 || 浏览器使用时长 | 多维度饼图 | 浏览器使用时长 | 短标题背景 || 浏览器人均使用时长 | 基础柱状图 | 浏览器人均使用时长 | 短标题背景 || 数据概览 | 4个数据翻牌器 | 数据概览 | 长标题背景 || 工作日vs周末使用时长 | 分组柱状图 | 工作日vs周末使用时长 | 长标题背景 || 24小时活跃用户数分布 | 区域图 | 24小时活跃用户数分布 | 长标题背景 || 浏览器周活跃用户数变化 | 折线图 | 浏览器周活跃用户数变化 | 短标题背景 || 使用频率分布 | 垂直基本柱图 | 使用频率分布 | 短标题背景 || 浏览器使用数量分布 | 基本饼图 | 浏览器使用数量分布 | 短标题背景 |每个图表区域包含1. 区域背景链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/area-bg.png2. 标题背景短标题https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/title-bg-short.png长标题https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/title-bg-long.png3. 通用标题组件4. 对应图表组件步骤4组件导出到蓝图编辑器1. 右键画布中每个图表和指标卡组件2. 选择导出到蓝图编辑器3. 全部导出完成后点击顶部蓝图编辑器切换页面模块3大屏蓝图数据接入步骤1创建团队私有数据库数据源1. 大屏顶部切换到我的数据2. 点击新建→新建数据源3. 数据库类型MySQL填入团队私有数据库地址、端口、账号、密码4. 点击立即添加测试连接成功步骤2为市场格局3个图表配置数据1. 拖拽**全局节点**到画布2. 拖拽**SQL请求**节点连接全局节点页面初始化完成→执行SQL3. SQL请求配置- 数据源团队私有数据库- SQL代码javascriptlet sql selectbrowser_name as x,user_count as y1,round(total_duration_sec/3600,0) as y2,round((total_duration_sec/3600)/user_count,1) as y3from labs.browser_coverageorder by browser_namereturn sql4. 拖拽**并行数据处理**节点添加3个处理方法- 各浏览器用户数javascriptreturn data.map(item ({x: item.x,y: item.y1,s: 用户数}));- 各浏览器总使用时长javascriptreturn data.map(item ({name: item.x,value: item.y2}));- 各浏览器人均使用时长javascriptreturn data.map(item ({x: item.x,y: item.y3,s: 人均时长(小时)}));5. 连接SQL请求执行成功到3个并行处理方法6. 添加3个图表节点到画布连接并行处理输出到对应图表导入数据接口7. 返回画布每个图表- 数据源切换为对应并行处理接口- 字段映射柱状图x→x,y→y饼图name→name,value→value步骤3为指标区域配置数据1. 拖拽**SQL请求**节点连接全局节点2. SQL代码javascriptlet sql select metric_name, metric_value from labs.browser_overview return sql3. 拖拽**并行数据处理**节点添加4个处理方法- 总使用时长javascriptvar item data.find(d d.metric_name 总使用时长);return [{ value: item ? item.metric_value : 0 }];- 人均使用时长javascriptvar item data.find(d d.metric_name 人均使用时长);return [{ value: item ? item.metric_value : 0 }];- 活跃用户占比javascriptvar item data.find(d d.metric_name 活跃用户占比);return [{ value: item ? item.metric_value : 0 }];- 重度用户占比javascriptvar item data.find(d d.metric_name 重度用户占比);return [{ value: item ? item.metric_value : 0 }];4. 连接4个并行处理输出到对应数据翻牌器步骤4为其他图表配置数据按照相同步骤依次配置剩余5个图表| 图表名称 | SQL代码 ||----------|---------|| 工作日vs周末使用时长 | select browser_name as x, avg_duration_sec as y, day_type as s from labs.browser_weekday_weekend order by browser_name, day_type || 24小时活跃用户数分布 | select hour as x, active_user_count as y, browser_name as s from labs.browser_hourly order by browser_name, hour || 浏览器周活跃用户数变化 | select week_range as x, active_user_count as y, browser_name as s from labs.browser_weekly_active order by browser_name, week_range || 使用频率分布 | select browser_name as s, user_count as y, usage_level as x from labs.browser_frequency_stats order by browser_name || 浏览器使用数量分布 | select browser_count as name, user_count as value from labs.browser_multi_usage order by browser_count |步骤5预览与发布1. 点击画布右上角保存2. 点击预览按钮打开新页面查看效果3. 确认所有图表正常显示数据无控制台报错4. 点击发布按钮生成分享链接画布链接http://47.109.66.142:30887/#/dataScreen/release?shareId1235cbd8eb6f4f9caf63aa857500f61e三、实验结果1. **ETL加工结果**成功生成8张业务数据表所有转换流执行无报错数据探查验证各表数据完整准确。2. **静态布局结果**完成9个图表组件的规范排版页面分区清晰样式符合官方要求。3. **数据接入结果**- 数据库数据源连接正常6个SQL请求均可成功查询数据- 并行数据处理正确拆分数据输出符合图表要求的格式- 所有图表成功加载数据库真实数据无空白或静态示例数据4. **最终成果**生成可分享的浏览器市场分析大屏链接http://47.109.66.142:30887/#/dataScreen/release?shareId1235cbd8eb6f4f9caf63aa857500f61e---四、问题与解决问题1转换流运行报错Column week_range cannot be null1. 现象周活跃趋势表转换流表输出失败2. 原因值映射组件未覆盖所有日期部分日期未匹配到周区间3. 解决补全4周所有28天的日期与周区间映射关系问题2图表显示空白无任何数据1. 现象切换数据接口后图表无内容2. 原因字段映射错误将SQL原始字段y1/y3直接映射到图表y字段3. 解决并行处理已将y1/y3重命名为y图表统一映射x→x,y→y问题3预览报错Request error [SQL 请求] undefined1. 现象控制台红色报错图表无数据2. 原因蓝图存在两条独立SQL执行链逻辑冲突图表仍为静态数据模式3. 解决删除冗余节点保留单条执行链所有图表切换为数据接口模式问题4控制台报错Uncaught SyntaxError: Unexpected token 1. 现象页面脚本解析失败2. 原因浏览器缓存资源异常3. 解决CtrlShiftDelete清除全部缓存重新预览问题5饼图标签显示异常1. 现象饼图标签重叠或不显示2. 原因饼图内外半径设置不当3. 解决调整数据系列内外半径设置标签显示方式---五、实验总结1. 实验收获1. 完整掌握助睿平台从数据ETL加工到可视化大屏制作的全流程操作2. 熟练使用蓝图编辑器实现数据请求、并行处理、图表绑定的完整数据流3. 积累了丰富的可视化故障排查经验能够快速定位和解决常见问题4. 理解了商业数据分析大屏的设计思路和实现方法2. 平台评价助睿数智平台提供了一站式零代码数据处理与可视化解决方案大大降低了数据分析的门槛。蓝图编辑器的可视化编程方式非常直观适合初学者学习。但平台内网访问偶尔会出现资源加载异常的情况操作时需要注意及时保存。3. 改进建议1. 增加更多的图表样式和交互功能2. 优化蓝图编辑器的节点连线体验3. 提供更详细的错误提示信息方便用户排查问题