#浏览器 #数据分析 #可视化 #市场数据 #助睿数智 #可视化分析 #ELT

手把手教你用拖拽式工具搭建专业数据大屏，让业务洞察一目了然

前言

数据加工完成之后，如何让老板和业务方直观地看到分析结果？

答案就是——数据大屏。

本文延续上一期的数据加工实验，基于已经加工好的browser_coverage、browser_weekly_active、browser_frequency_stats等聚合表，使用助睿Max数据大屏工具，零代码搭建“浏览器市场分析”大屏。

从背景设置、标题导航，到各类图表（柱状图、饼图、折线图、区域图、翻牌器）的配置与样式调整，全程拖拽完成，无需一行前端代码。

---

一、我们要通过大屏回答什么业务问题？

大屏不是图表的堆砌，而是回答业务问题的可视化答案。

本次市场分析大屏，聚焦以下核心问题：

业务问题	对应图表/模块
哪个浏览器用户最多？哪个用得最久？	用户规模柱状图 + 人均时长柱状图
用户活跃度在增长还是下降？	周活跃趋势折线图
用户什么时候最活跃？	24小时活跃分布区域图
用户是重度使用还是偶尔打开？	使用频率分布堆叠柱状图
用户同时用几个浏览器？	浏览器使用数量饼图
工作日和周末习惯有何不同？	工作日vs周末分组柱状图

大屏整体采用从上到下、从左到右的叙事顺序：顶部为核心指标卡，中间为市场格局与用户行为，底部为时段偏好与竞争关系。

---

二、实验环境与数据

2.1 环境

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

• 可视化工具：助睿Max（数据大屏）

• 屏幕尺寸：1920×1080（可适配实际展示屏幕）

2.2 数据来源

直接使用上一实验加工好的目标表：

模块	关联数据表	说明
市场格局	browser_coverage	用户数、使用时长、人均时长
周活跃趋势	browser_weekly_active	每周活跃用户数
时段偏好	browser_hourly	24小时活跃分布
使用频率	browser_frequency_stats	轻/中/重度用户统计
浏览器使用数量	browser_multi_usage	1种/2种/3种及以上占比
工作日vs周末	browser_weekday_weekend	人均时长对比

所有数据表已在团队私有数据库中就绪，大屏工具可直接接入。

---

三、第一步：创建大屏并设置基础样式

3.1 新建大屏

进入助睿数据大屏可视化平台，点击 “+新建” → “新建大屏”，选择空白模板，命名为“市场分析”。

📸 新建大屏的界面（选择空白模板）

3.2 背景设置

在右侧页面设置栏中，将背景图片设置为：

https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/bg-2

屏幕大小保持1920×1080即可。

📸 背景图片粘贴位置

3.3 标题制作

使用媒体 → 单张图片组件，添加标题banner。

• 组件重命名为“标题banner”

• 图片链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/banner01.png

• 调整位置（x=0, y=0, 宽=1920, 高=120）

3.4 导航按钮（两个大屏间的跳转）

由于我们有两个大屏（市场分析 + 用户画像），需要设置导航按钮。

1. 添加单张图片组件，重命名“市场分析按钮背景”，背景图链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/comprehensive-data/navigation-bg-1.png

2. 添加通用标题组件，重命名“市场分析”，标题文字设为“市场分析”，调整字体、颜色

3. 复制一组，改为“用户画像按钮背景”和“用户画像”，调整横坐标位置

将顶部所有组件选中，右键 → 成组，命名为“顶部”。

---

四、各图表区域制作（核心）

大屏的每个图表区域都遵循统一的结构：

• 区域背景：单张图片（半透明深色底纹）

• 标题背景：单张图片（装饰条）

• 标题：通用标题组件

• 图表：具体的图表组件（柱状图、饼图、折线图等）

4.1 浏览器用户数（柱状图）

1. 添加单张图片作为区域背景，背景图链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/area-bg.png

2. 添加单张图片作为标题背景（短标题背景）：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/title-bg-short.png

3. 添加通用标题，文字设为“浏览器用户数”

4. 添加基础柱状图组件

柱状图样式调整：

• 图例设置为可见，水平居中对齐

• 调整全局样式中的“柱子上边距”，让图例与柱子保持合适间距

📸 浏览器用户数柱状图最终效果

将这四个组件成组，命名为“浏览器用户数”。后续其他图表区域可以直接复制这个组，再修改内部组件。

4.2 浏览器使用时长占比（饼图）

复制“浏览器用户数”组 → 重命名为“浏览器使用时长” → 删除柱状图 → 添加多维度饼图。

饼图样式关键点：

