当前位置：首页 > news >正文

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

news 2026/6/5 2:00:38

实验：浏览器市场分析——数据大屏动态数据接入

1. 实验目的

本实验承接前序实验《浏览器市场分析-数据大屏静态布局制作》所完成的布局基础，依托助睿Max的蓝图编辑器，将已加工完毕的数据表接入至大屏的各图表组件中，从而实现图表的真实数据动态渲染。
通过本实验，学生应掌握以下技能：

理解蓝图编辑器的基本构成（数据源、触发器、动作）；
掌握数据库数据源连接的创建方法；
学会为图表组件编写SQL查询语句；
掌握将SQL查询结果绑定至图表组件的操作。

2. 实验环境

实验平台：助睿在线实验平台 (https://lab.guilian.cn/)
核心工具：助睿数智（Uniplore）—— 一站式数据科学平台 (https://www.uniplore.com/)，提供从数据接入、ETL处理、机器学习建模到可视化展示的全链路零代码功能。
可视化工具：助睿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 创建数据库数据源

登录数据大屏平台，导航至“我的数据”模块。
2. 点击左上角“+新建”，选择“新建数据源”。
填入团队私有数据库的连接信息，确认无误后点击“立即添加”。
4. 切换Tab选项卡并切回“我的数据”，即可查看到新增的数据源。

5.2 组件导出至蓝图编辑器

只有将组件导出至蓝图编辑器，方可为其配置交互逻辑。

打开上一实验保存的“市场分析”数据大屏项目。
在画布编辑模式下，于左侧图层栏或中间画布区右键点击目标组件，选择导出到蓝图编辑器。
依照此法，将所有需接入数据的组件逐一导出。
导出完毕后，点击顶部“蓝图编辑器”图标进入蓝图视图，在导入节点列表中可查看已导出的组件节点。

5.3 添加全局节点

在蓝图编辑器的逻辑节点面板中，拖拽所需的节点至画布中央。
首先拖入全局节点，该节点代表大屏应用本身，常用于在页面初始化时触发后续的数据加载动作。

5.4 为“市场格局”区域图表配置数据

5.4.1 添加SQL请求节点

拖入“SQL请求”节点，将全局节点的“页面初始化完成”输出接口连线至SQL请求节点的“执行SQL”输入接口。
2. 选中“SQL请求”节点，在右侧配置面板中进行如下设置：
- 数据源：选择“团队私有数据库”
- SQL类型：查询
- 处理方法：输入以下SQL代码以查询browser_coverage表：
  javascript
  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请求节点的“执行成功”输出接口分别连线至上述三个处理方法的输入接口。
根据图表所需的数据结构（可在画布编辑器的“数据”Tab查看）编写处理逻辑。

字段映射关系：

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

各处理方法代码实现：

各浏览器用户数
javascript
return data.map(item => ({
x: item.x,
y: item.y1,
s: ‘用户数’
}));
各浏览器总使用时长
javascript
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 添加图表节点

将浏览器用户数柱状图、浏览器使用时长占比（饼图）、人均使用时长柱状图三个组件节点拖入画布。
将并行数据处理对应的三个输出接口，分别连线至对应图表的“导入数据接口”。
点击保存并预览效果。

样式优化建议：
选中饼图组件，在数据系列中调整内外半径比例，以达到最佳视觉效果。

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

5.5.1 添加SQL请求节点

新增一个“SQL请求”节点，连接至全局节点的初始化事件。
节点配置如下：
- 数据源：团队私有数据库
- SQL类型：查询
- 代码：
  javascript
  let sql = select metric_name, metric_value from labs.browser_overview
  return sql
- 返回数据结构示例：
  json
  [
  {“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节点的成功输出至这四个方法。
数据映射（数字翻牌器）：指标标题已预设，仅需映射value字段。

代码逻辑：

总使用时长
javascript
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 }];
活跃用户占比
javascript
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个数字翻牌器节点。
将并行输出的四个接口对应连接至翻牌器的“导入数据接口”。
保存并预览。

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

5.6.1 添加SQL请求节点

配置SQL请求节点，代码示例如下：
javascript
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请求节点，代码示例如下：
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

5.7.2 添加图表节点

拖入“24小时活跃用户分布”图表节点。
建立连线。
保存并预览。

视觉一致性调整：
由于图例颜色跟随折线与标记点，需手动统一。

选中图表，进入数据系列，针对6个浏览器系列分别设定折线和标记的RGB值。
调整后效果参考：

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

5.8.1 添加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

5.8.2 添加图表节点

拖入“活跃用户周变化”图表节点并建立连线。
保存预览。

颜色调整：
同样需要对6个系列进行颜色统一配置。

效果参考：

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

5.9.1 添加SQL请求节点

配置SQL请求节点，代码示例如下：
javascript
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 添加图表节点

拖入“使用频率分布”图表节点并连线。
保存预览。

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

5.10.1 添加SQL请求节点

配置SQL请求节点，代码示例如下：
javascript
let sql =select browser_count as name, user_count as value from labs.browser_multi_usage order by browser_count
return sql