一、实验目的

本实验依托《浏览器市场与用户画像分析-数据加工》实验已完成的各类聚合统计数据表，借助助睿Max数据大屏工具，完成浏览器市场行为分析可视化大屏的设计、搭建与调试工作，实现浏览器市场数据的可视化呈现与业务解读。

通过本次实验，熟练掌握大数据可视化全流程实操技能，达成以下学习目标：

1. 结合浏览器市场分析核心业务问题，掌握数据大屏的整体布局规划、模块拆分与图表精准选型方法，建立可视化数据分析思维；

2. 熟练完成预处理聚合数据表与可视化平台的接入配置，掌握零代码数据对接、数据映射的基础操作；

3. 能够制作具备筛选、联动效果的交互式数据大屏，基于可视化图表挖掘浏览器市场格局、用户行为、使用偏好等核心业务规律，输出专业数据分析结论。

二、实验环境

本次实验依托助睿在线实验平台开展，平台网址：https://lab.guilian.cn/。平台搭载一站式数据科学工具，适配数据分析教学场景，可实现数据加工、可视化设计、大屏制作一体化实操。

实验核心底层工具为Uniplore iDIS优联博睿大数据智能服务平台，官网地址：https://www.uniplore.com/。该平台为AI驱动的零代码大数据基础软件，融合DataOps数据运营理念，覆盖数据接入、ETL数据处理、机器学习建模、可视化分析全链路功能，具备200+AI算法组件、200+ETL处理组件及多元化可视化能力，可满足教学实训与企业级数据治理、数据分析的双重场景需求。

本次大屏制作专用工具为助睿Max数据大屏，依托Uniplore平台可视化能力，支持拖拽式布局、智能图表匹配、数据联动筛选、大屏美化等功能，操作便捷、可视化效果丰富，适配业务数据大屏的设计与落地需求。

三、实验数据

本次实验无需重新加工原始数据，直接复用前序实验《浏览器市场与用户画像分析-数据加工》中已清洗、聚合、校验完成的标准化目标数据集。数据聚焦六大主流浏览器，围绕市场格局、用户使用行为、时段使用偏好、竞品竞争关系四大核心维度完成统计，所有数据表数据完整、维度清晰，可直接接入可视化大屏。

实验核心数据模块、指标、展示组件及关联数据源明细如下：

模块	子模块	指标项	组件	关联数据表	备注
数据概览	浏览器市场	总使用时长	指标卡	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.1 核心业务分析问题

本次大屏设计以业务需求为导向，所有可视化模块均围绕浏览器市场运营、用户行为分析的核心问题展开，通过对应维度的数据图表，直观解答业务疑问，具体对应关系如下：

业务问题	对应的分析维度
哪个浏览器用户最多？哪个用得最久？	市场格局
用户活跃度在增长还是下降？	周活跃趋势
用户什么时候最活跃？	时段偏好
用户是重度使用还是偶尔打开？	使用频率
用户同时用几个浏览器？	浏览器使用数量
用户还用什么其他浏览器？	竞品重叠
工作日和周末使用习惯有何不同？	工作日vs周末

4.2 大屏整体设计原则

本次数据大屏遵循逻辑清晰、重点突出、适配业务、交互友好的核心设计原则，兼顾美观性与实用性，具体规范如下：

1. 叙事逻辑层级清晰：整体采用「从上至下、从整体到局部、从趋势到细节」的布局逻辑。页面顶部放置核心指标概览，展示整体市场数据；中部细分市场格局、用户趋势、行为偏好；底部展示竞品竞争关系，形成完整的数据分析叙事链路。

2. 核心数据重点突出：将总使用时长、人均使用时长、活跃用户占比、重度用户占比等关键核心指标以指标卡形式置顶展示，直观呈现整体市场核心概况，快速抓取核心数据。

3. 图表类型精准适配：严格匹配数据特征与图表属性，时间趋势类数据采用折线图、维度对比类数据采用柱状图/分组柱状图、占比分布类数据采用饼图/堆叠柱状图，保证数据呈现直观易懂。

4. 视觉配色统一规范：为6款主流浏览器设置固定专属配色（IE蓝色、Chrome红色、360绿色等），全页面统一配色标准，避免视觉混淆，提升数据辨识度和页面美观度。

5. 交互功能灵活可用：大屏配置全局浏览器筛选组件，支持「全部浏览器整体查看」和「单一浏览器精准筛选」两种模式，可实现数据联动更新，满足整体分析和精细化单品分析的双重需求。

