零代码做大屏！！！

开篇前言｜为什么一定要学会这款大屏工具？

还在苦恼做数据可视化要学 Python、ECharts？小白零基础、经管 / 计算机实训、职场数据分析党看这一篇就够！ 本次教程依托助睿 Uniplore 助睿数智平台 + Max 数据大屏，完整复刻「2012 年浏览器全景分析大屏」，从空白画布→背景美化→标题导航→9 大业务模块逐个落地，保姆级拆分每一步点击位置、参数、图片链接、配色代码，照着操作就能做出商用级炫酷数据大屏。 ✅ 适用人群：大数据实训学生、运营数据分析、可视化入门新手 ✅ 工具优势：全拖拽零代码、内置海量图表组件、自定义图片素材、支持多表数据接入、大屏一键预览发布 ✅ 最终成品：一整块 1920×1080 标准化浏览器市场分析大屏，覆盖数据概览、市场格局、用户行为、时段偏好、竞品竞争5 大分析维度，9 类图表全覆盖

一、前置准备｜实验环境 & 数据源 & 全套素材汇总（先收藏素材！）

1.1 登录平台入口（2 个网址存书签）

1. 实训操作平台：助睿在线实验平台 https://lab.guilian.cn/（本次实操唯一入口）

2. 工具官网：助睿数智 Uniplore Uniplore iDIS-大数据智能全流程服务平台-BI数据可视化工具（了解产品、下载资料）

进入平台后左侧菜单栏找到【数据大屏】→跳转【助睿 Max 大屏可视化子平台】，所有操作都在这个页面完成

1.2 实验前置说明

本大屏数据源承接上一节实训《浏览器市场与用户画像分析 - 数据加工》，用到 5 张加工完毕数据表，提前确认数据集已在平台建好：

数据表名称	用途
browser_coverage	总时长、用户数、人均时长、各浏览器用户 & 使用时长
browser_frequency_stats	重度用户占比、轻 / 中 / 重度用户分布
browser_weekly_active	4 周浏览器周活跃用户趋势数据
browser_hourly	24 小时分时段活跃用户数据
daily_browser_detail	工作日 / 周末分浏览器使用时长
browser_multi_usage	用户同时使用多款浏览器占比数据

1.3 全文全套素材链接（复制直接粘贴，文末可一键打包）

素材名称	图片链接
大屏全局背景 bg-2	https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/bg-2.png
顶部 Banner 标题图	https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/banner01.png
导航按钮底图	https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/comprehensive-data/navigation-bg-1.png
模块短标题背景	https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/title-bg-short.png
模块长标题背景	https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/title-bg-long.png
单个图表区块背景	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/library-data/audio-video.png
用户占比指标图标	https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/library-data/degree-thesis.png

1.4 大屏整体设计逻辑（先看懂布局，少走弯路）

设计原则：从上到下、先总览后细分、先指标后明细，符合用户浏览视线

1. 顶部区：全屏 Banner 标题 + 双导航按钮（市场分析 / 用户画像，支持跨大屏跳转）

2. 左上分区：市场格局（用户数柱状图 + 使用时长饼图 + 人均时长柱状图）

3. 中上：数据概览指标卡（4 个翻牌指标：总时长、人均时长、活跃占比、重度占比）

4. 左下：用户行为（周活跃折线图 + 用户频率堆叠柱）

5. 右下：时段 & 竞争（工作日 / 周末分组柱状 + 24h 时段折线 + 多浏览器使用占比饼图）

6 款浏览器固定配色（全程统一，杜绝颜色混乱）：#2177FC、#3DC3DF、#FF948B、#8A79FE、#82F9A5、#97DFFF

二、第一步：新建空白大屏 + 全局背景设置（5 分钟搞定基础框架）

操作提示：所有组件添加均在左侧组件栏，参数调整全在右侧属性面板，做错随时撤回、右键复制组件复用，大幅提速！

2.1 创建新大屏

1. 进入 Max 大屏管理中心，点击页面左上角【+ 新建】→【新建大屏】

2. 模板弹窗选择【空白模板】（不要套用预设模板，自定义自由度最高）

3. 大屏命名框输入：市场分析→点击下一步，自动进入画布编辑页（画布默认尺寸 1920×1080，本次全程不修改尺寸）

2.2 设置全局背景

1. 点击画布空白处，右侧弹出【页面设置】面板

2. 找到【背景图片】输入框，删除原有默认链接，粘贴上文「大屏全局背景 bg-2」链接

3. 其余参数（页面缩放、填充方式、配色）全部默认，点击空白画布自动生效，预览即可看到深色大屏底色

三、第二步：顶部专区制作｜Banner 标题 + 双导航按钮（大屏门面重点）

顶部做完后全选成组命名「顶部」，后续移动一键拖拽，避免零散组件乱跑！

3.1 添加顶部 Banner 标题

1. 左侧组件栏→【媒体】分类→点击【单张图片】，画布自动生成图片组件

