爆肝数天，终于完成了小白也能学懂的市场分析教程！！！浏览器市场分析-大屏静态布局制作与大屏数据接入

第一部分：数据大屏制作

一、 实验目的

1.1 实训核心任务

本次实训依托上一实验《浏览器市场与用户画像分析 – 数据加工》产出的全部聚合统计表，使用 Uniplore 平台内置的助睿 Max 可视化工具，完成浏览器市场行为分析大屏的静态页面搭建工作。

1.1.1 实训能力目标

能够结合业务分析需求，完成可视化大屏整体页面布局规划，根据数据类型合理选择匹配的图表组件；

熟练掌握预聚合数据表与助睿 Max 可视化组件的绑定接入流程；

独立完成具备页面跳转交互基础能力的可视化大屏制作；

依托大屏完整展示的各类指标图表，梳理、提炼浏览器市场相关业务分析结论。

二、 实验环境

2.1 实训平台基础信息

2.1.1 平台访问入口

实训操作网页端：助睿在线实验平台 https://lab.guilian.cn/

一站式数据分析基座：助睿数智 Uniplore，官方网站地址 https://www.uniplore.com/

平台覆盖完整数据处理全流程，包含原始数据接入、ETL 清洗转换、机器学习建模、可视化大屏展示等零代码操作功能，适配高校数据分析课程实训，同时可满足企业日常业务数据加工、可视化落地需求。

2.1.2 可视化实训工具介绍

本次实验专用可视化工具：助睿 Max 数据大屏模块。

助睿 Max 为拖拽式零代码可视化搭建工具，无需编写程序代码即可快速搭建标准化数据监控大屏，适用场景覆盖展会展示、企业业务实时监控、风险预警、地理轨迹数据分析等场景。对比传统静态 Excel 图表，大屏能够更直观、生动地挖掘聚合数据背后的业务逻辑，广泛应用于零售、物流、电力、环保、交通等行业。

工具核心功能包含：海量基础可视化图表组件库、地理信息可视化（轨迹、热力、飞线图层）、多类型数据源兼容（CSV 文件、数据库表）、纯拖拽画布搭建模式、低代码蓝图高级编辑器，支持基础页面制作与高阶数据联动定制开发。

三、 实验数据

本次大屏搭建直接复用前序数据加工实验产出的市场行为分析类聚合数据表，所有数据聚焦浏览器行业市场规模、用户使用行为、全天活跃时段、竞品用户重叠四大分析方向，各模块指标、可视化组件、关联数据表完整对应关系如下表：

四、 整体分析框架

4.1 大屏对应核心业务分析问题

本次大屏全部图表、指标卡均围绕浏览器行业运营业务问题设计，每一块可视化内容对应固定分析维度，匹配关系如下：

4.2 大屏标准化设计规范

页面浏览叙事逻辑：遵循从上至下、从左至右阅读顺序，先展示全局整体核心指标，再拆分细分市场细节，先展示长期趋势，再展示单日细分数据；

核心信息优先级：将四大全局指标卡放置在页面顶部最醒目区域，优先展示平台整体运营数据；

图表与数据匹配规则：趋势变化类数据统一使用折线 / 区域图，多组别对比数据选用柱状 / 分组柱状图，整体占比分布数据选用饼图；

色彩统一规范：为 6 款主流浏览器分配固定专属色值，分别为#2177FC、#3DC3DF、#FF948B、#8A79FE、#82F9A5、#97DFFF，全大屏图表色系保持统一，降低识别成本；

基础交互预留：大屏预留浏览器全局筛选交互控件，支持切换查看全量浏览器数据或单款产品细分数据。

4.3 大屏布局参考示意图

五、 实验步骤

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

登录助睿在线实验平台账号，在页面左侧功能菜单栏找到「数据大屏」选项并点击。

点击菜单后系统自动跳转至助睿 Max 可视化子平台首页，页面包含大屏项目管理列表、组件素材库、公共资源库三大功能分区，本次大屏全部制作操作均在该平台画布内完成。

5.1.1 助睿 Max 工具功能说明