4.3 大屏布局草图

五、实验步骤

点击实验平台左侧菜单“数据大屏”

进入子平台——助睿数据大屏可视化平台

助睿数据大屏可视化是一款通过图形化界面轻松搭建专业可视化应用的产品，适用于会议展览、业务监控、风险预警、地理分析等场景。相比传统图表，它以更生动友好的形式即时呈现数据背后的业务洞察，广泛应用于零售、物流、电力、环保、交通等领域。其核心能力包括：丰富的基础组件库、地理信息可视化（轨迹/飞线/热力等）、支持多种数据源（含CSV）、拖拽式搭建无需编程，以及低代码蓝图编辑器（满足开发者的高级控制与数据处理需求）。

5.1 创建数据大屏

首先我们先创建本次实验的市场分析大屏，点击“+新建”按钮 - “新建大屏”

在模板选择中点击“空白模板”

点击后会出现大屏名称输入框

我们输入“市场分析”，然后点击下一步，自动跳转到“市场分析”大屏的制作界面

5.2 设置大屏样式

5.2.1 背景设置

想修改设置助睿数据大屏的背景，可以通过修改背景图片来完成

助睿数据大屏中使用到的图片元素均使用oss-browser存储，并获取存储链接。本次实验用到的图片链接会在文后汇总，若同学有新图片使用需求，可以联系@谭萍 处理。

本次数据大屏的背景图片链接为：

进入大屏编辑页面后，可以看到右边的页面设置栏，屏幕大小默认为1920x1080，可以根据最终展示的屏幕大小来修改。

将以上背景图片链接复制后粘贴到“背景图片”后的文本框中，覆盖原图片链接

其他设置可以保持默认

5.2.2 标题设置

大屏的标题可以通过组件自己设计，也可以自行设计一个图片来实现。本次实验我们预先设计好了标题图，链接：
大屏左边是组件列表，提供丰富的组件，包括图表、文字、地图、媒体素材、交互等，在这里，我们的标题图片需要图片组件类承载。

点击“媒体”组件分类，点击“单张图片”组件

大屏画布中自动出现图片组件

为了方便管理，右键组件，点击“重命名”

输入“标题banner”

选中这个“标题banner”图片组件，右边是它的设置栏

点开“基础属性”，可以设置长宽、位置等属性，我们设置如下：

点开基本设置，可以设置图片链接，我们复制以下链接进去，覆盖原链接： 标题

这样标题banner就设置好了，我们点击“保存”

保存后点击“预览”，可以随时查看效果

5.2.3 导航设置

因为我们有两个大屏，所以可以设置导航做大屏间的跳转

同样的，点击“单张图片”组件，重命名为“市场分析按钮背景”

除了直接设置属性值，也可以通过拖拽和缩放来设置组件的大小和位置

不过微调还是使用属性值比较好，导航按钮的背景图片链接为： 导航按钮

粘贴到基础设置的背景图链接中

按钮上的文字我们使用“通用标题”来实现，点击文字分类下的“通用标题”，重命名为“市场分析”

修改“市场分析”通用标题组件的基础属性，和“市场分析按钮背景”图片组件一样

点开基本设置，修改标题名为“市场分析”

切换“数据”tab选项，点击“刷新数据”

文字即显示为我们修改的文字

点开文本样式，可以设置字体、字号、颜色和粗细

第二个大屏的导航可以复制这个按钮的设置

复制的图片组件重命名为“用户画像按钮背景”，通用标题组件重命名为“用户画像”

现在，只需修改“用户画像按钮背景”和“用户画像”组件的横坐标，如下：

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

将用户画像标题组件的内容改为“用户画像”，颜色和粗细也做相应修改（因为当前大屏的市场分析大屏，对应按钮为选中效果，其他为未选中效果）

保存预览一下

至此，顶部标题和导航配置完成，为方便管理，我们将这些组件放在一个组里。选中顶部区域的所有组件，右键“成组”

这个组命名为“顶部”

5.3 设置内容布局与样式

接下来，我们先根据“4.3大屏布局草图”将各图表进行排版

根据参考图，每个图表区域包含以下内容：

• 区域背景：使用单张图片组件
• 标题背景：使用单张图片组件
• 标题：使用通用标题组件
• 图表：使用具体图表组件

5.3.1 用户规模-浏览器用户数

