实验5-3：浏览器市场分析-大屏数据接入

一、实验目的

本实验依托前置实验《浏览器市场分析-数据大屏静态布局制作》已完成的数据大屏静态布局成果，借助助睿Max的蓝图编辑器工具，将预处理完成的数据表精准接入大屏各类图表组件，实现数据大屏图表组件的真实数据动态展示效果，完成静态大屏向动态数据可视化大屏的升级优化。

通过本次实验，学生可熟练掌握大数据可视化大屏的数据接入核心流程与实操方法，具体掌握目标如下：

1. 理解蓝图编辑器的核心基本概念，熟练掌握数据源、触发器、动作三大核心要素的定义与应用场景；

2. 掌握基于实验平台创建数据库数据源连接的完整操作流程，完成平台与私有数据库的对接；

3. 能够针对不同类型图表组件，编写适配业务需求的SQL数据查询语句；

4. 熟练完成SQL查询结果与大屏图表组件的绑定配置，实现图表动态渲染数据。

二、实验环境

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

本次实验依托助睿数智（Uniplore）一站式数据科学平台开展，该平台具备AI驱动、零代码、全链路数据处理能力，全面覆盖数据接入、ETL数据处理、自动机器学习建模、大模型应用建模、多维分析、可视化展示等核心功能，兼顾高校数据分析教学场景与企业落地级数据加工场景，为本次大屏数据接入实验提供完整技术支撑。

助睿数智官方网址：https://www.uniplore.com/

可视化工具：助睿Max（数据大屏），用于完成大屏数据配置、图表渲染与动态可视化展示

数据来源：团队私有MySQL数据库，为实验提供标准化、预处理完成的业务数据

三、实验数据

本次实验复用上一实验预处理加工完成的大屏目标业务数据集，共计6张结构化数据表，各数据表独立对应大屏不同图表组件，支撑浏览器市场多维度数据分析与可视化展示，具体数据表信息、用途及关联图表如下表所示。

四、蓝图编辑器概述

4.1 什么是蓝图编辑器？

蓝图编辑器是助睿Max专属的可视化编程工具，核心用于数据可视化大屏应用的数据流配置、交互逻辑搭建与联动规则管理。工具采用直观的“节点-连线”可视化操作模式，无需代码开发，即可自由搭建、管理可视化应用中各类组件的关联关系与数据流转逻辑。

相较于传统代码配置方式，蓝图编辑器具备多重核心优势，具体如下：

1. 保障数据交互与展示的实时性、同步性，可快速响应数据更新与页面交互操作；

2. 内置数据请求合并、数据分发核心功能，可高效处理多组件、多数据源的数据调度需求；

3. 支持模块化拆分交互链路，使用者无需关注代码规范与代码整理工作，可专注业务规则落地与交互需求实现，大幅降低大屏动态数据配置门槛。

4.2 核心概念

蓝图编辑器包含数据源、查询、触发器、动作、变量五大核心概念，是搭建大屏数据流的基础，各概念具体说明如下表所示：

五、实验步骤

5.1 创建数据库数据源

首先，我们需要创建链接团队私有数据库的数据源，进入数据大屏平台后，点击“我的数据”

点击“+新建” – “新建数据源”

输出团队私有数据库的信息后，点击“立即添加”

切换tab选项再切回我的数据后可以看见新添加的团队私有数据库

5.2 组件导出到蓝图编辑器

只有当组件导入到蓝图编辑器后，才可以为该组件配置交互。

打开上一实验制作的“市场分析”数据大屏

在画布编辑器内，右键单击左侧图层栏或中间画布区的组件，选择导出到蓝图编辑器，即可将对应组件导出到蓝图编辑器中。

同样的，依次把所有需要接入数据的组件导出到蓝图编辑器中

导出成功后，单击“蓝图编辑器”图标切换到蓝图编辑器页面，可在导入节点列表中查看对应的节点。列表内所有节点都可供后续配置交互使用。

5.3 添加全局节点

在蓝图编辑器里，在逻辑 节点面板中，将需要使用的逻辑节点单击拖入中间画布中。 逻辑节点包括了全局节点、数据处理 类节点、流程控制类节点以及输入设备类节点。