2. 右键该组件→【重命名】→输入：标题 banner（规范命名方便后期维护）

3. 选中组件，右侧【基础设置】→图片链接粘贴 Banner 标题链接，调整组件坐标铺满画布顶部

4. 点击右上角【保存】→【预览】，检查标题文字「2012 年浏览器全景分析 Browser Analytics」完整显示

3.2 制作导航按钮（市场分析 + 用户画像双按钮）

① 第一个按钮：市场分析

1. 再次拖入【单张图片】组件→重命名：市场分析按钮背景，粘贴导航按钮底图链接，放在 Banner 下方左侧

2. 左侧【文字】分类→【通用标题】，拖到按钮图片上方→重命名：市场分析

3. 右侧文本设置：字体加粗、居中对齐、自定义白色字体；基础设置文字内容：市场分析→点击【刷新数据】，文字实时生效

② 复制快速生成第二个按钮：用户画像

1. 全选「市场分析按钮背景 + 市场分析标题」→右键复制组件

2. 复制图片重命名：用户画像按钮背景，横向挪动到原按钮右侧，修改横坐标参数

3. 复制标题重命名：用户画像，修改文字内容，字体颜色改为浅灰色（区分当前大屏选中状态：市场分析高亮、用户画像置灰）

4. 刷新数据，两个导航按钮制作完成

3.3 顶部组件打包

框选 Banner + 两个导航所有组件→右键【成组】→组名称：顶部，顶部区域完工✅

四、第三步：分模块逐个搭建 9 大可视化组件（核心实操，分段跟着做）

通用快捷技巧：做好第一个模块后，右键整组复制，改标题、换图表、换数据即可，不用重复做背景、标题素材，节省 70% 时间！ 单个模块固定结构 =【区域背景图 + 短 / 长标题背景 + 标题文字 + 图表组件】四件套

4.1 模块 1：浏览器用户数（左上・基础柱状图｜数据源：browser_coverage）

1. 拖入【单张图片】→重命名「区域背景」，粘贴图表区块背景链接，调整画布左上位置尺寸

2. 再拖单张图片→重命名「标题背景」，粘贴短标题背景链接，放在区块顶部

3. 拖入【通用标题】→标题：浏览器用户数，左对齐、字号 14、白色；

4. 左侧【图表 - 基础柱状图】→重命名「浏览器用户数柱状图」，放在背景内空白处

5. 右侧样式设置：图例【开启居中显示】→全局样式上调图表上边距（解决柱子贴图例太近、排版拥挤），6 个柱子使用预设 6 组配色

6. 全选本模块所有组件→右键成组→命名：浏览器用户数

4.2 模块 2：浏览器使用时长占比（用户数模块复制→多维度饼图｜数据源：browser_coverage）

1. 右键「浏览器用户数」整组→复制，拖拽到用户数右侧位置，刷新数据避免空白

2. 修改标题文字：浏览器使用时长；删除原有柱状图组件

3. 新增【多维度饼图】组件→重命名：浏览器使用时长占比

4. 饼图关键设置：

   1. 饼图样式：外圈颜色透明度拉到 0（取消外圈圆环，实心饼图）

   2. 开启类目标签显示（每个扇区显示浏览器名称 + 占比）

   3. 数据系列：6 个扇区依次填入固定色值 #2177FC、#3DC3DF、#FF948B、#8A79FE、#82F9A5、#97DFFF

5. 组件拖入本组内，保存，组名：浏览器使用时长

4.3 模块 3：浏览器人均使用时长（复制用户数组→保留柱状图｜数据源：browser_coverage）

1. 再次复制「浏览器用户数」组件组，挪动至使用时长下方

2. 标题修改：浏览器人均使用时长，柱状图无需更换类型，重命名「人均使用时长柱状图」

3. 微调柱状间距、图例位置，和左侧两个模块对齐，成组命名：浏览器人均使用时长

4.4 模块 4：数据概览（中上・4 个指标翻牌器｜数据源：browser_coverage、browser_frequency_stats｜重点长标题模块）

1. 复制用户数组，拖拽到大屏中上位置，替换标题背景为长标题素材链接（原短图拉伸变形必换！），标题改为：数据概览

2. 删除内部原有柱状图，清空画布内部空白，开始做 4 组指标卡片：

① 第一个指标：总使用时长

• 拖入【单张图片】→粘贴时长指标图标链接；再拖入【数据翻牌器】→重命名：总使用时长

• 翻牌器设置：标题「总使用时长」居中、字号 14；数字字号 28、后缀填写「小时」，字体微软雅黑加粗

• 图标 + 翻牌器成组：总使用时长

② 批量复制生成剩余 3 个指标

复制「总使用时长」整组，生成 3 份，横向均匀排布：

1. 人均使用时长：后缀「小时 / 周」，图标不变

2. 活跃用户占比：替换图标为用户占比指标图标，后缀「%」

3. 重度用户占比：同上替换图标，后缀「%」（定义：周使用时长＞10h 用户占比）