助睿 Max 可视化平台为图形化拖拽搭建工具，无需代码即可完成专业可视化应用，适配展会展示、业务实时监控、风险预警、地理数据分析等多种场景。相比传统静态图表，大屏可直观呈现数据背后业务逻辑，行业落地场景覆盖零售、物流、电力、环保、交通等。平台核心能力包含：丰富基础图表组件库、地理信息可视化图层（轨迹 / 热力 / 飞线）、兼容 CSV、数据库表等多类数据源、纯拖拽画布搭建、低代码蓝图编辑器，兼顾新手快速制作与高阶数据联动开发需求。

5.2 创建全新空白市场分析大屏项目

5.2.1 新建大屏入口操作

在大屏项目管理页面顶部，点击「+ 新建」功能按钮，在弹出的功能菜单内选择「新建大屏」选项。

5.2.2 选择空白画布模板

模板选择弹窗内提供多种预制大屏模板，本次实训选择「空白模板」，不加载预设图表组件。

5.2.3 命名大屏并进入编辑画布

模板确认后弹出大屏命名输入框，输入大屏名称为「市场分析」，点击下一步按钮，系统自动跳转至 1920×1080 尺寸的空白编辑画布。

5.3 大屏全局基础样式配置

5.3.1 页面全屏背景设置

画布右侧为页面全局设置面板，画布默认分辨率固定 1920×1080，可根据实际展示屏幕尺寸按需修改参数。

将页面背景素材链接粘贴至「背景图片」输入框覆盖原有默认素材，背景素材链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/bg-2.png，页面其余全局参数全部保持默认设置。

5.3.2 顶部标题 Banner 组件制作

在画布左侧组件分类栏切换至「媒体」分类，选中「单张图片」组件，组件自动加载至画布空白区域。

右键画布中新生成的图片组件，点击「重命名」操作，修改组件名称为「标题 banner」。

选中「标题 banner」组件，画布右侧切换至基础属性面板，调整组件长宽、坐标参数适配画布顶部区域；切换至基础设置栏，粘贴标题图素材链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/banner01.png，覆盖原有空白链接。

配置完成后点击画布顶部保存按钮，再点击预览按钮查看标题展示效果。

5.3.3 双大屏导航跳转按钮搭建

本次实训包含市场分析、用户画像两套独立大屏，需制作导航按钮实现页面互相跳转，操作流程如下：

新增「单张图片」组件，右键重命名为「市场分析按钮背景」，粘贴导航背景素材链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/comprehensive-data/navigation-bg-1.png，拖拽调整组件尺寸、横坐标至标题 Banner 右侧区域。

左侧组件栏切换至「文字」分类，选中「通用标题」组件，重命名为「市场分析」，调整文字组件坐标与背景图完全对齐；在基础设置面板修改文本内容为 “市场分析”，切换至文本样式面板调整字体、字号、文字颜色，匹配选中按钮高亮样式，切换数据 Tab 点击刷新数据，文字正常渲染。

全选「市场分析按钮背景」与「市场分析」文字组件，右键复制整套组件，复制后分别重命名组件为「用户画像按钮背景」、「用户画像」。

调整复制后两套组件的横坐标，将整套用户画像导航按钮放置在市场分析按钮右侧；修改「用户画像」文字组件文本内容，调整文字颜色为未选中浅色系，区分页面激活状态，刷新组件数据后预览。

5.3.4 顶部全部组件分组管理

框选画布顶部区域的标题 Banner、两套导航按钮全部组件，右键点击「成组」功能，在分组命名弹窗输入分组名称「顶部」，后续可统一移动、缩放顶部所有装饰组件。

5.4 各业务分区图表组件布局制作

所有图表展示分区统一固定制作模板：区域背景单张图片组件 + 标题背景图片组件 + 通用标题文字组件 + 对应业务图表组件，制作完成后将整套分区组件打包分组。

5.4.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，放置在区域背景顶部。

添加「通用标题」文字组件，修改文本内容为「浏览器用户数」，调整对齐方式为左对齐，匹配标题背景位置。

左侧图表组件栏选中「基础柱状图」，重命名为「浏览器用户数柱状图」，拖拽放置在标题下方空白区域，调整图表尺寸。

选中柱状图组件，进入图表样式面板，将图例设置为可见、水平居中；打开全局样式面板调大图表上边距，避免图例遮挡柱状图形，其余样式参数按需微调。

框选本分区全部背景、标题、图表组件，右键成组，分组命名「浏览器用户数」，点击保存画布。

