news 2026/6/10 13:17:15

浏览器市场分析-大屏静态布局制作

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
浏览器市场分析-大屏静态布局制作

浏览器市场分析-大屏静态布局制作

1 实验目的

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

通过本实验,学生应掌握:

2 实验环境

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

  • 平台说明:本次实验使用助睿数智(Uniplore)一站式数据科学平台,覆盖数据接入、ETL处理、机器学习建模到可视化展示的全链路零代码功能。官网:https://www.uniplore.com/

  • 可视化工具:助睿Max(数据大屏)

3 实验数据

本实验直接使用上一实验加工完成的大屏一(市场行为分析)目标表,聚焦浏览器本身的市场格局、使用行为、时段偏好、竞争关系。

4 整体分析框架

4.1 业务问题

我们希望通过大屏回答以下核心业务问题:

4.2 大屏设计原则

4.3 大屏布局草图

5 实验步骤

5.1 进入数据大屏平台

点击实验平台左侧菜单【数据大屏】,进入助睿数据大屏可视化平台。

平台简介:助睿数据大屏可视化是一款通过图形化界面轻松搭建专业可视化应用的产品,适用于会议展览、业务监控、风险预警、地理分析等场景。核心能力包括:

  • 丰富的基础组件库

  • 地理信息可视化(轨迹/飞线/热力等)

  • 支持多种数据源(含CSV)

  • 拖拽式搭建,无需编程

  • 低代码蓝图编辑器(满足高级控制与数据处理需求)

5.2 创建数据大屏

5.2.1 新建大屏

点击【+新建】→【新建大屏】。

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

输入大屏名称“市场分析”,点击下一步,自动跳转到制作界面。

5.3 设置大屏样式

5.3.1 背景设置

进入大屏编辑页面后,右侧为页面设置栏。屏幕大小默认为1920×1080,可根据最终展示屏幕调整。

将背景图片链接粘贴到“背景图片”文本框中:

5.3.2 标题设置

步骤1:添加标题图片

大屏左侧为组件列表,包含图表、文字、地图、媒体素材、交互等分类。

点击【媒体】→【单张图片】组件。

步骤2:重命名组件

右键组件,点击“重命名”,输入“标题banner”。

步骤3:设置属性

选中组件,右侧设置栏中:

  • 基础属性:设置位置(X=0,Y=0,宽度=1920,高度=80)

  • 基本设置:粘贴标题图片链接

步骤4:保存并预览

点击【保存】,保存后点击【预览】查看效果。

5.3.3 导航设置

由于有两个大屏(市场分析、用户画像),需要设置导航实现大屏间跳转。

步骤1:添加按钮背景

点击【单张图片】组件,重命名为“市场分析按钮背景”。

通过拖拽或属性设置调整大小和位置(X=1600,Y=20,宽度=100,高度=40)。

粘贴导航按钮背景图片链接:

步骤2:添加按钮文字

点击【文字】→【通用标题】组件,重命名为“市场分析”。

设置位置与按钮背景一致(X=1600,Y=20,宽度=100,高度=40)。

点击基本设置,修改标题名为“市场分析”,点击【刷新数据】。

点开文本样式,设置字体、字号、颜色和粗细。

步骤3:复制用户画像按钮

复制“市场分析按钮背景”和“市场分析”组件,分别重命名为“用户画像按钮背景”和“用户画像”。

修改横坐标位置(如X=1720),将标题内容改为“用户画像”。

步骤4:成组管理

选中顶部区域所有组件,右键【成组】,命名为“顶部”。

步骤5:保存预览

5.4 设置内容布局与样式

根据布局草图,每个图表区域包含以下内容:

  • 区域背景:单张图片组件

  • 标题背景:单张图片组件

  • 标题:通用标题组件

  • 图表:具体图表组件

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

步骤1:添加区域背景

点击【单张图片】组件,重命名为“区域背景”,设置位置(X=20,Y=100,宽度=400,高度=280)。

步骤2:添加标题背景