首先，我们全局节点，画布中自动添加1个全局节点，全局节点可用于在大屏打开时自动执行后续操作（如加载数据）

5.4 为市场格局3个图表配置数据

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个处理方法接口，如下：

接下来根据每个图表的数据接口映射格式处理查询到的数据，在画布编辑器界面，选择图表，可以在数据tab选项中查看数据接口映射：

根据查询结果，三个图表需要的字段

• 浏览器用户数柱状图：x（浏览器名称）、y1（用户数）
• 浏览器使用时长占比：name（浏览器名称）、value（使用时长）
• 人均使用时长柱状图：x（浏览器名称）、y3（人均时长）

因此，并行数据处理的3个处理方法的代码如下，分别粘贴到对应的代码块中即可：

各浏览器用户数

return data.map(item => ({
x: item.x,
y: item.y1,
s: '用户数'
}));

各浏览器总使用时长

return data.map(item => ({
name: item.x,
value: item.y2
}));

各浏览器人均使用时长

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”输入接口

点击“SQL 请求”节点，在配置面板中，数据源选择“团队私有数据库”，SQL类型为“查询”，处理方法的代码框中，输入以下SQL，一次性查询来源为 browser_overview 的数据：

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

该查询返回一个数组，格式如下：

[
{"metric_name": "总使用时长", "metric_value": 456800.00},
{"metric_name": "人均使用时长", "metric_value": 8.20},
{"metric_name": "活跃用户占比", "metric_value": 71.30},
{"metric_name": "重度用户占比", "metric_value": 23.50}
]

5.5.2 并行数据处理

添加并行数据处理组件，并在其处理方法中再增加3个处理方法，一共4个处理方法，分别命名为：总使用时长、人均使用时长、活跃用户占比、重度用户占比

SQL请求节点的执行成功输出接口分别连接到并行数据处理的4个处理方法接口，如下：

接下来根据数字翻牌器的数据接口映射格式处理查询到的数据，在画布编辑器界面，选择数字翻牌器，可以在数据tab选项中查看数据接口映射：

其中，name 字段我们已经在数据翻牌器中设置好了，现在只需处理 value 字段的映射关系根据查询结果：

总使用时长

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 }];

重度用户占比

var item = data.find(d => d.metric_name === '重度用户占比');
return [{ value: item ? item.metric_value : 0 }];

每个分支的输出格式为 [{ value: xxx }]，指标卡组件直接读取 value 字段显示数值。指标名称已预先配置在指标卡组件的标题中

5.5.3 添加图表节点

点击4个数字翻牌器组件的节点，将它们添加到画布中，再将并行数据处理的4个处理方法的输出接口连接到对应的图表的“导入数据接口”，如下：

点击保存，预览数据是否符合预期

5.6 为工作日vs周末使用时长图表配置数据

5.6.1 添加SQL请求节点

参考以上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

5.6.2 添加图表节点

点击工作日vs周末使用时长节点，将它添加到画布中，再SQL请求节点的执行成功输出接口连接到“导入数据接口”，如下：

点击保存，预览数据是否符合预期

5.7 为24小时活跃用户分布图表配置数据

5.7.1 添加SQL请求节点

参考以上SQL请求节点的配置步骤，完成SQL请求节点配置，查询代码如下：

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

5.7.2 添加图表节点

点击24小时活跃用户分布节点，将它添加到画布中，再SQL请求节点的执行成功输出接口连接到“导入数据接口”，如下：

点击保存，预览数据是否符合预期

这里需要注意，图例是跟着折线上的标签点的颜色变化的，为了使折线、标签点、图例颜色一致，需要分别设置颜色，在画布编辑器中选中图表，点开数据系列，这个折线图有6个图例，即6个浏览器，所以需要设置6个系列的折线和标记颜色

设置完成后，效果如下：

5.8 为活跃用户周变化图表配置数据

5.8.1 添加SQL请求节点

参考以上SQL请求节点的配置步骤，完成SQL请求节点配置，查询代码如下：

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

5.8.2 添加图表节点

点击活跃用户周变化节点，将它添加到画布中，再SQL请求节点的执行成功输出接口连接到“导入数据接口”，如下：

点击保存，预览数据是否符合预期

