#助睿平台#商业数据分析 #浏览器用户用户画像 #贵州某211 #零代码

一、实验背景

1 实验目的

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

通过本实验，使用介绍以下功能：

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

• 创建数据库数据源连接

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

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

2 实验环境

• 实验平台：之前实验有提到，避免广告营销不再重新提到

• 4可视化工具：助睿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 创建数据库数据源

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

添加图片注释，不超过 140 字（可选）

点击“+创建” - “新建数据源”

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

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

添加图片注释，不超过 140 字（可选）

5.2 组件导出到蓝图编辑器

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

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

添加图片注释，不超过 140 字（可选）

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

添加图片注释，不超过 140 字（可选）

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

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

添加图片注释，不超过 140 字（可选）

5.3 添加全局节点

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

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

添加图片注释，不超过 140 字（可选）

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

5.4.1 新增SQL请求节点

从逻辑节点面板中，点击“SQL请求”节点，并将全局节点的“页面初始化完成”输出接口连接到“SQL 请求”节点的“执行SQL”输入接口

添加图片注释，不超过 140 字（可选）

点击“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

添加图片注释，不超过 140 字（可选）

5.4.2 并行数据处理

在蓝图编辑器中，可以通过并行数据处理节点将同一个SQL查询的结果分发到多个图表，每个图表提取自己需要的字段。以下是具体配置方法：

添加并行数据处理组件，并在其处理方法中再增加2个处理方法，一共3个处理方法，分别命名为：各浏览器用户数、各浏览器总使用时长、各浏览器人均使用时长

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

添加图片注释，不超过 140 字（可选）

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

添加图片注释，不超过 140 字（可选）

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

• 浏览器用户数柱状图：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

}));

各浏览器人均使用时长

5.4.3 添加图表节点

点击浏览器用户数柱状图、浏览器使用时长占比、人均使用时长柱状图这3个节点，将它们添加到画布中，再将并行数据处理的3个处理方法的输出接口连接到对应的图表的“导入数据接口”，如下：

添加图片注释，不超过 140 字（可选）

点击保存，我们可以预览一下数据情况是否符合预期

可以看到，数据已经更新为数据库中的数据了

预览出现下图情况

添加图片注释，不超过 140 字（可选）

可以按照以下配置

添加图片注释，不超过 140 字（可选）

饼图的样式可以调整一下，使其更协调

在画布编辑器中选择浏览器使用时长占比饼图，在数据系列中调整每个系列的内外半径，实现类似的以下效果：

5.5 为指标区域图表配置数据

5.5.1 添加SQL请求节点

从逻辑节点面板中，点击“SQL请求”节点，并将全局节点的“页面初始化完成”输出接口连接到“SQL 请求”节点的“执行SQL”输入接口

添加图片注释，不超过 140 字（可选）

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

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

return sql

添加图片注释，不超过 140 字（可选）

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

[

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

添加图片注释，不超过 140 字（可选）

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

添加图片注释，不超过 140 字（可选）

其中，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个处理方法的输出接口连接到对应的图表的“导入数据接口”，如下：

添加图片注释，不超过 140 字（可选）

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

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请求节点的执行成功输出接口连接到“导入数据接口”，如下：

添加图片注释，不超过 140 字（可选）

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

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请求节点的执行成功输出接口连接到“导入数据接口”，如下：

添加图片注释，不超过 140 字（可选）

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

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

添加图片注释，不超过 140 字（可选）

设置完成后，效果如下：

添加图片注释，不超过 140 字（可选）

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请求节点的执行成功输出接口连接到“导入数据接口”，如下：

添加图片注释，不超过 140 字（可选）

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

添加图片注释，不超过 140 字（可选）

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

添加图片注释，不超过 140 字（可选）

设置完成后，效果如下：

添加图片注释，不超过 140 字（可选）

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请求节点的执行成功输出接口连接到“导入数据接口”，如下：

添加图片注释，不超过 140 字（可选）

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

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请求节点的执行成功输出接口连接到“导入数据接口”，如下：

添加图片注释，不超过 140 字（可选）

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

三、实验结果

5.11 预览并发布

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

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

添加图片注释，不超过 140 字（可选）

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

添加图片注释，不超过 140 字（可选）

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

添加图片注释，不超过 140 字（可选）

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

添加图片注释，不超过 140 字（可选）

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

添加图片注释，不超过 140 字（可选）