点击【单张图片】组件,重命名为“标题背景”。该图表为短图表,使用短标题背景图:

步骤3:添加标题

点击【文字】→【通用标题】组件,重命名为“标题”。标题名修改为“浏览器用户数”,对齐方式左对齐。

步骤4:添加图表

点击【基础柱状图】组件,重命名为“浏览器用户数柱状图”。

设置图表位置和大小。图例默认隐藏,设置为可见,水平对齐方式居中。

调整柱子上边距(全局样式),使柱子和图例距离合适。

步骤5:成组管理

将本小节所有组件成组,命名为“浏览器用户数”。

步骤6:保存预览

5.4.2 使用规模-浏览器使用时长占比

复制“浏览器用户数”组,重命名为“浏览器使用时长”。

调整位置(X=440,Y=100),刷新数据。

将标题修改为“浏览器使用时长”。

删除复制的柱状图,添加【多维度饼图】,重命名为“浏览器使用时长占比”。

样式调整

  • 取消外圈显示:外圈透明度设为0

  • 标签类目设为可见

颜色配置

5.4.3 使用粘性-浏览器人均使用时长

复制“浏览器用户数”组,重命名为“浏览器人均使用时长”。

调整位置(X=860,Y=100),刷新数据。

标题修改为“浏览器人均使用时长”,图表类型保持柱状图。

5.4.4 指标区(数据概览)

复制“浏览器用户数”组,重命名为“数据概览”。

调整位置(X=1280,Y=100,宽度=620,高度=280),刷新数据。

标题背景更换为长标题背景图:

标题修改为“数据概览”。

添加指标图标

添加【单张图片】组件,重命名为“图标”:

添加数据翻牌器

添加【数据翻牌器】组件,重命名为“总使用时长”。

样式调整:

  • 标题:总使用时长,居中对齐

  • 翻牌器:水平居中对齐

将图标和翻牌器成组,命名为“总使用时长”。

复制指标组

复制3个“总使用时长”组,分别重命名为:

  • “人均使用时长”

  • “活跃用户占比”

  • “重度用户占比”

“活跃用户占比”、“重度用户占比”的图标链接更换为:

调整位置布局:

5.4.5 时段偏好-周内对比

复制“浏览器用户数”组,重命名为“周内对比”。

调整位置(X=20,Y=400),刷新数据。

标题背景更换为长标题背景图,标题修改为“工作日vs周末使用时长”。

删除柱状图,添加【分组柱状图】,重命名为“工作日vs周末使用时长分组柱状图”。

样式调整

  • 系列2柱子颜色:#3DC3DF

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

复制“周内对比”组,重命名为“24小时活跃分布”。

调整位置(X=440,Y=400),刷新数据。

标题修改为“24小时活跃用户数分布”。

删除分组柱状图,添加【区域图】,重命名为“24小时活跃分布区域图”。

样式调整:区域颜色 #29F1FA

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

复制“浏览器用户数”组,重命名为“浏览器周活跃用户数变化”。

调整位置(X=860,Y=400),刷新数据。

标题修改为“浏览器周活跃用户数变化”。

删除柱状图,添加【折线图】,重命名为“周活跃趋势折线图”。

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

复制“浏览器周活跃用户数变化”组,重命名为“使用频率分布”。

调整位置(X=20,Y=700),刷新数据。

标题修改为“使用频率分布”。

删除折线图,添加【垂直基本柱图】,重命名为“使用频率分布柱状图”。

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

复制“使用频率分布”组,重命名为“浏览器使用数量分布”。

调整位置(X=440,Y=700),刷新数据。

标题修改为“浏览器使用数量分布”。

删除柱状图,添加【基本饼图】,重命名为“使用数量分布饼图”。

5.5 保存大屏

点击【保存】按钮,保存大屏。

最终预览效果:

6 大屏组件清单

7 实验总结