这里需要注意，图例是跟着折线上的标签点的颜色变化的，为了使折线、标签点、图例颜色一致，需要分别设置颜色，在画布编辑器中选中图表，点开数据系列，这个折线图有6个图例，即6个浏览器，所以需要设置6个系列的折线和标记颜色

设置完成后，效果如下：

5.9 为使用频率分布图表配置数据

5.9.1 添加SQL请求节点

参考以上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

5.9.2 添加图表节点

点击使用频率分布节点，将它添加到画布中，再SQL请求节点的执行成功输出接口连接到“导入数据接口”，如下：

点击保存，预览数据是否符合预期

5.10 为浏览器使用数量分布图表配置数据

5.10.1 添加SQL请求节点

参考以上SQL请求节点的配置步骤，完成SQL请求节点配置，查询代码如下：

let sql = `
select
browser_count as name,
user_count as value
from labs.browser_multi_usage
order by browser_count
`
return sql

5.10.2 添加图表节点

点击浏览器使用数量分布节点，将它添加到画布中，再SQL请求节点的执行成功输出接口连接到“导入数据接口”，如下：

点击保存，预览数据是否符合预期

5.11 预览并发布

组件的样式和数据都配置完成后，可以预览并发布可视化应用，实现应用的在线播放和演示。

单击大屏页面右上角的预览图标，预览可视化应用。

预览确认无误后，单击大屏页面右上角的发布图标

在弹出的发布对话框中单击发布分享

单击分享链接右侧的复制按钮

打开浏览器，将复制的链接粘贴到地址栏中，即可在线观看

2012年浏览器市场分析大屏链接：

http://47.109.66.142:30887/#/dataScreen/release?shareId=2828123683fa43f78833250c10e66bba

六、问题与解决

问题1：数据源创建后无法正常读取数据表数据

问题原因：数据库配置信息填写有误，或数据表所属库名、权限未开启，导致平台无法正常访问团队私有数据库数据表。

解决方法：重新核对数据库连接地址、账号、端口等配置信息，确认填写无误；核对SQL语句中的数据表前缀库名labs与实际数据库库名一致，刷新数据源配置，重新加载数据即可正常读取。

问题2：多系列折线图图例、折线颜色不一致，展示混乱

问题原因：多浏览器多系列图表未单独配置数据系列颜色，系统默认配色无法统一折线、标记点、图例样式。

解决方法：进入画布编辑器，选中对应折线图，在数据系列设置中，为6个浏览器系列分别配置专属折线颜色、标记点颜色，实现图表样式统一美观。

七、实验总结

本次实验基于助睿Max平台并依托Uniplore一站式大数据智能服务平台，完整完成了浏览器市场分析数据大屏的动态数据接入全流程操作，涵盖数据库数据源创建、蓝图编辑器节点配置、SQL数据查询、并行数据处理分发、图表数据绑定以及大屏预览发布等关键步骤，成功将前期预处理的六张业务数据表精准接入各图表组件，实现了浏览器市场覆盖率、时段活跃、周活跃趋势、使用频率、用户分布等多维度业务数据的动态可视化渲染，顺利完成静态大屏到动态数据可视化大屏的升级。在实验过程中，我系统理解并掌握了蓝图编辑器中数据源、查询、触发器、动作、变量五大核心概念，熟练掌握了数据库连接配置、自定义SQL查询、零代码数据处理、多图表数据绑定与大屏发布等实操技能，同时深入认识了Uniplore平台全链路零代码大数据处理能力与DataOps数据运营理念在可视化项目中的实际应用。实验期间通过排查数据源连接异常、字段映射不匹配、图表样式错乱、数据分发错位等常见问题，有效提升了自身的大数据可视化实操能力与问题排查能力，也让我更加明确数据可视化不仅是页面布局美化，更依赖规范的数据接入、精准的数据处理与合理的数据呈现，为后续开展大数据可视化、数据智能分析类项目积累了扎实的实践经验。

正文中关于实验平台的相关说明信息：

• 平台全称：助睿数智（Uniplore）一站式数据科学实验平台
• 平台定位：覆盖数据接入、ETL处理、机器学习建模到可视化分析的全链路Agentic零代码数据智能
• 产品官网：https://www.uniplore.com/
• 实验平台地址：https://lab.guilian.cn/