企业官网建设流程全解析

【助睿实验指导】实验5-2：浏览器市场分析-大屏静态布局制作

1 实验目的

本实验基于上两个实验《浏览器市场与用户画像分析-数据加工》产出的各项统计表，使用助睿Max 数据大屏制作浏览器市场行为分析大屏。

通过本实验，学生应掌握：

根据业务问题设计大屏布局与图表选型

将已加工的聚合表接入可视化工具

生成可交互的数据大屏，并提炼业务结论

2 实验环境

实验平台：助睿在线实验平台 https://lab.guilian.cn/

本次实验使用助睿数智（Uniplore）作为一站式数据科学平台。该平台覆盖从数据接入、ETL处理、机器学习建模到可视化展示的全链路零代码功能，适用于数据分析教学与企业数据加工场景。

助睿数智官网为 https://www.uniplore.com/

可视化工具：助睿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_hourly X轴小时，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小节制作的“浏览器用户数”组，重命名为“数据概览”

参考布局草图，拖拽“浏览器使用时长”组到合适位置，调整组件的大小，并刷新数据

可以看到标题背景被拉伸了，因为我们使用的是短的标题背景图，现在需要换成长的标题背景图：

title-bg-long

将标题名修改为“数据概览”，并刷新数据

删除复制的柱状图，大屏中的指标卡是通过文字类组件实现的，我们使用数据翻牌器来展示指标，而单独一个指标看上去有点单调，可以添加一些装饰元素。

首先，添加“单张图片”组件，重命名为“图标”，背景图添加链接：

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周末使用时长”

将柱状图删除，重新添加“分组柱状图”，命名为“工作日vs周末使用时长分组柱状图”，并调整大小，位置如下：

接下来调整系列2的柱子颜色为#3DC3DF

效果：

5.3.6 时段偏好-24小时活跃分布

复制上一小节制作的“周内对比”组，重命名为“24小时活跃分布”

参考布局草图，拖拽“24小时活跃分布”组到合适位置

复制的组件内容可能会不显示，重新刷新数据即可

将标题名修改为“24小时活跃用户数分布”，并刷新数据

删除复制的分组柱状图，添加区域图，并调整好大小、位置

样式调整参考如下，参考颜色为#29F1FA：

效果：

5.3.7 周活跃趋势-浏览器周活跃用户数变化

复制5.3.1小节制作的“浏览器用户数”组，重命名为“浏览器周活跃用户数变化”，参考以上的实验，调整位置、标题并更换图表类型，实现如下效果：

5.3.8 使用习惯-使用频率分布

复制上一小节制作的“浏览器周活跃用户数变化”组，重命名为“使用频率分布”，参考以上的实验，调整位置、标题并更换图表类型为“垂直基本柱图”

5.3.9 竞争关系-浏览器使用数量分布

复制上一小节制作的“使用频率分布”组，重命名为“浏览器使用数量分布”，参考以上的实验，调整位置、标题共并换图表类型为“基本饼图”

基本饼图样式调整参考如下：

保存大屏，最终预览效果如下：

至此，市场分析大屏的静态布局已完成，下一实验我们将使用蓝图编辑器，完成数据接入。