7.1 技术能力提升

  • 大屏布局设计能力:掌握了从上到下、从左到右的叙事性大屏布局方法;

  • 图表选型能力:理解了不同图表类型与业务问题的匹配关系(趋势用折线图、对比用柱状图、分布用饼图);

  • 组件配置能力:熟悉了单张图片、通用标题、基础柱状图、多维度饼图、数据翻牌器、分组柱状图、区域图、折线图等组件的配置方法;

  • 样式调整能力:掌握了背景设置、颜色配置、字体调整、图例设置等样式优化技巧。

7.2 业务价值实现

  • 市场格局一目了然:通过柱状图、饼图快速了解各浏览器的用户规模、使用时长占比和用户粘性;

  • 用户行为清晰呈现:通过周活跃趋势、使用频率分布、时段偏好、工作日/周末对比,全面了解用户使用习惯;

  • 竞争关系明确:通过浏览器使用数量分布饼图,了解用户忠诚度和竞品重叠情况。

7.3 平台优势总结

7.4 后续工作

本实验完成了市场分析大屏的静态布局设计和样式配置。下一步将:

  1. 使用蓝图编辑器完成数据接入(各图表组件绑定对应的数据表字段)

  2. 配置浏览器筛选器,支持查看全部或单个浏览器

  3. 制作用户画像分析大屏

  4. 配置大屏间的跳转交互

附录

  • 背景图片链接汇总见5.3.1、5.3.2、5.3.3节

  • 各组件详细配置见第5.4节各子章节

  • 饼图颜色色值参考见5.4.2节

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/10 13:16:27

监控iOS设备性能的工具Perfdog:特点、使用步骤与代码示例

监控iOS设备性能的工具:Perfdog 在移动应用开发过程中,性能监控是一个非常重要的环节。Perfdog是一款专门针对iOS设备进行性能监控的工具,它可以帮助开发者及时发现并解决应用性能问题,提高应用的用户体验。 Perfdog的特点 Perfdo…

作者头像 李华
网站建设 2026/6/10 13:11:00

sendgrid-python:用 Python 调用 SendGrid 邮件 API

文章目录sendgrid-python:用 Python 调用 SendGrid 邮件 API1、这项目是干嘛的2、安装和配置3、发一封邮件有多简单4、不止能发邮件5、适合哪些人用sendgrid-python:用 Python 调用 SendGrid 邮件 API sendgrid-python 在 GitHub 上已经拿到 1,628 Star…

作者头像 李华
网站建设 2026/6/10 13:07:59

新能源电动汽车价格大揭秘:影响因素、趋势与选购策略

在全球倡导绿色出行和应对气候变化的大背景下,新能源电动汽车成为了汽车市场的热门领域。其价格问题一直是消费者、汽车制造商以及相关行业关注的焦点。 从消费者的角度来看,新能源电动汽车的价格是他们决定是否购买的关键因素之一。对于普通消费者而言&…

作者头像 李华
网站建设 2026/6/10 13:04:30

CQRS架构模式与传统CRUD相比的优势特点

一、传统CRUD 传统开发习惯一套代码、一个数据库搞定增删改查(CRUD),读写操作混在一起。传统 CRUD 模式下,不管是新增、修改数据,还是查询列表、检索内容,都共用同一张表、同一个服务、同一组接口。业务简单…

作者头像 李华
网站建设 2026/6/10 13:04:28

AMD Ryzen 9 8945HX 处理器

🔧 核心硬件参数型号:AMD Ryzen 9 8945HX(Dragon Range 架构)工艺:5nm 制程,先进的能效比设计核心 / 线程:16 核 32 线程,属于当前移动端顶级规格TDP:55W(可动…

作者头像 李华
网站建设 2026/6/10 13:01:32

CEOS配置telnet服务并设置root远程登录

需求:服务器是CEOS1.1,需要配置telnet服务允许root通过telnet服务远程登录。 本文这里使用systemd 直接管理 telnet。 # 查看已安装的 telnet 相关包 [rootlocalhost packages]# rpm -qa | grep telnet telnet-0.17-76.oe1.x86_64# 看看系统自带的 in.te…

作者头像 李华