5.4.2 市场格局分区：浏览器使用时长占比饼图

右键复制上一小节完成的「浏览器用户数」完整分组，拖拽至画布右侧对应布局位置，组件复制后空白时点击刷新数据恢复素材显示。

选中分区内通用标题组件，修改文本内容为「浏览器使用时长」，刷新数据更新标题文字。

删除分组内原有基础柱状图组件，在图表栏添加「多维度饼图」，重命名「浏览器使用时长占比」，调整尺寸放入分区内。

饼图样式配置：饼图样式面板将外圈透明度调至 0 关闭外圈展示；类目标签设置为可见；数据系列内依次将 6 个浏览器系列色值设置为#2177FC、#3DC3DF、#FF948B、#8A79FE、#82F9A5、#97DFFF。

将饼图纳入当前分组，点击画布保存。

5.4.3 市场格局分区：浏览器人均使用时长柱状图

复制 5.4.1 小节「浏览器用户数」完整分组，拖拽至画布指定位置，刷新组件数据恢复素材显示。

修改分区标题文字为「浏览器人均使用时长」，刷新数据；分组内保留原有基础柱状图，重命名柱状图组件为「人均使用时长柱状图」，无需更换图表类型，微调图表尺寸后保存。

5.4.4 数据概览分区：全局四大指标卡翻牌器

复制 5.4.1 小节基础分区分组，重命名分组「数据概览」，拖拽至画布顶部中间区域，缩小整体分区尺寸，刷新组件数据。

选中分区内短标题背景组件，替换素材链接为长标题背景图：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/library-data/audio-video.png；

添加「数据翻牌器」组件，重命名「总使用时长」，调整图标与翻牌器上下对齐；

翻牌器样式：标题居中对齐，修改标题文本为总使用时长，翻牌内容居中，配置数值后缀 “小时”；

框选图标 + 翻牌器，成组命名「总使用时长」。

复制 3 组「总使用时长」指标卡分组，分别重命名「人均使用时长」「活跃用户占比」「重度用户占比」；后两组指标卡替换图标素材链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/library-data/degree-thesis.png，同步修改翻牌器标题与后缀，横向均匀排布在分区内，保存画布。

5.4.5 时段偏好分区：工作日 vs 周末分组柱状图

复制基础分区分组，重命名「周内对比」，拖拽至画布指定位置，刷新组件数据；替换长标题背景图，修改分区标题为「工作日 vs 周末使用时长」。

删除原有柱状图，添加「分组柱状图」组件，重命名「工作日 vs 周末使用时长分组柱状图」，调整图表尺寸。

图表样式设置：将第二系列柱子颜色修改为#3DC3DF，调整图例、图表边距、柱间距参数优化视觉效果，保存分区配置。

5.4.6 时段偏好分区：24 小时活跃分布区域图

复制上一小节「周内对比」完整分区，重命名「24 小时活跃分布」，拖拽至画布对应位置，刷新组件数据恢复素材。

修改分区标题文字为「24 小时活跃用户数分布」；删除原有分组柱状图，添加「区域图」组件，调整图表尺寸适配分区。

区域图样式配置：图表主色调设置为#29F1FA，调整折线、填充区域、标记点样式参数，保存画布。

5.4.7 用户行为分区：浏览器周活跃趋势折线图

复制基础短标题分区分组，重命名「浏览器周活跃用户数变化」，拖拽至画布指定位置，修改分区标题，删除原有柱状图并添加基础折线图组件，调整图表尺寸、图例、边距后完成布局，保存画布。

5.4.8 用户行为分区：使用频率堆叠柱状图

复制「浏览器周活跃用户数变化」完整分组，重命名「使用频率分布」，修改分区标题；替换图表组件为「垂直基本柱图（堆叠柱状图）」，微调图表样式后保存。

5.4.9 竞争关系分区：浏览器使用数量基础饼图

复制「使用频率分布」完整分区，重命名「浏览器使用数量分布」，修改分区标题；替换图表组件为「基本饼图」，调整饼图标签、色系、内圈大小等样式参数，保存画布全部修改。

5.5 全画布保存与整体预览

全部分区、装饰组件配置完成后，点击画布顶部保存按钮存储大屏项目，点击全屏预览按钮查看 1920×1080 完整页面效果，检查组件错位、素材空白、图表样式异常等问题。