我们首先制作左上角第一个图表区域，点击单张图片组件，重命名为“区域背景”，并按照布局草图和参考图设置好大小、位置

将区域背景图片链接：图片

粘贴到背景图链接中

再添加一个单张图片组件，重命名为“标题背景”，用于图表标题背景，这个图表在布局草图中属于短图表，因此，图表标题背景图片链接为短标题背景图片： 图片

调整好位置和大小，粘贴背景图链接即可

​

添加通用标题组件，重命名为“标题”，按照参考图，调整大小和位置，标题名修改为“浏览器用户数”，对齐方式为左对齐，其他设置参考如下：

​

按照“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小节制作的“浏览器用户数”组，重命名为“数据概览”

​

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

​

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

​

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

​

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

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

并调整大小、位置，如下图：

​

添加数据翻牌器组件，重命名为“总使用时长”，并调整大小、位置

​

接下来，调整数据翻牌器的样式。

点开“标题”设置，标题名修改为“总使用时长”，对齐方式改为“居中对齐”，字体大小、颜色、粗细也做相应修改，如下：

​

点开“翻牌器”设置，水平对齐改为“居中对齐”，其他设置如下：

​

将图标和总使用时长两个组件成组，命名为“总使用时长”

​

复制3个“总使用时长”组，分别重命名为“人均使用时长”、“活跃用户占比”、“重度用户占比”，其中“活跃用户占比”、“重度用户占比”两个组中的图标背景图链接更改为： 图片

修改翻牌器标题、后缀，最后调整位置如下：

​

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 竞争关系-浏览器使用数量分布

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

​

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

​

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

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

​

六、问题与解决

问题1：标题背景图拉伸变形，页面美观度较差

问题原因：未按照模块实际宽度区分背景图素材，宽窄模块统一套用同款短标题背景图，短图像素尺寸无法适配宽幅模块，页面渲染时自动拉伸填充，造成图片畸变；同时组件预设长宽比例和原图比例不一致，进一步加剧图片变形。

解决方案：短标题背景图适用于小尺寸模块，数据概览等宽尺寸模块拉伸变形是因为配图不匹配。根据模块宽度区分使用长短款标题背景图，窄模块使用短标题背景素材，宽模块替换长款背景素材，同时微调组件长宽比例，保证图片无拉伸、无变形。

问题2：图表元素排布拥挤，图例与图表间距过小、视觉紧凑

问题原因：图表沿用默认全局样式参数，边距、图例间距初始数值偏小，未依据各类图表尺寸单独自定义留白，图例、坐标轴、绘图区排布预留空间不足，致使元素堆砌拥挤。

解决方案：选中对应图表组件，进入右侧「全局样式」设置，调大图表顶部边距、图例间距参数，单独适配不同图表的布局比例，分离图表主体与图例、坐标轴，优化整体视觉层次。

七、实验总结

本次实验主要完成了浏览器市场行为分析数据大屏的静态布局搭建、样式美化、模块排版与图表选型等全流程实操工作，依托Uniplore优联博睿平台旗下助睿Max可视化大屏零代码拖拽能力，无需编程即可完成专业数据大屏的页面设计，让我熟练掌握了大数据可视化大屏的基础制作流程、平台操作规范与页面美化技巧，在实操层面熟练掌握了空白大屏创建、背景与标题美化、组件复用、样式调试、模块化分组管理等核心操作，深刻理解了趋势类、对比类、占比类数据对应的图表适配原则，建立了配色统一、层级清晰、重点突出的标准化数据可视化设计思维；在业务层面，本次大屏设计始终围绕浏览器市场格局、用户使用行为、时段偏好、竞品竞争关系四大核心业务维度展开，实现了业务问题、数据指标与可视化图表的精准对应，让我摆脱了单纯的图表堆砌思维，真正理解了数据可视化服务于业务解读与决策分析的核心价值，同时在实操排错过程中，通过解决组件加载异常、图片拉伸变形、图表布局拥挤等各类问题，积累了平台调试与页面细节优化的实战经验，有效提升了自身的问题排查与细节打磨能力，养成了模块化、规范化的大屏制作习惯，本次实验仅完成大屏静态布局搭建工作，尚未进行数据接入与交互功能配置，后续我将基于本次搭建的静态页面，继续完成数据表接入、数据映射、筛选联动等动态功能配置，完整掌握大数据可视化从布局设计、数据对接至动态分析的全链路能力。