【助睿实验指导】实验5-3：浏览器市场分析-大屏数据接入

[Uniplore官方]

1 实验目的

本实验基于上一实验《浏览器市场分析-数据大屏静态布局制作》完成的大屏布局，使用助睿Max的蓝图编辑器，将之前实验加工好的数据表接入到大屏的各个图表组件中，使图表能够动态展示真实数据。

通过本实验，学生应掌握：

• 理解蓝图编辑器的基本概念（数据源、触发器、动作）

• 创建数据库数据源连接

• 为图表组件编写SQL查询语句

• 将查询结果绑定到图表组件

2 实验环境

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

本次实验使用助睿数智（Uniplore）作为一站式数据科学平台。该平台覆盖从数据接入、ETL处理、机器学习建模到可视化展示的全链路零代码功能，适用于数据分析教学与企业数据加工场景。

助睿数智官网为 https://www.uniplore.com/

• 可视化工具：助睿Max（数据大屏）

• 数据来源：团队私有数据库（MySQL）

3 实验数据

本实验使用上一实验加工完成的大屏一目标表，共6张表：

表名	用途	关联图表
browser_coverage	浏览器市场覆盖率统计	指标卡、柱状图、饼图
browser_hourly	浏览器时段活跃统计	24小时活跃分布折线图
browser_weekly_active	各浏览器周活跃趋势	周活跃趋势折线图
browser_frequency_stats	浏览器使用频率分布	使用频率堆叠柱状图
browser_multi_usage	用户浏览器使用数量分布	浏览器使用数量饼图
browser_weekday_weekend	浏览器工作日周末对比	工作日vs周末分组柱状图

4 蓝图编辑器概述

4.1 什么是蓝图编辑器？

蓝图编辑器是助睿Max中用于配置数据流和交互逻辑的可视化编程工具。它采用“节点-连线”的方式，帮助您自由管理可视化应用中多个组件之间的交互关系。

蓝图编辑器的优势：

• 蓝图编辑器可以保证交互和数据的实时性和同步性。

• 蓝图编辑器支持数据请求合并和数据分发的功能。

• 蓝图编辑器可模块化拆分，专注单个的交互链路，不需要考虑代码的整理和规范，只需要专注于业务规则和交互需求即可。

4.2 核心概念

概念	说明
数据源	数据库连接配置，定义数据从哪里来
查询	SQL语句，定义取什么数据
触发器	触发数据加载的事件（如页面加载、组件点击、定时刷新等）
动作	触发器执行后的操作（如查询数据、刷新图表）
变量	用于在查询之间传递参数（如筛选器选中的浏览器名称）

5 实验步骤

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=6c8835415fd44ee88317766691976922