静态页面布局搭建全部完成，下一阶段实验将通过蓝图编辑器绑定数据表完成动态数据接入。

六、 实验结果

6.1 全局页面基础样式成果

大屏画布分辨率固定 1920×1080，全屏背景素材正常加载无拉伸变形；顶部标题 Banner、两套导航跳转按钮布局规整，组件分组命名清晰，拖拽移动时顶部整体装饰组件不会错位，两套导航按钮区分激活 / 未选中视觉样式，交互基础组件全部配置完成。

6.2 九大业务分区可视化组件成果

数据概览分区：四大数据翻牌器指标卡排布整齐，图标与数值文字样式统一，适配全局大屏视觉风格；

市场格局三大图表分区：柱状图、多维度饼图组件样式匹配预设色值规范，图例、图表边距参数调试完成，无图例遮挡图形问题；

用户行为趋势分区：周活跃折线图、堆叠柱状图尺寸适配分区，标题文字、背景素材无缺失；

时段偏好分区：24 小时区域图、工作日周末分组柱状图色系区分清晰，分区布局符合从上至下、从左至右的叙事逻辑；

竞争关系分区：多浏览器使用数量基础饼图标签正常展示，分区装饰背景、标题素材加载正常。

6.3 页面整体视觉校验结论

全大屏遵循预设设计规范，核心指标卡放置页面顶部核心视觉区域，趋势、对比、占比类图表选用匹配组件，6 款浏览器全图表色系统一，组件全部打包分区分组便于后续批量调整，无组件层级遮挡、素材空白、文字错位问题，完整完成浏览器市场分析大屏静态页面搭建任务，可承接下一阶段蓝图数据接入实训。

七、 问题与解决

7.1 复制分组组件后画布素材空白不显示

问题现象：完整复制整套分区分组后，页面内图片、文字组件全部空白，无法正常展示素材。

解决方案：选中空白组件，在组件数据 Tab 页面点击「刷新数据」按钮，重新拉取 OSS 存储图片素材与文字配置，素材即可正常渲染。

7.2 长标题区域使用短标题背景图出现拉伸变形

问题现象：数据概览分区标题区域尺寸更大，复用短标题背景素材时图片长宽比例失调、横向拉伸。

解决方案：区分两种标题背景素材使用场景，短图表分区使用title-bg-short.png，宽幅多指标分区统一替换长标题素材title-bg-long.png，两类素材不可交叉混用。

7.3 饼图、柱状图图例遮挡图表主体图形

问题现象：图例与图表图形垂直距离过近，文字图例覆盖柱状、饼图展示区域，视觉杂乱。

解决方案：打开对应图表全局样式面板，调大图表上边距、左右边距数值，拉大图例与绘图区域的垂直间距，规避遮挡问题。

7.4 OSS 图片链接粘贴后组件依旧空白无图

问题现象：完整复制素材链接粘贴至组件基础设置后，图片组件保持空白状态。

解决方案：清理链接前后多余空格、换行符号，核对素材 OSS 链接完整无误；确认网络访问正常，重新粘贴链接后刷新组件数据。

7.5 多层组件叠加后上层装饰图遮挡底层图表

问题现象：区域背景、标题图片层级高于图表，图表被装饰素材完全遮挡无法查看。

解决方案：右键目标图表组件，选择「上移一层 / 置顶」；右键装饰背景组件选择「下移一层 / 置底」，调整组件图层上下层级顺序。

八、 实验总结

8.1 实操工具技能收获

本次实训完整完成浏览器市场分析大屏静态页面全流程搭建，熟练掌握助睿 Max 可视化工具基础操作，包含空白大屏创建、全局背景与标题素材配置、导航交互按钮制作、各类可视化图表（柱状图、饼图、折线图、区域图、分组柱状图、堆叠柱状图、指标翻牌器）拖拽与样式调试；同时掌握组件复制、批量分组、图层层级调整、素材链接配置等高效画布操作技巧，能够根据数据业务类型自主完成图表组件选型。

8.2 可视化设计认知提升

通过本次大屏搭建实操，理解数据可视化大屏并非图表组件的简单堆砌，整体页面需要围绕业务分析逻辑规划浏览叙事顺序，遵循「先全局指标、后细分维度」的页面排布规则；同时掌握标准化可视化设计规范，包含页面视觉优先级、色系统一规范、图表与数据匹配原则，建立从业务问题反向推导页面布局、图表选型的完整设计思路。

