保姆级教程：浏览器用户行为数据分析大屏

1 实验目的本实验基于上两个实验《浏览器市场与用户画像分析-数据加工》产出的各项统计表使用助睿Max 数据大屏制作浏览器市场行为分析大屏。通过本实验学生应掌握根据业务问题设计大屏布局与图表选型将已加工的聚合表接入可视化工具生成可交互的数据大屏并提炼业务结论2 实验环境实验平台助睿在线实验平台 https://lab.guilian.cn/本次实验使用助睿数智Uniplore作为一站式数据科学平台。该平台覆盖从数据接入、ETL处理、机器学习建模到可视化展示的全链路零代码功能适用于数据分析教学与企业数据加工场景。助睿数智官网为 Uniplore iDIS-大数据智能全流程服务平台-BI数据可视化工具可视化工具助睿Max数据大屏3 实验数据本实验直接使用上一实验加工完成的大屏一市场行为分析目标表聚焦浏览器本身的市场格局、使用行为、时段偏好、竞争关系。模块子模块指标项组件关联数据表备注数据概览浏览器市场总使用时长指标卡browser_coverage所有用户累计使用时长小时人均使用时长指标卡browser_coverage总使用时长 / 覆盖用户数小时/周活跃用户占比指标卡browser_coverage周活跃用户数 / 覆盖用户数重度用户占比指标卡browser_frequency_stats使用时长10小时/周的用户占比市场格局用户规模用户数柱状图browser_coverage展示6个浏览器用户数使用规模使用时长饼图browser_coverage展示各浏览器使用时长占比使用粘性人均使用时长柱状图browser_coverage用户行为时间趋势周活跃趋势折线图browser_weekly_active展示第1-4周各浏览器活跃用户数变化使用习惯使用频率分布堆叠柱状图browser_frequency_stats轻/中/重度用户在各浏览器的占比时段偏好全天时段24小时活跃分布折线图browser_hourlyX轴小时Y轴活跃用户数不同颜色代表不同浏览器周内对比工作日vs周末分组柱状图daily_browser_detail对比工作日和周末的使用时长竞争关系使用数量浏览器使用数量分布饼图browser_multi_usage用户使用1种/2种/3种及以上浏览器的比例4 整体分析框架4.1 业务问题我们希望通过大屏回答以下核心业务问题业务问题对应的分析维度哪个浏览器用户最多哪个用得最久市场格局用户活跃度在增长还是下降周活跃趋势用户什么时候最活跃时段偏好用户是重度使用还是偶尔打开使用频率用户同时用几个浏览器浏览器使用数量用户还用什么其他浏览器竞品重叠工作日和周末使用习惯有何不同工作日vs周末4.2 大屏设计原则从上到下、从左到右的叙事顺序先整体后局部先趋势后细节核心指标突出显示顶部放置关键指标卡覆盖用户数、总时长、人均时长、活跃占比、重度占比图表类型与数据性质匹配趋势用折线图对比用条形图/柱状图分布用环形图/饼图颜色规范6个浏览器使用固定颜色标识IE蓝、Chrome红、360绿等便于识别交互支持提供浏览器筛选器支持查看全部或单个浏览器4.3 大屏布局草图参考图5 实验步骤点击实验平台左侧菜单“数据大屏”进入子平台——助睿数据大屏可视化平台助睿数据大屏可视化是一款通过图形化界面轻松搭建专业可视化应用的产品适用于会议展览、业务监控、风险预警、地理分析等场景。相比传统图表它以更生动友好的形式即时呈现数据背后的业务洞察广泛应用于零售、物流、电力、环保、交通等领域。其核心能力包括丰富的基础组件库、地理信息可视化轨迹/飞线/热力等、支持多种数据源含CSV、拖拽式搭建无需编程以及低代码蓝图编辑器满足开发者的高级控制与数据处理需求。5.1 创建数据大屏首先我们先创建本次实验的市场分析大屏点击“新建”按钮 - “新建大屏”在模板选择中点击“空白模板”点击后会出现大屏名称输入框我们输入“市场分析”然后点击下一步自动跳转到“市场分析”大屏的制作界面5.2 设置大屏样式5.2.1 背景设置想修改设置助睿数据大屏的背景可以通过修改背景图片来完成助睿数据大屏中使用到的图片元素均使用oss-browser存储并获取存储链接。本次实验用到的图片链接会在文后汇总若同学有新图片使用需求可以联系谭萍 处理。本次数据大屏的背景图片链接为进入大屏编辑页面后可以看到右边的页面设置栏屏幕大小默认为1920x1080可以根据最终展示的屏幕大小来修改。将以上背景图片链接复制后粘贴到“背景图片”后的文本框中覆盖原图片链接其他设置可以保持默认5.2.2 标题设置大屏的标题可以通过组件自己设计也可以自行设计一个图片来实现。本次实验我们预先设计好了标题图链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/banner01.png大屏左边是组件列表提供丰富的组件包括图表、文字、地图、媒体素材、交互等在这里我们的标题图片需要图片组件类承载。点击“媒体”组件分类点击“单张图片”组件大屏画布中自动出现图片组件为了方便管理右键组件点击“重命名”输入“标题banner”选中这个“标题banner”图片组件右边是它的设置栏点开“基础属性”可以设置长宽、位置等属性我们设置如下点开基本设置可以设置图片链接我们复制以下链接进去覆盖原链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/banner01.png这样标题banner就设置好了我们点击“保存”保存后点击“预览”可以随时查看效果5.2.3 导航设置因为我们有两个大屏所以可以设置导航做大屏间的跳转同样的点击“单张图片”组件重命名为“市场分析按钮背景”除了直接设置属性值也可以通过拖拽和缩放来设置组件的大小和位置不过微调还是使用属性值比较好导航按钮的背景图片链接为https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/comprehensive-data/navigation-bg-1.png 粘贴到基础设置的背景图链接中按钮上的文字我们使用“通用标题”来实现点击文字分类下的“通用标题”重命名为“市场分析”修改“市场分析”通用标题组件的基础属性和“市场分析按钮背景”图片组件一样点开基本设置修改标题名为“市场分析”切换“数据”tab选项点击“刷新数据”文字即显示为我们修改的文字点开文本样式可以设置字体、字号、颜色和粗细第二个大屏的导航可以复制这个按钮的设置复制的图片组件重命名为“用户画像按钮背景”通用标题组件重命名为“用户画像”现在只需修改“用户画像按钮背景”和“用户画像”组件的横坐标如下复制后的组件可能会不显示刷新数据即可将用户画像标题组件的内容改为“用户画像”颜色和粗细也做相应修改因为当前大屏的市场分析大屏对应按钮为选中效果其他为未选中效果保存预览一下至此顶部标题和导航配置完成为方便管理我们将这些组件放在一个组里。选中顶部区域的所有组件右键“成组”这个组命名为“顶部”5.3 设置内容布局与样式接下来我们先根据“4.3大屏布局草图”将各图表进行排版根据参考图每个图表区域包含以下内容区域背景使用单张图片组件标题背景使用单张图片组件标题使用通用标题组件图表使用具体图表组件5.3.1 用户规模-浏览器用户数我们首先制作左上角第一个图表区域点击单张图片组件重命名为“区域背景”并按照布局草图和参考图设置好大小、位置将区域背景图片链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/area-bg.png 粘贴到背景图链接中再添加一个单张图片组件重命名为“标题背景”用于图表标题背景这个图表在布局草图中属于短图表因此图表标题背景图片链接为短标题背景图片 https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/title-bg-short.png调整好位置和大小粘贴背景图链接即可添加通用标题组件重命名为“标题”按照参考图调整大小和位置标题名修改为“浏览器用户数”对齐方式为左对齐其他设置参考如下按照“3 实验数据”中的内容展示6个浏览器用户数的图表是柱状图我们点击“基础柱状图”组件重命名为“浏览器用户数柱状图”调整大小和位置图表的图例默认隐藏我们将其设置为可见并调整水平对齐方式为居中这时候我们会发现柱子和图例的距离过小影响美观我们可以点开“全局样式”来调整将柱子上边距调大即可其他样式大家可以自行设置将本小节增加的组件设置成组命名为“浏览器用户数”保存预览5.3.2 使用规模-浏览器使用时长占比复制上一小节制作的“浏览器用户数”组重命名为“浏览器使用时长”参考布局草图拖拽“浏览器使用时长”组到合适位置复制的组件内容可能会不显示重新刷新数据即可将标题名修改为“浏览器使用时长”并刷新数据浏览器使用时长占比图表类型为饼图我们删除复制的柱状图重新添加饼图。助睿数据大屏提供多样不同样式的饼图可根据需求选择这里我们选择“多维度饼图”调整位置大小名重命名为“浏览器使用时长占比”接下来设置饼图的样式我们取消外圈显示点击“饼图样式”点击外圈颜色后的色值方块将透明度拖到0并点击“确定”将标签类目设置为可见接下来我们可以设置每个浏览器在饼图中的颜色点开“数据系列”系列及代表分类也就是浏览器刚好数据中有6个浏览器将系列1-6的颜色设置为不同的颜色即可色值参考#2177FC、#3DC3DF、#FF948B、#8A79FE、#82F9A5、#97DFFF将饼图组件拖到“浏览器使用时长”组中并及时保存5.3.3 使用粘性-浏览器人均使用时长复制5.3.1小节制作的“浏览器用户数”组重命名为“浏览器人均使用时长”参考布局草图拖拽“浏览器使用时长”组到合适位置复制的组件内容可能会不显示重新刷新数据即可将标题名修改为“浏览器人均使用时长”并刷新数据浏览器人均使用时长图表类型为柱状图因此无需修改图表类型将复制的柱状图重命名为“人均使用时长柱状图”即可5.3.4 指标区复制5.3.1小节制作的“浏览器用户数”组重命名为“数据概览”参考布局草图拖拽“浏览器使用时长”组到合适位置调整组件的大小并刷新数据可以看到标题背景被拉伸了因为我们使用的是短的标题背景图现在需要换成长的标题背景图将标题名修改为“数据概览”并刷新数据删除复制的柱状图大屏中的指标卡是通过文字类组件实现的我们使用数据翻牌器来展示指标而单独一个指标看上去有点单调可以添加一些装饰元素。首先添加“单张图片”组件重命名为“图标”背景图添加链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/library-data/audio-video.png 并调整大小、位置如下图添加数据翻牌器组件重命名为“总使用时长”并调整大小、位置接下来调整数据翻牌器的样式。点开“标题”设置标题名修改为“总使用时长”对齐方式改为“居中对齐”字体大小、颜色、粗细也做相应修改如下点开“翻牌器”设置水平对齐改为“居中对齐”其他设置如下将图标和总使用时长两个组件成组命名为“总使用时长”复制3个“总使用时长”组分别重命名为“人均使用时长”、“活跃用户占比”、“重度用户占比”其中“活跃用户占比”、“重度用户占比”两个组中的图标背景图链接更改为 https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/library-data/degree-thesis.png修改翻牌器标题、后缀最后调整位置如下5.3.5 时段偏好-周内对比复制5.3.1小节制作的“浏览器用户数”组重命名为“周内对比”参考布局草图拖拽“周内对比”组到合适位置将柱状图删除重新添加“分组柱状图”命名为“工作日vs周末使用时长分组柱状图”并调整大小位置如下接下来调整系列2的柱子颜色为#3DC3DF其他样式调整参考如下效果5.3.6 时段偏好-24小时活跃分布复制上一小节制作的“周内对比”组重命名为“24小时活跃分布”参考布局草图拖拽“24小时活跃分布”组到合适位置复制的组件内容可能会不显示重新刷新数据即可将标题名修改为“24小时活跃用户数分布”并刷新数据删除复制的分组柱状图添加区域图并调整好大小、位置样式调整参考如下参考颜色为#29F1FA效果5.3.7使用习惯-使用频率分布复制上一小节制作的“浏览器周活跃用户数变化”组重命名为“使用频率分布”参考以上的实验调整位置、标题并更换图表类型为“垂直基本柱图”竞争关系-浏览器使用数量分布复制上一小节制作的“使用频率分布”组重命名为“浏览器使用数量分布”参考以上的实验调整位置、标题共并换图表类型为“基本饼图”基本饼图样式调整参考如下保存大屏最终预览效果如下至此市场分析大屏的静态布局已完成下一实验我们将使用蓝图编辑器完成数据接入。创建数据库数据源组件导出到蓝图编辑器只有当组件导入到蓝图编辑器后才可以为该组件配置交互。打开上一实验制作的“市场分析”数据大屏在画布编辑器内右键单击左侧图层栏或中间画布区的组件选择导出到蓝图编辑器即可将对应组件导出到蓝图编辑器中。在画布编辑器内右键单击左侧图层栏或中间画布区的组件选择导出到蓝图编辑器即可将对应组件导出到蓝图编辑器中。为“指标区域”4个数字翻牌器配置数据关键操作说明 添加新的“SQL请求”节点查询browser_overview表添加“并行数据处理”节点编写四个数据处理方法从返回数组中过滤出各自指标的数值连接到四个数字翻牌器组件。为“工作日vs周末使用时长”图表配置数据关键操作说明 添加“SQL请求”节点查询browser_weekday_weekend表直接将SQL节点的输出连接到“工作日vs周末使用时长”图表节点。配置要点SQL查询sqlselect browser_name as x, avg_duration_sec as y, day_type as sfrom labs.browser_weekday_weekend order by browser_name, day_type数据格式查询结果直接满足图表所需的x、y、s系列字段格式。为“24小时活跃用户分布”折线图配置数据关键操作说明 添加“SQL请求”节点查询browser_hourly表将SQL节点连接到图表节点在画布编辑器中为6个浏览器系列手动配置折线和标记颜色。配置要点SQL查询sqlselect hour as x, active_user_count as y, browser_name as sfrom labs.browser_hourly order by browser_name, hour颜色一致性需在图表的“数据系列”面板中为每个浏览器图例分别设置折线颜色和标记点颜色确保图例、折线、标记点颜色一致。配置全局节点保存后发布效果应如图