• 取消外圈显示（外圈颜色透明度调为0）

• 标签类目设置为可见

• 每个浏览器配置固定颜色：

  • IE浏览器：#2177FC

  • Google：#3DC3DF

  • 360浏览器：#FF948B

  • 搜狗浏览器：#8A79FE

  • QQ浏览器：#82F9A5

  • 其他：#97DFFF

📸 饼图颜色配置界面

4.3 浏览器人均使用时长（柱状图）

复制“浏览器用户数”组 → 重命名为“浏览器人均使用时长” → 修改标题文字 → 柱状图无需更换类型，直接使用。

4.4 指标区（数据概览）

顶部核心指标卡：总使用时长、人均使用时长、活跃用户占比、重度用户占比。

复制一个图表区域组 → 重命名“数据概览” → 删除柱状图 → 换用长标题背景图（title-bg-long）。

每个指标由两部分组成：

• 图标：单张图片（装饰小图标）

• 数据翻牌器：展示数值

复制出4个指标组，分别配置：

• 总使用时长（单位：小时）

• 人均使用时长（小时/周）

• 活跃用户占比（%）

• 重度用户占比（%）

4.5 工作日vs周末使用时长（分组柱状图）

复制区域组 → 重命名为“周内对比” → 删除原图表 → 添加分组柱状图。

• 标题：“工作日vs周末使用时长”

• 系列1（工作日）和系列2（周末）设置不同颜色（系列2颜色改为#3DC3DF）

• 调整柱状图样式：图例位置、标签显示等

4.6 24小时活跃用户数分布（区域图）

复制区域组 → 重命名为“24小时活跃分布” → 删除原图表 → 添加区域图。

• 标题：“24小时活跃用户数分布”

• 区域颜色：#29F1FA（科技感亮青色）

4.7 浏览器周活跃用户数变化（折线图）

复制区域组 → 重命名为“浏览器周活跃用户数变化” → 删除原图表 → 添加折线图。

• X轴：周区间（5/7-5/13, 6/4-6/10, ...）

• Y轴：活跃用户数

• 不同浏览器用不同颜色折线

📸活跃用户数变化图（1920×1080全屏效果）

4.8 使用频率分布（堆叠柱状图）

复制区域组 → 重命名为“使用频率分布” → 删除原图表 → 添加垂直基本柱图（堆叠模式）。

• X轴：浏览器名称

• Y轴：用户数

• 堆叠维度：轻度、中度、重度

4.9 浏览器使用数量分布（饼图）

复制区域组 → 重命名为“浏览器使用数量分布” → 删除原图表 → 添加基本饼图。

• 分类：1种、2种、3种及以上

• 显示百分比标签

---

五、保存与预览

完成所有组件的放置和样式调整后，点击保存，再点击预览，即可看到完整的大屏效果。

📸 最终大屏完整预览图（1920×1080全屏效果）

---

六、业务解读（从大屏能看到什么？）

在数据接入之前，先看静态布局就能预判我们要讲的故事：

1. 谁是市场领导者？
   “浏览器用户数”柱状图 + “使用时长占比”饼图 → 用户数最多的未必是使用时长最多的，粘性差异一目了然。

2. 用户活跃度趋势如何？
   “周活跃用户数变化”折线图 → 如果连续多周下滑，需要警惕用户流失。

3. 用户什么时候最活跃？
   “24小时活跃分布”区域图 → 找出峰值时段，优化推送策略。

4. 用户忠诚度如何？
   “浏览器使用数量分布”饼图 → 只用1种浏览器的用户占比越高，说明用户越忠诚。

5. 工作 vs 娱乐场景有何不同？
   “工作日vs周末使用时长”分组柱状图 → 某些浏览器周末时长更高，说明更偏向娱乐场景。

---

七、总结

通过本次实验，我们：

• 掌握了大屏静态布局设计的方法：从上到下、从左到右的叙事结构

• 学会了组件化复制：统一区域背景、标题背景，快速搭建多个图表

• 熟悉了各类图表的适用场景：趋势用折线图，对比用柱状图，分布用饼图

• 完成了样式美化：背景、标题、颜色规范、间距调整

下一步，我们将使用蓝图编辑器为这些图表接入真实数据，让大屏“动起来”。

如果你对数据接入和交互筛选器也感兴趣，欢迎关注下一篇《蓝图编辑器：让大屏与数据库对话》。

---

参考资料：助睿在线实验平台《实验5-2：浏览器市场分析-大屏静态布局制作》

工具官网：https://www.uniplore.com/

---

本文转载请联系作者。如果你在搭建大屏时遇到任何问题，欢迎评论区留言交流。