一、实验基本信息实验名称浏览器市场行为数据加工、大屏布局制作与动态数据接入综合实验实验平台助睿在线实验平台、助睿数智 Uniplore 一站式数据科学平台实验工具助睿 ETL 数据集成平台、助睿 Max 数据大屏可视化工具及蓝图编辑器实验数据800 万 条用户行为日志、用户属性数据共 825MB覆盖 1000 名用户实验顺序数据统计加工 → 大屏静态布局制作 → 大屏数据接入与动态可视化二、实验总目的完成数据处理、大屏设计、动态数据接入全流程操作将静态大屏升级为动态可视化大屏。掌握大数据 ETL、可视化搭建、数据源对接、SQL 查询等技能依托图表挖掘浏览器市场与用户行为规律具备数据分析与可视化落地能力。三、实验环境助睿在线实验平台负责实训流程管理与操作。Uniplore 数据平台实现数据接入、清洗、聚合等全链路数据处理。助睿 Max 工具完成大屏布局、样式设计、逻辑编排与动态数据加载。MySQL 数据库存储原始数据、中间数据与统计数据作为大屏数据源。四、整体分析框架与业务需求围绕浏览器行业开展多维度分析分析各浏览器用户规模、使用时长等市场格局监测周度、全天用户活跃度变化研究用户使用频次、终端数量、工作日与周末使用差异解析用户画像特征结合多浏览器使用情况分析竞品格局与用户忠诚度。二分析维度与对应数据表实验共产出8 张业务统计表 1 张用户画像统计表为两大可视化大屏提供数据源支撑明细基础表daily_browser_detail用户 - 日 - 浏览器 - 小时行为明细表所有统计数据的基础市场行为分析表用户画像统计表user_profile_stats整合用户属性与行为数据支撑用户画像维度可视化。五、分阶段实验步骤第一阶段浏览器行为数据大屏统计加工5.1 生成用户-日-浏览器-小时明细表上一轮实验的数据清洗转换流仅输出两类统计表未生成核心明细数据表本次实验需基于原有流程优化改造生成daily_browser_detail明细表作为所有统计分析的基础数据源。5.1.1 创建数据表结构1. 打开助睿数智平台进入上一轮实验创建的「互联网用户行为日志」项目新建转换流并命名为「创建用户_日_浏览器_小时明细表」。2. 拖拽【执行一个SQL脚本】组件至画布数据库连接选择「团队私有数据库」输入建表SQL语句创建明细表结构。3. 点击运行按钮执行脚本完成数据表初始化创建。5.1.2 复制并优化原有转换流1. 在项目中找到上一轮实验的「互联网用户行为日志数据清洗抽取」转换流右键复制并粘贴至项目根目录重命名为「输出用户日浏览器小时明细表」。2. 修正数据排序规则原排序组件仅按进程名排序需统一修改为与分组组件一致的排序字段避免数据重复问题。5.1.3 浏览器名称映射配置在分组组件后添加【值映射】组件对接原有分支分组、排序组件。2. 按照进程名与浏览器名称对应关系配置映射规则将系统进程名转换为通用浏览器名称iexplore.exe对应IE浏览器、360chrome.exe对应360极速、360se.exe对应360se、chrome.exe对应Google、sogouexplorer.exe对应搜狗、QQBrowser.exe对应QQ浏览器。数据过滤优化删除过滤条件中非浏览器进程EXCEL.EXE、WINWORD.EXE、AlilM.exe仅保留目标浏览器进程数据。4. 聚合规则优化将分组组件中“个数统计”改为“统计不同值的数量”保证数据统计精准性。5.1.4 数据输出与执行1. 拖拽【表输出】组件对接值映射组件配置数据库为团队私有数据库目标表为daily_browser_detail。2. 勾选「裁剪表」清空历史数据手动配置数据库字段映射关系。3. 点击运行执行完整转换流生成标准明细数据表。5.2 批量创建大屏分析目标数据表为统一存储各类统计结果本次实验批量创建所有大屏所需的目标数据表规避重复建表、表结构冲突问题。1. 新建转换流「创建浏览器大屏分析目标数据表」添加【执行一个SQL脚本】组件选择团队私有数据库。2. 输入批量建表SQL通过DROP语句先删除旧表再新建browser_overview、browser_weekly_active、browser_frequency_stats等所有目标表统一配置数据表字段、注释与字符集。3. 运行转换流完成所有目标数据表结构初始化。5.3 浏览器周活跃趋势表数据加工实验目标统计各浏览器每周活跃用户数量生成用户活跃度趋势数据。1. 新建转换流「各浏览器周活跃趋势表数据抽取」添加【表输入】组件读取daily_browser_detail明细数据。2. 添加【字段选择】组件标准化usage_date日期字段格式为yyyy-MM-dd。添加【值映射】组件将具体使用日期映射为对应周区间5/7-5/13、6/4-6/10、7/2-7/8、8/6-8/12生成week_range字段。添加【排序记录】组件按browser_name、week_range升序排序保证分组统计准确。添加【分组】组件按浏览器名称、周区间分组对user_id去重计数得到每周活跃用户数。配置【表输出】组件数据写入browser_weekly_active表执行转换流完成数据加工。5.4 浏览器使用频率分布表数据加工实验目标按使用时长划分轻、中、重度用户统计各浏览器不同使用等级的用户分布。1. 新建转换流「使用频率分布数据抽取」通过表输入读取明细数据。2. 排序后按user_id、browser_name分组汇总单用户单浏览器总使用时长秒。添加【增加常量】组件新增3600常量字段通过【计算器】组件将使用时长由秒换算为小时保留2位小数。4. 添加【JavaScript代码】组件编写等级判定代码根据使用时长划分轻、中、重度用户。按browser_name、usage_level排序分组统计各等级用户数量。配置表输出组件将结果写入browser_frequency_stats表并执行流转。5.5 浏览器使用数量分布表数据加工实验目标统计用户使用1种、2种、3种及以上浏览器的用户数量分布。1. 新建转换流「浏览器使用数量分布数据抽取」读取明细数据。2. 按user_id分组统计单个用户使用的浏览器种类数量。3. 通过【JavaScript代码】组件将浏览器数量划分为“1种、2种、3种及以上”三个等级。按使用浏览器数量等级分组统计各等级用户数。数据清洗后写入browser_multi_usage表完成数据加工。5.6 浏览器工作日周末对比表数据加工实验目标对比各浏览器工作日、周末的用户使用时长与用户规模差异。1. 新建转换流「浏览器工作日周末对比数据抽取」读取明细数据。2. 添加【JavaScript代码】组件解析日期对应的星期自动区分工作日、周末生成day_type字段。3. 按browser_name、day_type排序分组统计人均使用时长、总使用时长、活跃用户数。通过常量、计算器组件将总使用时长由秒换算为小时优化数据可读性。利用【字段选择】组件删除冗余中间字段规整数据结构。数据写入browser_weekday_weekend表并执行流转。5.7 大屏核心指标数据加工实验目标汇总全局核心指标生成大屏顶部指标卡数据总使用时长、人均时长、活跃率、重度用户占比。1. 新建转换流通过【表输入】组件执行自定义SQL一次性计算全局四大核心指标。2. 利用【行转列】组件将单行多指标数据转换为多行键值对格式。通过【值映射】组件将英文指标名转换为中文名称适配大屏展示需求。将规整后的指标数据写入browser_overview核心指标表。5.8 用户画像统计表数据加工实验目标关联用户行为数据与属性数据生成多维度用户画像统计数据。5.8.1 导入用户属性数据1. 进入平台公共空间数据资源库找到demographic.csv用户属性文件导出至项目根目录。新建转换流「用户画像表加工」添加【CSV文件输入】组件读取属性文件设置UTF-8编码自动获取字段信息。5.8.2 年龄维度计算与分级1. 添加【增加常量】组件固定年份为2012数据统计年份。2. 通过【计算器】组件用“2012-出生年份”计算用户实际年龄。通过JavaScript代码将年龄划分为18、18-25、26-35、35四个区间生成age_group字段。5.8.3 多源数据关联1. 添加【表输入】组件读取daily_browser_detail行为明细数据。对行为数据、属性数据分别添加【排序记录】组件统一按用户ID升序排序。3. 添加【记录集连接】组件以user_id/USERID为关联键左连接两类数据集整合行为数据与用户属性数据。5.8.4 分组统计与数据输出按browser_name、性别、年龄、学历、职业、收入、省份、居住地类型多维度排序分组。对用户ID去重计数统计各维度用户分布数量。配置表输出组件数据写入user_profile_stats用户画像统计表。运行转换流加载元数据并探查数据确认结果准确无误。第二阶段浏览器市场行为分析大屏静态布局制作本阶段使用助睿 Max 工具基于加工完成的数据集完成空白大屏创建、页面样式、导航、全组件布局与样式美化搭建静态可视化页面框架。5.1 创建空白数据大屏1. 在大屏可视化平台页面点击「新建」按钮选择「新建大屏」选项2. 在模板选择界面选取「空白模板」进入自定义制作页面3. 在名称输入框中填写大屏名称「市场分析」点击下一步自动跳转至大屏编辑制作界面。5.2 大屏基础样式设置5.2.1 页面背景设置本次实验所有大屏素材均存储于OSS浏览器可通过专属链接直接调用。进入大屏编辑页面后右侧为页面设置栏默认分辨率为1920×1080可根据展示需求自定义调整。复制页面背景素材链接粘贴至「背景图片」输入框替换默认背景其余参数保持默认设置即可。5.2.2 顶部标题设置大屏标题采用图片组件制作操作步骤如下1. 在左侧组件列表中找到「媒体」分类选择「单张图片」组件添加至画布2. 右键点击组件选择「重命名」命名为「标题banner」3. 选中组件在右侧基础设置中粘贴标题素材链接调整长宽、位置等基础属性4. 完成设置后点击「保存」可通过「预览」按钮实时查看展示效果。5.2.3 导航跳转设置为实现多屏跳转效果制作顶部导航按钮分为「市场分析」「用户画像」两个按钮操作步骤如下添加「单张图片」组件重命名为「市场分析按钮背景」粘贴导航背景素材链接调整组件尺寸与位置在左侧「文字」分类中选择「通用标题」组件添加至按钮背景上方重命名为「市场分析」匹配背景组件尺寸修改文字内容、字体、颜色设置为选中状态样式全选两个组件复制后分别重命名为「用户画像按钮背景」「用户画像」调整横坐标位置修改文字内容与样式设置为未选中状态4. 若组件内容不显示点击「刷新数据」即可完成后保存并预览效果5. 全选顶部所有标题、导航组件右键选择「成组」命名为「顶部」方便统一管理。5.3 内容布局与图表样式设置依据大屏布局参考图统一各图表区域制作规范每个分析模块均由「区域背景图标题背景图通用标题核心图表」组成逐模块完成排版与样式配置。5.3.1 浏览器用户数模块1. 添加「单张图片」组件重命名为「区域背景」粘贴图表区域背景链接调整尺寸位置2. 新增「单张图片」组件作为标题背景选用短标题背景素材适配模块尺寸添加「通用标题」组件命名为「浏览器用户数」设置左对齐调整字体样式添加「基础柱状图」组件重命名为「浏览器用户数柱状图」开启图例居中展示调大图表上边距优化视觉效果6. 全选该模块所有组件右键成组并命名为「浏览器用户数」保存设置。5.3.2 浏览器使用时长占比模块1. 复制「浏览器用户数」组件组重命名为「浏览器使用时长」拖拽至对应布局位置刷新数据2. 修改通用标题内容为「浏览器使用时长」删除原有柱状图组件添加「多维度饼图」组件重命名为「浏览器使用时长占比」取消外圈显示开启类目标签展示自定义6款浏览器专属配色#2177FC、#3DC3DF、#FF948B、#8A79FE、#82F9A5、#97DFFF保存组件并归入对应分组。5.3.3 浏览器人均使用时长模块1. 复制已有图表组件组重命名为「浏览器人均使用时长」调整布局位置并刷新数据修改标题内容为「浏览器人均使用时长」保留原有柱状图组件并完成重命名3. 微调图表样式、间距保证页面整体视觉统一保存设置。5.3.4 数据概览指标模块1. 复制基础图表组件组重命名为「数据概览」调整组件整体尺寸2. 将短标题背景替换为长标题背景素材修改标题为「数据概览」刷新数据删除原有柱状图采用「数据翻牌器」制作核心指标卡搭配图标组件优化视觉效果添加图标组件时长指标搭配对应素材用户类指标更换专属图标素材调整尺寸位置依次制作「总使用时长」「人均使用时长」「活跃用户占比」「重度用户占比」四个指标卡统一字体、对齐方式、后缀样式单组指标组件单独成组保证排版规整。5.3.5 工作日vs周末使用时长模块1. 复制基础组件组重命名为「周内对比」调整布局位置替换长标题背景图修改标题为「工作日vs周末使用时长」删除原有柱状图添加「分组柱状图」组件调整尺寸与位置自定义系列2柱子颜色为#3DC3DF微调图表间距、图例、字体样式保存配置。5.3.6 24小时活跃用户分布模块1. 复制周内对比组件组重命名为「24小时活跃分布」调整布局位置并刷新数据修改标题为「24小时活跃用户数分布」删除原有分组柱状图添加区域图组件调整尺寸设置主题色为#29F1FA优化渐变、透明度等样式参数保存设置。5.3.7 浏览器周活跃趋势模块复制已有组件组重命名模块名称修改对应标题替换为折线图组件适配周活跃趋势数据展示需求调整样式与布局保证与整体大屏风格统一。5.3.8 浏览器使用频率分布模块复制基础组件组修改模块标题替换为垂直基本柱图适配用户轻、中、重度使用频率分布数据展示微调样式参数并保存。5.3.9 浏览器使用数量分布模块复制组件组并修改标题替换为基本饼图组件优化饼图展示样式、标签位置、配色完成后保存所有设置。至此浏览器市场行为分析大屏静态布局与样式配置全部完成后续可通过蓝图编辑器完成数据接入与动态交互配置。第三阶段数据大屏数据接入蓝图编辑器动态配置本阶段依托助睿 Max 蓝图编辑器连接 MySQL 数据源、编写 SQL 查询、配置数据链路、绑定图表组件将静态大屏升级为动态数据可视化大屏。5.1 创建数据库数据源数据源是大屏读取数据库数据的前提首先需要完成团队私有MySQL数据库的数据源配置具体操作步骤如下1. 登录助睿Max数据大屏平台进入个人大屏后台点击左侧菜单栏【我的数据】选项。2. 在我的数据页面点击【新建】按钮选择【新建数据源】选项进入数据源配置界面。3. 准确填写团队私有数据库的地址、账号、密码、数据库名称等配置信息确认信息无误后点击【立即添加】完成数据源创建。4. 配置完成后切换页面标签再重新返回【我的数据】页面即可在数据源列表中看到已添加的团队私有数据库代表数据源连接成功。5.2 组件导出到蓝图编辑器大屏组件默认无法直接配置数据交互逻辑需先将组件导出至蓝图编辑器方可进行数据绑定与逻辑配置具体操作如下1. 在大屏编辑后台打开上一实验已完成布局的“市场分析”数据大屏项目。2. 在画布编辑界面右键点击左侧图层栏或画布中需要接入数据的图表组件选择【导出到蓝图编辑器】选项完成单个组件导出。3. 按照上述操作依次将所有需要动态加载数据的图表、指标组件全部导出至蓝图编辑器。4. 全部组件导出完成后点击页面上方【蓝图编辑器】图标切换至蓝图编辑页面在左侧导入节点列表中可查看所有已导出的组件节点后续可直接用于数据逻辑配置。5.3 添加全局节点全局节点是大屏初始化的核心节点可实现大屏打开后自动加载数据、执行预设逻辑配置步骤如下在蓝图编辑器左侧【逻辑节点】面板中找到【全局节点】点击并拖拽至中间编辑画布系统会自动生成一个全局节点。该节点默认在大屏页面初始化完成后自动触发后续所有数据查询与组件刷新操作。5.4 市场格局图表数据配置本环节为浏览器市场覆盖率相关的3个图表配置动态数据通过单SQL查询并行数据处理实现一源多用。5.4.1 添加并配置SQL请求节点1. 从逻辑节点面板拖拽【SQL请求】节点至画布将全局节点的【页面初始化完成】输出接口与SQL请求节点的【执行SQL】输入接口连线绑定。选中SQL请求节点在右侧配置面板中数据源选择已创建的【团队私有数据库】SQL类型选择【查询】在代码编辑框中输入适配的查询语句批量获取浏览器市场数据5.4.2 配置并行数据处理节点为实现单条SQL数据分发至3个不同图表添加并行数据处理节点对原始数据进行差异化字段适配1. 拖拽【并行数据处理】节点至画布在节点配置面板中新增2个处理方法总计3个处理方法分别命名为各浏览器用户数、各浏览器总使用时长、各浏览器人均使用时长。2. 将SQL请求节点的【执行成功】输出接口分别连接至3个处理方法的输入接口实现数据统一分发。根据各图表的数据接口规范分别编写3个分支的数据处理代码适配不同图表字段需求5.4.3 绑定图表节点并预览效果1. 将提前导出的3个市场格局图表节点添加至画布分别将并行数据处理3个分支的输出接口对应连接至各图表的【导入数据接口】。保存当前蓝图配置点击大屏预览按钮查看图表数据加载效果确认数据正常渲染。3. 若出现图表样式不协调问题进入画布编辑界面选中饼图组件在数据系列设置中调整内外半径参数优化可视化展示效果。5.5 指标区域数据配置4个数字翻牌器本环节为大屏顶部总使用时长、人均使用时长、活跃用户占比、重度用户占比4个指标卡配置动态数据。5.5.1 添加SQL请求节点1. 新增SQL请求节点绑定全局节点【页面初始化完成】触发接口。2. 数据源选择团队私有数据库输入查询的SQL语句该语句可批量查询四类核心指标数据返回结构化数组数据为指标卡提供数据支撑。5.5.2 配置并行数据处理节点1. 添加并行数据处理节点新增3个处理方法总计4个分支分别对应4个指标总使用时长、人均使用时长、活跃用户占比、重度用户占比。2. 将SQL请求成功接口与4个处理方法接口一一绑定。3. 依据数字翻牌器数据接口规范编写各分支数据适配代码精准提取对应指标数值5.5.3 绑定指标节点并预览将4个数字翻牌器节点添加至画布把并行数据处理4个分支的输出接口分别连接至对应指标卡的【导入数据接口】保存配置后预览确认指标数值正常加载。5.6 工作日vs周末使用时长图表数据配置1. 新增SQL请求节点绑定全局初始化触发接口输入对应查询语句获取浏览器工作日、周末使用时长对比数据2. 将工作日vs周末使用时长图表节点添加至画布把SQL请求节点成功接口连接至图表数据导入接口。3. 保存配置并预览确认分组对比数据展示正常。5.7 24小时活跃用户分布图表数据配置1. 新建SQL请求节点绑定全局触发接口编写SQL语句查询各时段浏览器活跃用户数据2. 添加24小时活跃分布折线图节点绑定SQL查询成功接口完成数据接入。3. 样式优化选中折线图在数据系列设置中针对6类浏览器对应的6个图例分别配置折线、标记点颜色保证折线、标签、图例颜色统一提升可视化效果。5.8 活跃用户周变化图表数据配置1. 参照上述步骤新建SQL请求节点配置查询语句获取周度活跃用户变化数据2. 添加周活跃趋势图表节点绑定SQL数据接口完成数据动态接入。3. 同理优化图表样式统一6个浏览器系列的折线、标记、图例颜色保证页面美观协调。5.9 使用频率分布图表数据配置1. 新建SQL请求节点绑定全局初始化接口输入浏览器使用频率统计查询语句2.添加使用频率分布堆叠柱状图节点绑定SQL查询成功接口。3. 保存配置预览图表数据确认不同使用频率区间的用户分布数据正常展示。5.10 浏览器使用数量分布图表数据配置1. 新建SQL请求节点配置对应查询语句获取用户浏览器使用数量分布数据2.添加浏览器使用数量饼图节点绑定SQL数据接口完成数据接入。3. 保存配置并预览确认饼图数据分布展示正常。5.11 大屏预览与发布1.整体预览所有组件数据配置、样式优化完成后点击大屏编辑页面右上角【预览】按钮全方位检查所有图表、指标数据的展示效果确认无数据缺失、样式错乱问题。2.正式发布预览无误后点击右上角【发布】按钮在弹出的对话框中选择【发布分享】。3.链接分享发布完成后点击分享链接右侧【复制】按钮复制大屏在线访问链接粘贴至浏览器即可在线查看完整动态数据大屏。六、实验结果与数据分析结论一实验落地成果数据加工成果完成原始 800 万条行为数据清洗与聚合生成 9 张标准统计数据表数据格式规范、可直接支撑可视化展示。大屏布局成果完成 1 套完整浏览器市场分析可视化大屏包含指标卡、柱状图、饼图、折线图、分组图等多类组件布局合理、视觉统一。动态可视化成果成功实现 MySQL 数据源接入、SQL 数据查询、组件数据绑定大屏可页面初始化自动加载动态数据所有图表、指标实时展示数据库真实业务数据支持在线分享访问。二业务分析结论市场格局主流浏览器中360 系列浏览器用户基数最大整体使用时长占比领先Google、IE 浏览器位列第二梯队人均使用时长表现突出用户粘性较强。时段使用特征用户活跃高峰集中在日间工作时段与晚间休闲时段凌晨活跃度显著下降符合大众作息规律。使用习惯大部分用户同时使用 1-2 款浏览器仅少数用户会切换 3 款及以上产品工作日浏览器使用时长高于周末体现明显的办公使用属性。用户分层中度使用用户占比最高重度用户群体集中在头部主流浏览器是产品核心运营对象。七、实验问题与解决方法问题 1ETL 数据加工后数据表存在重复数据 解决统一全流程排序字段在分组、去重组件中开启「统计不同值数量」过滤重复记录。问题 2数据源连接失败大屏无法读取数据库数据 解决核对数据库地址、端口、账号密码重新测试连接确认数据库权限开放重启数据源配置。八、实验总结与心得体会本次实验完整实践了从原始数据处理到动态可视化大屏落地的全流程。通过实操我熟练运用 ETL 工具完成数据清洗、分组与多表关联掌握了可视化大屏布局、样式美化以及蓝图编辑器的数据对接方法。同时也理解了数据聚合对大屏展示的重要意义构建起 “业务需求 - 数据加工 - 可视化呈现” 的分析思路综合实操能力得到锻炼。
一链到底！大数据 ETL + 可视化大屏实战全过程
一、实验基本信息实验名称浏览器市场行为数据加工、大屏布局制作与动态数据接入综合实验实验平台助睿在线实验平台、助睿数智 Uniplore 一站式数据科学平台实验工具助睿 ETL 数据集成平台、助睿 Max 数据大屏可视化工具及蓝图编辑器实验数据800 万 条用户行为日志、用户属性数据共 825MB覆盖 1000 名用户实验顺序数据统计加工 → 大屏静态布局制作 → 大屏数据接入与动态可视化二、实验总目的完成数据处理、大屏设计、动态数据接入全流程操作将静态大屏升级为动态可视化大屏。掌握大数据 ETL、可视化搭建、数据源对接、SQL 查询等技能依托图表挖掘浏览器市场与用户行为规律具备数据分析与可视化落地能力。三、实验环境助睿在线实验平台负责实训流程管理与操作。Uniplore 数据平台实现数据接入、清洗、聚合等全链路数据处理。助睿 Max 工具完成大屏布局、样式设计、逻辑编排与动态数据加载。MySQL 数据库存储原始数据、中间数据与统计数据作为大屏数据源。四、整体分析框架与业务需求围绕浏览器行业开展多维度分析分析各浏览器用户规模、使用时长等市场格局监测周度、全天用户活跃度变化研究用户使用频次、终端数量、工作日与周末使用差异解析用户画像特征结合多浏览器使用情况分析竞品格局与用户忠诚度。二分析维度与对应数据表实验共产出8 张业务统计表 1 张用户画像统计表为两大可视化大屏提供数据源支撑明细基础表daily_browser_detail用户 - 日 - 浏览器 - 小时行为明细表所有统计数据的基础市场行为分析表用户画像统计表user_profile_stats整合用户属性与行为数据支撑用户画像维度可视化。五、分阶段实验步骤第一阶段浏览器行为数据大屏统计加工5.1 生成用户-日-浏览器-小时明细表上一轮实验的数据清洗转换流仅输出两类统计表未生成核心明细数据表本次实验需基于原有流程优化改造生成daily_browser_detail明细表作为所有统计分析的基础数据源。5.1.1 创建数据表结构1. 打开助睿数智平台进入上一轮实验创建的「互联网用户行为日志」项目新建转换流并命名为「创建用户_日_浏览器_小时明细表」。2. 拖拽【执行一个SQL脚本】组件至画布数据库连接选择「团队私有数据库」输入建表SQL语句创建明细表结构。3. 点击运行按钮执行脚本完成数据表初始化创建。5.1.2 复制并优化原有转换流1. 在项目中找到上一轮实验的「互联网用户行为日志数据清洗抽取」转换流右键复制并粘贴至项目根目录重命名为「输出用户日浏览器小时明细表」。2. 修正数据排序规则原排序组件仅按进程名排序需统一修改为与分组组件一致的排序字段避免数据重复问题。5.1.3 浏览器名称映射配置在分组组件后添加【值映射】组件对接原有分支分组、排序组件。2. 按照进程名与浏览器名称对应关系配置映射规则将系统进程名转换为通用浏览器名称iexplore.exe对应IE浏览器、360chrome.exe对应360极速、360se.exe对应360se、chrome.exe对应Google、sogouexplorer.exe对应搜狗、QQBrowser.exe对应QQ浏览器。数据过滤优化删除过滤条件中非浏览器进程EXCEL.EXE、WINWORD.EXE、AlilM.exe仅保留目标浏览器进程数据。4. 聚合规则优化将分组组件中“个数统计”改为“统计不同值的数量”保证数据统计精准性。5.1.4 数据输出与执行1. 拖拽【表输出】组件对接值映射组件配置数据库为团队私有数据库目标表为daily_browser_detail。2. 勾选「裁剪表」清空历史数据手动配置数据库字段映射关系。3. 点击运行执行完整转换流生成标准明细数据表。5.2 批量创建大屏分析目标数据表为统一存储各类统计结果本次实验批量创建所有大屏所需的目标数据表规避重复建表、表结构冲突问题。1. 新建转换流「创建浏览器大屏分析目标数据表」添加【执行一个SQL脚本】组件选择团队私有数据库。2. 输入批量建表SQL通过DROP语句先删除旧表再新建browser_overview、browser_weekly_active、browser_frequency_stats等所有目标表统一配置数据表字段、注释与字符集。3. 运行转换流完成所有目标数据表结构初始化。5.3 浏览器周活跃趋势表数据加工实验目标统计各浏览器每周活跃用户数量生成用户活跃度趋势数据。1. 新建转换流「各浏览器周活跃趋势表数据抽取」添加【表输入】组件读取daily_browser_detail明细数据。2. 添加【字段选择】组件标准化usage_date日期字段格式为yyyy-MM-dd。添加【值映射】组件将具体使用日期映射为对应周区间5/7-5/13、6/4-6/10、7/2-7/8、8/6-8/12生成week_range字段。添加【排序记录】组件按browser_name、week_range升序排序保证分组统计准确。添加【分组】组件按浏览器名称、周区间分组对user_id去重计数得到每周活跃用户数。配置【表输出】组件数据写入browser_weekly_active表执行转换流完成数据加工。5.4 浏览器使用频率分布表数据加工实验目标按使用时长划分轻、中、重度用户统计各浏览器不同使用等级的用户分布。1. 新建转换流「使用频率分布数据抽取」通过表输入读取明细数据。2. 排序后按user_id、browser_name分组汇总单用户单浏览器总使用时长秒。添加【增加常量】组件新增3600常量字段通过【计算器】组件将使用时长由秒换算为小时保留2位小数。4. 添加【JavaScript代码】组件编写等级判定代码根据使用时长划分轻、中、重度用户。按browser_name、usage_level排序分组统计各等级用户数量。配置表输出组件将结果写入browser_frequency_stats表并执行流转。5.5 浏览器使用数量分布表数据加工实验目标统计用户使用1种、2种、3种及以上浏览器的用户数量分布。1. 新建转换流「浏览器使用数量分布数据抽取」读取明细数据。2. 按user_id分组统计单个用户使用的浏览器种类数量。3. 通过【JavaScript代码】组件将浏览器数量划分为“1种、2种、3种及以上”三个等级。按使用浏览器数量等级分组统计各等级用户数。数据清洗后写入browser_multi_usage表完成数据加工。5.6 浏览器工作日周末对比表数据加工实验目标对比各浏览器工作日、周末的用户使用时长与用户规模差异。1. 新建转换流「浏览器工作日周末对比数据抽取」读取明细数据。2. 添加【JavaScript代码】组件解析日期对应的星期自动区分工作日、周末生成day_type字段。3. 按browser_name、day_type排序分组统计人均使用时长、总使用时长、活跃用户数。通过常量、计算器组件将总使用时长由秒换算为小时优化数据可读性。利用【字段选择】组件删除冗余中间字段规整数据结构。数据写入browser_weekday_weekend表并执行流转。5.7 大屏核心指标数据加工实验目标汇总全局核心指标生成大屏顶部指标卡数据总使用时长、人均时长、活跃率、重度用户占比。1. 新建转换流通过【表输入】组件执行自定义SQL一次性计算全局四大核心指标。2. 利用【行转列】组件将单行多指标数据转换为多行键值对格式。通过【值映射】组件将英文指标名转换为中文名称适配大屏展示需求。将规整后的指标数据写入browser_overview核心指标表。5.8 用户画像统计表数据加工实验目标关联用户行为数据与属性数据生成多维度用户画像统计数据。5.8.1 导入用户属性数据1. 进入平台公共空间数据资源库找到demographic.csv用户属性文件导出至项目根目录。新建转换流「用户画像表加工」添加【CSV文件输入】组件读取属性文件设置UTF-8编码自动获取字段信息。5.8.2 年龄维度计算与分级1. 添加【增加常量】组件固定年份为2012数据统计年份。2. 通过【计算器】组件用“2012-出生年份”计算用户实际年龄。通过JavaScript代码将年龄划分为18、18-25、26-35、35四个区间生成age_group字段。5.8.3 多源数据关联1. 添加【表输入】组件读取daily_browser_detail行为明细数据。对行为数据、属性数据分别添加【排序记录】组件统一按用户ID升序排序。3. 添加【记录集连接】组件以user_id/USERID为关联键左连接两类数据集整合行为数据与用户属性数据。5.8.4 分组统计与数据输出按browser_name、性别、年龄、学历、职业、收入、省份、居住地类型多维度排序分组。对用户ID去重计数统计各维度用户分布数量。配置表输出组件数据写入user_profile_stats用户画像统计表。运行转换流加载元数据并探查数据确认结果准确无误。第二阶段浏览器市场行为分析大屏静态布局制作本阶段使用助睿 Max 工具基于加工完成的数据集完成空白大屏创建、页面样式、导航、全组件布局与样式美化搭建静态可视化页面框架。5.1 创建空白数据大屏1. 在大屏可视化平台页面点击「新建」按钮选择「新建大屏」选项2. 在模板选择界面选取「空白模板」进入自定义制作页面3. 在名称输入框中填写大屏名称「市场分析」点击下一步自动跳转至大屏编辑制作界面。5.2 大屏基础样式设置5.2.1 页面背景设置本次实验所有大屏素材均存储于OSS浏览器可通过专属链接直接调用。进入大屏编辑页面后右侧为页面设置栏默认分辨率为1920×1080可根据展示需求自定义调整。复制页面背景素材链接粘贴至「背景图片」输入框替换默认背景其余参数保持默认设置即可。5.2.2 顶部标题设置大屏标题采用图片组件制作操作步骤如下1. 在左侧组件列表中找到「媒体」分类选择「单张图片」组件添加至画布2. 右键点击组件选择「重命名」命名为「标题banner」3. 选中组件在右侧基础设置中粘贴标题素材链接调整长宽、位置等基础属性4. 完成设置后点击「保存」可通过「预览」按钮实时查看展示效果。5.2.3 导航跳转设置为实现多屏跳转效果制作顶部导航按钮分为「市场分析」「用户画像」两个按钮操作步骤如下添加「单张图片」组件重命名为「市场分析按钮背景」粘贴导航背景素材链接调整组件尺寸与位置在左侧「文字」分类中选择「通用标题」组件添加至按钮背景上方重命名为「市场分析」匹配背景组件尺寸修改文字内容、字体、颜色设置为选中状态样式全选两个组件复制后分别重命名为「用户画像按钮背景」「用户画像」调整横坐标位置修改文字内容与样式设置为未选中状态4. 若组件内容不显示点击「刷新数据」即可完成后保存并预览效果5. 全选顶部所有标题、导航组件右键选择「成组」命名为「顶部」方便统一管理。5.3 内容布局与图表样式设置依据大屏布局参考图统一各图表区域制作规范每个分析模块均由「区域背景图标题背景图通用标题核心图表」组成逐模块完成排版与样式配置。5.3.1 浏览器用户数模块1. 添加「单张图片」组件重命名为「区域背景」粘贴图表区域背景链接调整尺寸位置2. 新增「单张图片」组件作为标题背景选用短标题背景素材适配模块尺寸添加「通用标题」组件命名为「浏览器用户数」设置左对齐调整字体样式添加「基础柱状图」组件重命名为「浏览器用户数柱状图」开启图例居中展示调大图表上边距优化视觉效果6. 全选该模块所有组件右键成组并命名为「浏览器用户数」保存设置。5.3.2 浏览器使用时长占比模块1. 复制「浏览器用户数」组件组重命名为「浏览器使用时长」拖拽至对应布局位置刷新数据2. 修改通用标题内容为「浏览器使用时长」删除原有柱状图组件添加「多维度饼图」组件重命名为「浏览器使用时长占比」取消外圈显示开启类目标签展示自定义6款浏览器专属配色#2177FC、#3DC3DF、#FF948B、#8A79FE、#82F9A5、#97DFFF保存组件并归入对应分组。5.3.3 浏览器人均使用时长模块1. 复制已有图表组件组重命名为「浏览器人均使用时长」调整布局位置并刷新数据修改标题内容为「浏览器人均使用时长」保留原有柱状图组件并完成重命名3. 微调图表样式、间距保证页面整体视觉统一保存设置。5.3.4 数据概览指标模块1. 复制基础图表组件组重命名为「数据概览」调整组件整体尺寸2. 将短标题背景替换为长标题背景素材修改标题为「数据概览」刷新数据删除原有柱状图采用「数据翻牌器」制作核心指标卡搭配图标组件优化视觉效果添加图标组件时长指标搭配对应素材用户类指标更换专属图标素材调整尺寸位置依次制作「总使用时长」「人均使用时长」「活跃用户占比」「重度用户占比」四个指标卡统一字体、对齐方式、后缀样式单组指标组件单独成组保证排版规整。5.3.5 工作日vs周末使用时长模块1. 复制基础组件组重命名为「周内对比」调整布局位置替换长标题背景图修改标题为「工作日vs周末使用时长」删除原有柱状图添加「分组柱状图」组件调整尺寸与位置自定义系列2柱子颜色为#3DC3DF微调图表间距、图例、字体样式保存配置。5.3.6 24小时活跃用户分布模块1. 复制周内对比组件组重命名为「24小时活跃分布」调整布局位置并刷新数据修改标题为「24小时活跃用户数分布」删除原有分组柱状图添加区域图组件调整尺寸设置主题色为#29F1FA优化渐变、透明度等样式参数保存设置。5.3.7 浏览器周活跃趋势模块复制已有组件组重命名模块名称修改对应标题替换为折线图组件适配周活跃趋势数据展示需求调整样式与布局保证与整体大屏风格统一。5.3.8 浏览器使用频率分布模块复制基础组件组修改模块标题替换为垂直基本柱图适配用户轻、中、重度使用频率分布数据展示微调样式参数并保存。5.3.9 浏览器使用数量分布模块复制组件组并修改标题替换为基本饼图组件优化饼图展示样式、标签位置、配色完成后保存所有设置。至此浏览器市场行为分析大屏静态布局与样式配置全部完成后续可通过蓝图编辑器完成数据接入与动态交互配置。第三阶段数据大屏数据接入蓝图编辑器动态配置本阶段依托助睿 Max 蓝图编辑器连接 MySQL 数据源、编写 SQL 查询、配置数据链路、绑定图表组件将静态大屏升级为动态数据可视化大屏。5.1 创建数据库数据源数据源是大屏读取数据库数据的前提首先需要完成团队私有MySQL数据库的数据源配置具体操作步骤如下1. 登录助睿Max数据大屏平台进入个人大屏后台点击左侧菜单栏【我的数据】选项。2. 在我的数据页面点击【新建】按钮选择【新建数据源】选项进入数据源配置界面。3. 准确填写团队私有数据库的地址、账号、密码、数据库名称等配置信息确认信息无误后点击【立即添加】完成数据源创建。4. 配置完成后切换页面标签再重新返回【我的数据】页面即可在数据源列表中看到已添加的团队私有数据库代表数据源连接成功。5.2 组件导出到蓝图编辑器大屏组件默认无法直接配置数据交互逻辑需先将组件导出至蓝图编辑器方可进行数据绑定与逻辑配置具体操作如下1. 在大屏编辑后台打开上一实验已完成布局的“市场分析”数据大屏项目。2. 在画布编辑界面右键点击左侧图层栏或画布中需要接入数据的图表组件选择【导出到蓝图编辑器】选项完成单个组件导出。3. 按照上述操作依次将所有需要动态加载数据的图表、指标组件全部导出至蓝图编辑器。4. 全部组件导出完成后点击页面上方【蓝图编辑器】图标切换至蓝图编辑页面在左侧导入节点列表中可查看所有已导出的组件节点后续可直接用于数据逻辑配置。5.3 添加全局节点全局节点是大屏初始化的核心节点可实现大屏打开后自动加载数据、执行预设逻辑配置步骤如下在蓝图编辑器左侧【逻辑节点】面板中找到【全局节点】点击并拖拽至中间编辑画布系统会自动生成一个全局节点。该节点默认在大屏页面初始化完成后自动触发后续所有数据查询与组件刷新操作。5.4 市场格局图表数据配置本环节为浏览器市场覆盖率相关的3个图表配置动态数据通过单SQL查询并行数据处理实现一源多用。5.4.1 添加并配置SQL请求节点1. 从逻辑节点面板拖拽【SQL请求】节点至画布将全局节点的【页面初始化完成】输出接口与SQL请求节点的【执行SQL】输入接口连线绑定。选中SQL请求节点在右侧配置面板中数据源选择已创建的【团队私有数据库】SQL类型选择【查询】在代码编辑框中输入适配的查询语句批量获取浏览器市场数据5.4.2 配置并行数据处理节点为实现单条SQL数据分发至3个不同图表添加并行数据处理节点对原始数据进行差异化字段适配1. 拖拽【并行数据处理】节点至画布在节点配置面板中新增2个处理方法总计3个处理方法分别命名为各浏览器用户数、各浏览器总使用时长、各浏览器人均使用时长。2. 将SQL请求节点的【执行成功】输出接口分别连接至3个处理方法的输入接口实现数据统一分发。根据各图表的数据接口规范分别编写3个分支的数据处理代码适配不同图表字段需求5.4.3 绑定图表节点并预览效果1. 将提前导出的3个市场格局图表节点添加至画布分别将并行数据处理3个分支的输出接口对应连接至各图表的【导入数据接口】。保存当前蓝图配置点击大屏预览按钮查看图表数据加载效果确认数据正常渲染。3. 若出现图表样式不协调问题进入画布编辑界面选中饼图组件在数据系列设置中调整内外半径参数优化可视化展示效果。5.5 指标区域数据配置4个数字翻牌器本环节为大屏顶部总使用时长、人均使用时长、活跃用户占比、重度用户占比4个指标卡配置动态数据。5.5.1 添加SQL请求节点1. 新增SQL请求节点绑定全局节点【页面初始化完成】触发接口。2. 数据源选择团队私有数据库输入查询的SQL语句该语句可批量查询四类核心指标数据返回结构化数组数据为指标卡提供数据支撑。5.5.2 配置并行数据处理节点1. 添加并行数据处理节点新增3个处理方法总计4个分支分别对应4个指标总使用时长、人均使用时长、活跃用户占比、重度用户占比。2. 将SQL请求成功接口与4个处理方法接口一一绑定。3. 依据数字翻牌器数据接口规范编写各分支数据适配代码精准提取对应指标数值5.5.3 绑定指标节点并预览将4个数字翻牌器节点添加至画布把并行数据处理4个分支的输出接口分别连接至对应指标卡的【导入数据接口】保存配置后预览确认指标数值正常加载。5.6 工作日vs周末使用时长图表数据配置1. 新增SQL请求节点绑定全局初始化触发接口输入对应查询语句获取浏览器工作日、周末使用时长对比数据2. 将工作日vs周末使用时长图表节点添加至画布把SQL请求节点成功接口连接至图表数据导入接口。3. 保存配置并预览确认分组对比数据展示正常。5.7 24小时活跃用户分布图表数据配置1. 新建SQL请求节点绑定全局触发接口编写SQL语句查询各时段浏览器活跃用户数据2. 添加24小时活跃分布折线图节点绑定SQL查询成功接口完成数据接入。3. 样式优化选中折线图在数据系列设置中针对6类浏览器对应的6个图例分别配置折线、标记点颜色保证折线、标签、图例颜色统一提升可视化效果。5.8 活跃用户周变化图表数据配置1. 参照上述步骤新建SQL请求节点配置查询语句获取周度活跃用户变化数据2. 添加周活跃趋势图表节点绑定SQL数据接口完成数据动态接入。3. 同理优化图表样式统一6个浏览器系列的折线、标记、图例颜色保证页面美观协调。5.9 使用频率分布图表数据配置1. 新建SQL请求节点绑定全局初始化接口输入浏览器使用频率统计查询语句2.添加使用频率分布堆叠柱状图节点绑定SQL查询成功接口。3. 保存配置预览图表数据确认不同使用频率区间的用户分布数据正常展示。5.10 浏览器使用数量分布图表数据配置1. 新建SQL请求节点配置对应查询语句获取用户浏览器使用数量分布数据2.添加浏览器使用数量饼图节点绑定SQL数据接口完成数据接入。3. 保存配置并预览确认饼图数据分布展示正常。5.11 大屏预览与发布1.整体预览所有组件数据配置、样式优化完成后点击大屏编辑页面右上角【预览】按钮全方位检查所有图表、指标数据的展示效果确认无数据缺失、样式错乱问题。2.正式发布预览无误后点击右上角【发布】按钮在弹出的对话框中选择【发布分享】。3.链接分享发布完成后点击分享链接右侧【复制】按钮复制大屏在线访问链接粘贴至浏览器即可在线查看完整动态数据大屏。六、实验结果与数据分析结论一实验落地成果数据加工成果完成原始 800 万条行为数据清洗与聚合生成 9 张标准统计数据表数据格式规范、可直接支撑可视化展示。大屏布局成果完成 1 套完整浏览器市场分析可视化大屏包含指标卡、柱状图、饼图、折线图、分组图等多类组件布局合理、视觉统一。动态可视化成果成功实现 MySQL 数据源接入、SQL 数据查询、组件数据绑定大屏可页面初始化自动加载动态数据所有图表、指标实时展示数据库真实业务数据支持在线分享访问。二业务分析结论市场格局主流浏览器中360 系列浏览器用户基数最大整体使用时长占比领先Google、IE 浏览器位列第二梯队人均使用时长表现突出用户粘性较强。时段使用特征用户活跃高峰集中在日间工作时段与晚间休闲时段凌晨活跃度显著下降符合大众作息规律。使用习惯大部分用户同时使用 1-2 款浏览器仅少数用户会切换 3 款及以上产品工作日浏览器使用时长高于周末体现明显的办公使用属性。用户分层中度使用用户占比最高重度用户群体集中在头部主流浏览器是产品核心运营对象。七、实验问题与解决方法问题 1ETL 数据加工后数据表存在重复数据 解决统一全流程排序字段在分组、去重组件中开启「统计不同值数量」过滤重复记录。问题 2数据源连接失败大屏无法读取数据库数据 解决核对数据库地址、端口、账号密码重新测试连接确认数据库权限开放重启数据源配置。八、实验总结与心得体会本次实验完整实践了从原始数据处理到动态可视化大屏落地的全流程。通过实操我熟练运用 ETL 工具完成数据清洗、分组与多表关联掌握了可视化大屏布局、样式美化以及蓝图编辑器的数据对接方法。同时也理解了数据聚合对大屏展示的重要意义构建起 “业务需求 - 数据加工 - 可视化呈现” 的分析思路综合实操能力得到锻炼。