8.3 业务链路完整认知

结合前序 ETL 数据加工实验与本次大屏静态布局制作，搭建起「原始日志 ETL 聚合加工→可视化大屏页面搭建→业务数据展示分析」完整数据分析业务链路。大屏内每一张图表、每一项指标卡均对应明确的浏览器行业运营业务问题，可视化页面是聚合数据落地、直观输出业务结论的可视化载体。

8.4 实操现存不足与后续优化方向

实操过程中频繁出现素材空白、组件层级错乱、图表边距参数调试耗时久等问题，核心原因为组件参数、素材链接记忆不熟练；

画布组件排布零散，复制分区后需要反复拖拽调整坐标，整体搭建效率偏低；

本次仅完成纯静态页面布局搭建，未绑定数据库聚合表实现动态数据联动，下一阶段蓝图编辑器实训将补充数据接入流程。

优化思路：整理全部实验固定素材链接、浏览器标准色值、图表通用样式参数文档，后续搭建大屏直接复用模板，减少重复调试操作，提升页面制作效率。

附录 实验全部素材 OSS 链接汇总表

第二部分：大屏数据接入

一、 实验目的

本次实验基于上一阶段完成的浏览器市场分析大屏静态布局，通过助睿 Max 内置的蓝图编辑器，将前序加工完成的数据库聚合表与大屏各可视化组件进行数据绑定，实现图表从静态占位到动态展示真实业务数据的转换。

通过本次实训，掌握以下核心能力：

理解蓝图编辑器的核心概念与工作逻辑，明确数据源、触发器、动作、变量的作用；

独立完成团队私有数据库的数据源连接配置；

能够根据图表数据格式编写对应 SQL 查询语句；

掌握查询结果与图表组件的数据映射绑定方法。

二、 实验环境

• 实训操作平台：助睿在线实验平台 https://lab.guilian.cn/
• 一站式数据基座：助睿数智 Uniplore（官网 https://www.uniplore.com/），覆盖数据接入、ETL 处理、建模分析、可视化展示全链路零代码功能
• 可视化工具：助睿 Max 数据大屏模块
• 数据存储：团队私有 MySQL 数据库

三、 实验数据

本次实验直接复用前序数据加工实验产出的 6 张标准化聚合表，作为大屏动态数据的唯一来源，各数据表与大屏图表的对应关系如下：

四、 蓝图编辑器概述

4.1 核心定位

蓝图编辑器是助睿 Max 中用于配置数据流与交互逻辑的可视化编程工具，采用 “节点 – 连线” 的拖拽式操作模式，无需编写完整代码即可管理大屏内多个组件的交互与数据同步关系。其优势在于保证数据实时性、支持请求合并分发、可模块化拆分交互链路。

4.2 核心概念说明

五、 实验步骤

5.1 配置团队私有数据库数据源

进入助睿 Max 数据大屏平台，点击左侧导航栏的「我的数据」选项。

点击页面右上角「+ 新建」按钮，选择「新建数据源」。

在配置页面输入团队私有数据库的连接信息，点击「立即添加」完成数据源创建。

切换标签页后返回「我的数据」页面，确认新添加的团队私有数据库已显示在列表中

5.2 导出大屏组件至蓝图编辑器

只有导出到蓝图编辑器的组件，才能进行数据绑定与交互配置。

打开上一实验制作完成的「市场分析」数据大屏项目。

在左侧图层栏或画布中右键点击需要绑定数据的组件，选择「导出到蓝图编辑器」。

依次导出所有需要接入数据的图表、指标卡组件。

比如：

点击页面顶部「蓝图编辑器」图标，进入逻辑配置页面，在导入节点列表中确认所有组件已成功导入。

5.3 添加页面初始化全局节点

全局节点用于在大屏页面加载完成时自动触发后续数据加载操作，是所有数据请求的统一入口。

在左侧逻辑节点面板中，拖拽「全局节点」到中间画布。

全局节点的「页面初始化完成」输出接口，将作为后续所有 SQL 请求节点的触发信号。

5.4 市场格局板块三图表数据绑定

5.4.1 添加 SQL 请求节点

