1. 实验目的

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

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

• 掌握数据库数据源连接的创建方法；

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

• 掌握将SQL查询结果绑定至图表组件的操作。

2. 实验环境

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

• 核心工具：助睿数智（Uniplore）—— 一站式数据科学平台 (Uniplore iDIS-大数据智能全流程服务平台-BI数据可视化工具)，提供从数据接入、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 创建数据库数据源

1. 登录数据大屏平台，导航至“我的数据”模块。 2. 点击左上角“+新建”，选择“新建数据源”。

2. 填入团队私有数据库的连接信息，确认无误后点击“立即添加”。 4. 切换Tab选项卡并切回“我的数据”，即可查看到新增的数据源。

5.2 组件导出至蓝图编辑器

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

1. 打开上一实验保存的“市场分析”数据大屏项目。

2. 在画布编辑模式下，于左侧图层栏或中间画布区右键点击目标组件，选择导出到蓝图编辑器。

3. 依照此法，将所有需接入数据的组件逐一导出。

4. 导出完毕后，点击顶部“蓝图编辑器”图标进入蓝图视图，在导入节点列表中可查看已导出的组件节点。

5.3 添加全局节点

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

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

5.4.1 添加SQL请求节点

1. 拖入“SQL请求”节点，将全局节点的“页面初始化完成”输出接口连线至SQL请求节点的“执行SQL”输入接口。 2. 选中“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查询结果分发至多张图表。

1. 添加并行数据处理组件，点击“+”新增2个处理方法，共计3个，分别命名为：各浏览器用户数、各浏览器总使用时长、各浏览器人均使用时长。

2. 将SQL请求节点的“执行成功”输出接口分别连线至上述三个处理方法的输入接口。

3. 根据图表所需的数据结构（可在画布编辑器的“数据”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 添加图表节点

1. 将浏览器用户数柱状图、浏览器使用时长占比（饼图）、人均使用时长柱状图三个组件节点拖入画布。

2. 将并行数据处理对应的三个输出接口，分别连线至对应图表的“导入数据接口”。

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

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

5.5.1 添加SQL请求节点

1. 新增一个“SQL请求”节点，连接至全局节点的初始化事件。

2. 节点配置如下：

   • 数据源：团队私有数据库

   • 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 并行数据处理

1. 添加并行数据处理组件，新增3个方法，共4个，依次命名为：总使用时长、人均使用时长、活跃用户占比、重度用户占比。

2. 连线SQL节点的成功输出至这四个方法。

3. 数据映射（数字翻牌器）：指标标题已预设，仅需映射 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 }];

5.5.3 添加图表节点

1. 拖入4个数字翻牌器节点。

2. 将并行输出的四个接口对应连接至翻牌器的“导入数据接口”。

3. 保存并预览。

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

5.6.1 添加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 添加图表节点

1. 拖入“工作日vs周末使用时长”图表节点。

2. 连接SQL节点的成功输出至图表的“导入数据接口”。

3. 保存并预览。

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

5.7.1 添加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 添加图表节点

1. 拖入“24小时活跃用户分布”图表节点。

2. 建立连线。

3. 保存并预览。

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

• 选中图表，进入数据系列，针对6个浏览器系列分别设定折线和标记的RGB值。

• 调整后效果参考：

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

5.8.1 添加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 添加图表节点

1. 拖入“活跃用户周变化”图表节点并建立连线。

2. 保存预览。 颜色调整： 同样需要对6个系列进行颜色统一配置。

• 效果参考：

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

5.9.1 添加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 添加图表节点

1. 拖入“使用频率分布”图表节点并连线。

2. 保存预览。

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

5.10.1 添加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 添加图表节点

1. 拖入“浏览器使用数量分布”图表节点并连线。

2. 保存预览。

5.11 预览与发布

1. 点击右上角预览图标，检查整体效果。

2. 确认无误后，点击发布图标。

3. 在弹窗中点击发布分享。

4. 点击分享链接右侧的复制按钮获取URL。

5. 在浏览器中打开链接即可访问在线大屏。

案例参考链接： http://47.109.66.142:30887/#/dataScreen/release?shareId=6c8835415fd44ee88317766691976922

6.实验收获

1. 明晰蓝图编辑器数据源、触发器、动作、变量等核心概念，掌握数据从数据库调取、加工到图表渲染的完整流转逻辑。

2. 熟练掌握 MySQL 数据源创建、SQL 查询编写、JS 数据格式转换、蓝图节点连线、图表数据绑定等实操技能。

3. 掌握图表样式美化、大屏预览校验、项目发布及链接分享的全流程操作，熟悉零代码可视化大屏开发模式。