第一部分实验背景实验目的这次实验的目的是利用上一个实验产出的浏览器市场统计表在助睿 Max 数据大屏平台上搭建“浏览器市场行为分析”大屏的静态布局。需要掌握的技能包括根据业务需求设计大屏排版为图表选择合适类型熟悉图片背景、标题、导航和各类图表组件的样式配置最终构建一个符合“从上到下、从左到右”叙事逻辑的完整大屏框架为下一步接入数据做好准备。实验环境平台助睿数智Uniplore一站式数据科学实验平台实验室地址 https://lab.guilian.cn/可视化工具助睿 Max数据大屏数据本次仅完成静态布局不涉及实际数据接入但每个图表区域已预留好对应数据表的位置包括browser_coverage、browser_weekly_active、browser_frequency_stats、browser_multi_usage、browser_hourly等。整体处理流程先创建一个空白大屏设置背景图、标题 banner 和导航按钮。然后按照布局草图使用“单张图片”组件搭建每个图表区域的背景和标题栏再分别添加柱状图、饼图、分组柱状图、区域图和指标翻牌器等图表组件调整好大小、位置和样式。最后将所有图表按模块成组预览确认整体效果。第二部分实验步骤2.1 创建数据大屏点击实验平台左侧菜单“数据大屏”,进入子平台——助睿数据大屏可视化平台点击“新建”按钮 - “新建大屏”,在模板选择中点击“空白模板”输入“市场分析”然后点击下一步自动跳转到“市场分析”大屏的制作界面2.2 设置大屏样式助睿数据大屏中使用到的图片元素均使用oss-browser存储并获取存储链接。进入大屏编辑页面后屏幕大小默认为1920x1080可以根据最终展示的屏幕大小来修改。将以上背景图片链接复制后粘贴到“背景图片”后的文本框中覆盖原图片。本次实验我们预先设计好了标题图链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/banner01.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 粘贴到基础设置的背景图链接中点击文字分类下的“通用标题”重命名为“市场分析”修改“市场分析”通用标题组件的基础属性和“市场分析按钮背景”图片组件一样这里不再赘述点开基本设置修改标题名为“市场分析”切换“数据”点击“刷新数据”点开文本样式设置字体、字号、颜色和粗细不做强制要求可以按住点击“复制”复制的图片重命名为“用户画像按钮背景”通用标题组件重命名为“用户画像”将用户画像标题组件的内容改为“用户画像”颜色和粗细也做修改选中顶部区域的所有组件右键“成组”命名为“顶部”2.3 设置内容布局与样式2.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添加通用标题组件重命名为“标题”如图配置点击“基础柱状图”组件重命名为“浏览器用户数柱状图”调整大小和位置点开“全局样式”来调整将柱子上边距调大最后把上面的组件设置成组命名为“浏览器用户数”2.3.2 使用规模复制上一小节制作的“浏览器用户数”组重命名为“浏览器使用时长”拖拽“浏览器使用时长”组将标题名修改为“浏览器使用时长”刷新数据我们选择“多维度饼图”调整位置大小名重命名为“浏览器使用时长占比”取消外圈显示点击“饼图样式”点击外圈颜色后的色值方块将透明度拖到0点击“确定”将标签类目设置为可见点开“数据系列”系列及代表分类将系列1-6的颜色设置为不同的颜色即可色值参考#2177FC、#3DC3DF、#FF948B、#8A79FE、#82F9A5、#97DFFF2.3.3 使用粘性复制2.3.1小节制作的“浏览器用户数”组重命名为“浏览器人均使用时长”拖拽“浏览器使用时长”组到合适位置将标题名修改为“浏览器人均使用时长”并刷新数据2.3.4 指标区复制2.3.1小节制作的“浏览器用户数”组重命名为“数据概览”将标题名修改为“数据概览”刷新数据删除复制的柱状图添加“单张图片”组件重命名为“图标”背景图添加链接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修改翻牌器标题、后缀2.3.5 时段偏好复制2.3.1小节制作的“浏览器用户数”组重命名为“周内对比”刷新复制的组件数据将标题背景图换为长标题背景图标题内容改为“工作日vs周末使用时长”将柱状图删除重新添加“分组柱状图”命名为“工作日vs周末使用时长分组柱状图”调整系列2的柱子颜色为#3DC3DF2.3.6 时段偏好224小时活跃将标题名修改为“24小时活跃用户数分布”删除复制的分组柱状图添加区域图参考颜色为#29F1FA2.3.7 周活跃趋势复制5.3.1小节制作的“浏览器用户数”组重命名为“浏览器周活跃用户数变化”2.3.8 使用频率分布复制上一小节制作的“浏览器周活跃用户数变化”组重命名为“使用频率分布”2.3.9 浏览器使用数量分布复制上一小节制作的“使用频率分布”组重命名为“浏览器使用数量分布”参考以上的实验保存大屏最终预览效果如下第三部分实验结果保存并预览后我得到了一张完整的市场分析大屏静态页面。顶部是深色科技背景上的大标题 banner 和两个导航按钮第二行四个指标翻牌器已经摆好等待数据接入中间两列分布着浏览器用户数柱状图、使用时长饼图和人均使用时长柱状图下半部分则是工作日 vs 周末对比、24 小时活跃分布、周活跃趋势、使用频率分布和浏览器使用数量分布等图表区。从布局角度看整体符合“先总后分”的设计原则总览指标最先映入眼帘往下是市场格局接着是时段偏好和用户行为最后是竞争关系。各浏览器的颜色在饼图、柱状图中已经预配为统一的色系后续接数据时无需再改。区域背景和标题背景的层次感也让大屏显得比较专业没有明显的错位或空白。第四部分问题与解决问题1复制组件组后文字和图表不显示内容现象复制“浏览器用户数”组得到新组时发现标题文字消失图表也是空白。原因组件复制后会保留原有的样式和配置但部分内容缓存没有自动刷新。解决选中不显示的通用标题或图表组件在数据 tab 里点击“刷新数据”按钮内容立刻就出现了。后续每复制一次我就习惯性地点一下刷新。问题2饼图外圈颜色干扰视觉现象多维度饼图默认外面有一圈较宽的描边色影响整体扁平风格。原因该饼图组件的默认样式带外圈显示且颜色为非透明。解决在饼图样式里找到“外圈颜色”设置点开色值选择器将透明度拉到最左边0外圈就完全隐藏了饼图变得简洁许多。问题3分组柱状图中柱子与图例距离过近现象刚添加分组柱状图时柱子顶部离图例区域很近标签和图例几乎挤在一起。原因组件默认的柱子上边距或叫网格上边距比较小。解决在全局样式里找到“柱子上边距”类似的参数从默认值调大到 30 左右立刻就把距离拉开了整体呼吸感好了很多。第五部分实验总结收获这次实验让我直观地理解了“大屏设计先布局、后数据”的流程。在助睿 Max 里拖拽组件和调整属性就能快速搭出一个专业感很强的可视化大屏不需要写前端代码。我主要学会了几点善用“成组”功能管理复杂页面层级清晰好修改。通过复制已有组件组再修改可以大幅提升效率但必须记住刷新数据。图表配色最好提前规划在数据系列里统一设置能保证大屏整体视觉一致。细节调整如间距、透明度、字体大小直接影响大屏最终品质不能忽视。对平台的评价助睿 Max 的操作相当直观组件库丰富属性设置面板分类清晰特别是全局样式和系列颜色这种细节也能轻松修改。不过当组件数量变多时画布上的拖拽偶尔会有些卡顿需要在组内精确定位时最好直接输入坐标。整体上对于快速构建数据大屏的原型或成品这个工具确实能够胜任。下一个实验我会继续在这张静态大屏上接入数据让图表真正“活”起来。