拖拽「SQL 请求」节点到画布，将全局节点的「页面初始化完成」输出连接到 SQL 请求的「执行 SQL」输入。

选中 SQL 请求节点，右侧配置面板中：

数据源选择「团队私有数据库」

SQL 类型选择「查询」

处理方法代码框中输入以下 SQL，一次性查询browser_coverage表的全部所需数据：

let sql = `

    select

    browser_name as x,

    user_count as y1,

    round(total_duration_sec/3600,0) as y2,

    round((total_duration_sec/3600)/user_count,1) as y3

    from labs.browser_coverage

    order by browser_name`

return sql

5.4.2 并行数据处理与格式转换

通过并行数据处理节点，将同一份 SQL 查询结果分发到多个图表，并转换为对应图表要求的数据格式。

拖拽「并行数据处理」节点到画布，在其配置面板中新增 2 个处理方法，共 3 个方法，分别命名为：各浏览器用户数、各浏览器总使用时长、各浏览器人均使用时长。

将 SQL 请求节点的「执行成功」输出接口，分别连接到并行数据处理的 3 个处理方法输入接口。

分别在 3 个处理方法的代码框中输入对应格式转换代码：

各浏览器用户数：

return data.map(item => ({

    x: item.x,

    y: item.y1,

    s: '用户数'

}));

• 各浏览器总使用时长：

return data.map(item => ({

    name: item.x,

    value: item.y2

}));

• 各浏览器人均使用时长：

javascript

运行

return data.map(item => ({

    x: item.x,

    y: item.y3,

    s: '人均时长(小时)'

}));

5.4.3 绑定数据到图表组件

从导入节点列表中，拖拽「浏览器用户数柱状图」「浏览器使用时长占比饼图」「人均使用时长柱状图」3 个节点到画布。

将并行数据处理的 3 个处理方法输出接口，分别连接到对应图表的「导入数据」输入接口。

点击页面顶部「保存」按钮，点击「预览」查看数据渲染效果，确认数据显示正常。

若饼图样式不协调，可在画布编辑器中选中饼图，在数据系列中调整内外半径参数优化显示效果。

5.5 数据概览指标卡数据绑定

5.5.1 添加 SQL 请求节点

拖拽新的「SQL 请求」节点到画布，连接全局节点的「页面初始化完成」输出。

配置面板中选择「团队私有数据库」，SQL 类型「查询」，输入以下 SQL 查询browser_overview表数据：

let sql = `select metric_name, metric_value from labs.browser_overview `

return sql

5.5.2 并行数据处理

添加「并行数据处理」节点，新增 3 个处理方法，共 4 个方法，分别命名为：总使用时长、人均使用时长、活跃用户占比、重度用户占比。

将 SQL 请求的「执行成功」输出连接到 4 个处理方法输入。

分别输入格式转换代码：

• 总使用时长：

var item = data.find(d => d.metric_name === '总使用时长');

return [{ value: item ? item.metric_value : 0 }];

• 人均使用时长：

var item = data.find(d => d.metric_name === '人均使用时长');

return [{ value: item ? item.metric_value : 0 }];

• 活跃用户占比：

var item = data.find(d => d.metric_name === '活跃用户占比');

return [{ value: item ? item.metric_value : 0 }];

• 重度用户占比：

javascript

运行

var item = data.find(d => d.metric_name === '重度用户占比');

return [{ value: item ? item.metric_value : 0 }];

5.5.3 绑定数据到指标卡

拖拽 4 个数字翻牌器节点到画布。

将 4 个处理方法的输出分别连接到对应指标卡的「导入数据」接口。

保存并预览，确认四个核心指标正常显示。

5.6 工作日 vs 周末使用时长图表数据绑定

拖拽「SQL 请求」节点，连接全局节点输出。

配置 SQL 查询语句：

let sql = `

select

    browser_name as x,

    avg_duration_sec as y,

    day_type as s

from labs.browser_weekday_weekend

order by browser_name, day_type

`

return sql

拖拽「工作日 vs 周末使用时长分组柱状图」节点到画布。

将 SQL 请求的「执行成功」输出连接到图表的「导入数据」接口。

保存预览，确认数据显示正常。

5.7 24 小时活跃用户分布图表数据绑定

拖拽「SQL 请求」节点，连接全局节点输出。

配置 SQL 查询语句：

javascript

运行