4. 4 个指标横向均匀对齐后，全部归入数据概览大组

至此顶部四大模块完成，数据概览是全大屏核心 KPI 汇总区，第一眼抓取核心业务数据

4.5 模块 5：周活跃趋势 - 浏览器周活跃变化（折线图｜数据源：browser_weekly_active）

1. 复制任意已有模块组，挪至数据概览左下方，标题修改：浏览器周活跃用户数变化

2. 删除原有柱状图，新增【基础折线图】，X 轴 1-4 周、Y 轴活跃人数，6 条折线沿用浏览器固定配色

3. 图例外置、线条平滑处理，成组保存

4.6 模块 6：使用习惯 - 用户使用频率分布（堆叠柱状图｜数据源：browser_frequency_stats）

1. 复制周活跃组，右移摆放，标题：使用频率分布

2. 替换图表为【垂直堆叠柱状图】，分轻 / 中 / 重度三层堆叠，展示各浏览器用户分层占比

3. 配色和全大屏统一，调整柱子间距，完成编组

4.7 模块 7：时段偏好 - 工作日 VS 周末（分组柱状图｜数据源：daily_browser_detail）

1. 复制模块组，右下布局，标题：工作日 vs 周末使用时长

2. 删除旧图表→添加【分组柱状图】，系列 1（工作日）默认色、系列 2（周末）固定 #3DC3DF

3. 样式微调：图例水平排布、柱体左右间距、坐标轴边距，区分工作日 / 周末使用差异

4.8 模块 8：24 小时全天活跃分布（区域折线图｜数据源：browser_hourly）

1. 复制工作日模块，右侧摆放，标题：24 小时活跃用户数分布

2. 替换图表为【区域图】，X 轴 0-24 时，不同颜色线条代表浏览器，填充区域透明度 30%，参考主色 #29F1FA

3. 优化 X 轴刻度显示，避免小时文字重叠

4.9 模块 9：竞争关系 - 浏览器使用数量分布（基础饼图｜数据源：browser_multi_usage）

1. 复制上一个模块，最右下角，标题：浏览器使用数量分布

2. 更换图表为【基础饼图】，展示：只用 1 款 / 2 款 / 3 款及以上浏览器的用户占比

3. 开启百分比标签，精简饼图多余装饰，完成最后一个模块

五、第四步：全页面统一优化 + 保存预览 + 避坑指南（新手高频踩坑全解决）

5.1 统一优化步骤

1. 全画布检查：所有模块对齐、间距统一、配色严格遵循 6 色规范，无组件错位、图片拉伸

2. 零散组件全部编组，按分区命名（顶部、数据概览、市场格局、用户行为、时段竞争），方便后期修改

3. 全页面点击【保存】→右上角【预览】，全屏查看 1920×1080 成品效果

5.2 新手 90% 会踩的坑 & 一键解决方案

问题现象	解决办法
复制组件后图表空白、不显示数据	选中图表→右侧【数据】→点击【刷新数据】
标题背景图片被拉伸变形	短标题用 short 素材、长标题用 long 素材，不要混用
柱状图柱子紧贴图例很难看	选中图表→样式→全局样式上调上边距
饼图外圈多余圆环	饼图样式→外圈颜色透明度调 0
组件太多乱糟糟	做完一个区块立刻右键成组，分组管理

六、第五步：大屏业务分析落地｜从图表读懂浏览器市场（实训报告写作素材）

做完大屏不只会做工具，还要学会解读数据，写实验报告直接套用👇

1. 市场格局：从柱状图看头部浏览器用户体量，饼图看出谁占据使用时长龙头，人均时长判断产品用户粘性高低

2. 用户活跃度：周活跃折线看行业大盘上涨 / 下滑趋势，24h 折线锁定用户全天使用高峰时段

3. 用户分层：堆叠柱分辨各产品重度 / 轻度用户占比，判断产品是流量型还是高粘性型

4. 竞品竞争：多浏览器占比饼图，看用户一机多浏的普及度，分析竞品交叉抢夺用户情况

5. 时段规律：工作日 & 周末分组柱，对比用户作息带来的使用行为差异

七、文末福利 & 后续预告

✅ 福利 1：文中所有素材链接汇总在 1.3 表格，一键复制保存，下次做大屏直接复用 ✅ 福利 2：收藏本文，后续下篇教程《蓝图编辑器数据自动接入》，手把手教静态大屏接入真实数据源，实现数据自动刷新动态大屏

觉得教程有用，点赞收藏 + 关注，评论区扣「素材」，博主发全套打包链接！

补充排版小彩蛋（博客发布优化）

1. 发布时在各模块中间插入成品效果图分区标注，图文搭配阅读更轻松

2. 重点链接、色值、操作步骤加粗高亮，新手快速定位关键信息

标签：# 数据可视化 #助睿 Uniplore #Max 大屏 #数据分析实训 #零代码教程 阅读预估：15 分钟｜全程跟着点鼠标，不用写一行代码，文末附全套素材链接，直接复制即用💯