let sql = `

    select hour as x,

    active_user_count as y,

    browser_name as s

from labs.browser_hourly

order by browser_name, hour

`

return sql

拖拽「24 小时活跃用户数分布区域图」节点到画布，连接 SQL 输出到图表导入数据接口。

为保证折线、标记点、图例颜色一致，在画布编辑器中选中该图表，在数据系列中为 6 个浏览器分别设置对应颜色。

存预览，查看最终效果。

5.8 浏览器周活跃趋势图表数据绑定

拖拽「SQL 请求」节点，连接全局节点输出。

配置 SQL 查询语句：

let sql = `

  select week_range as x,

    active_user_count as y,

    browser_name as s

  from labs.browser_weekly_active

  order by browser_name, week_range

`

return sql

拖拽「浏览器周活跃用户数变化折线图」节点到画布，连接 SQL 输出到图表导入数据接口。

同步骤 5.7，为 6 个浏览器设置统一的系列颜色。

保存预览。

5.9 使用频率分布图表数据绑定

拖拽「SQL 请求」节点，连接全局节点输出。

配置 SQL 查询语句：

let sql = `

  select

      browser_name as s,

      user_count as y,

      usage_level as x

   from labs.browser_frequency_stats

   order by browser_name

`

return sql

拖拽「使用频率分布堆叠柱状图」节点到画布，连接 SQL 输出到图表导入数据接口。

保存预览。

5.10 浏览器使用数量分布图表数据绑定

let sql = `

  select

      browser_count as name,

      user_count as value

  from labs.browser_multi_usage

  order by browser_count

`

return sql

拖拽「浏览器使用数量分布饼图」节点到画布，连接 SQL 输出到图表导入数据接口。

保存预览。

5.11 大屏预览与发布上线

所有组件数据绑定完成后，点击页面右上角「预览」图标，全屏查看大屏整体效果，检查所有图表数据是否正常渲染、样式是否协调。

确认无误后，点击右上角「发布」图标。

在弹出的发布对话框中，点击「发布分享」。

点击分享链接右侧的「复制」按钮，将链接粘贴到浏览器地址栏，即可在线访问已发布的大屏。

六、 实验结果

数据源配置成功：团队私有数据库连接正常，可正常读取所有前序加工的聚合表数据。

数据绑定全部完成：市场格局、数据概览、时段偏好、用户行为、竞争关系五大板块的 9 个图表组件均成功绑定数据库数据，页面加载时自动触发数据请求，图表动态渲染正常。

样式与数据一致性：所有图表的浏览器颜色标识统一，数据格式与图表要求匹配，无数据错位、缺失问题。

大屏发布成功：生成可公开访问的在线分享链接，第三方浏览器可正常打开并查看实时数据，数据与数据库保持同步。

七、 问题与解决

7.1 图表数据不显示，预览为空白

问题现象：保存并预览后，图表区域无数据，仍显示静态占位效果。

解决方案：检查 SQL 请求节点的数据源是否选择正确，SQL 语句是否有语法错误；确认组件是否已正确导出到蓝图编辑器，并行节点的连线是否完整。

7.2 饼图 / 柱状图图例与数据颜色不匹配

问题现象：图例颜色与图表内对应系列的颜色不一致。

解决方案：在画布编辑器中选中图表，进入数据系列面板，手动为每个浏览器系列设置统一的颜色值，保证全大屏色系一致。

7.3 发布后链接无法访问

问题现象：复制分享链接后，浏览器提示无法访问页面。

解决方案：确认网络连接正常，检查发布操作是否完整执行；若仍无法访问，重新点击发布按钮，生成新的分享链接。

八 实验总结

本次实验完成了浏览器市场分析大屏从静态布局到动态数据接入的全流程，掌握了助睿 Max 蓝图编辑器的核心操作，包括数据源配置、SQL 查询编写、并行数据处理、组件数据绑定与大屏发布。通过实操，理解了可视化大屏 “数据 – 逻辑 – 展示” 三层架构的工作原理，打通了从 ETL 数据加工到可视化落地的完整业务链路。

实训过程中，通过统一 SQL 查询 + 并行分发的方式，有效减少了数据库请求次数，提升了大屏加载速度。后续可进一步添加全局筛选器组件，实现单浏览器数据的切换查看，增强大屏的交互性与分析深度。