1. 实验目的

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

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

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

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

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

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

2. 实验环境

• 实验平台：助睿在线实验平台

• 核心工具：助睿数智（Uniplore）—— 一站式数据科学平台 ，提供从数据接入、ETL处理、机器学习建模到可视化展示的全链路零代码功能。

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

• 数据类型：团队私有数据库（MySQL）

3. 实验数据

本实验沿用上一实验产出的6张大屏目标表，具体如下：

4. 蓝图编辑器概述

4.1 什么是蓝图编辑器？

蓝图编辑器是助睿Max内置的可视化编程工具，专用于配置数据流与交互逻辑。它采用“节点-连线”的直观方式，帮助用户灵活管理可视化应用中多组件间的交互关系。

核心优势：

• 高时效性：保障交互与数据的实时同步；

• 数据调度：支持数据请求的合并与分发；

• 模块化：逻辑链路可拆分，用户仅需关注业务逻辑本身，无需顾虑底层代码规范。

4.2 核心概念

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_namereturn sql

5.4.2 并行数据处理

1. 使用并行数据处理组件，一份 SQL 查询出来的数据就能拆分给到不同图表。  拖入并行数据处理节点，点击加号新增两个处理项，最终凑齐三个分支，名称依次设置为各浏览器用户数、各浏览器总使用时长、各浏览器人均使用时长。 

2. 从 SQL 请求节点的执行成功输出端引出连线，逐一连接至三个命名好的处理方法输入端。 

3. 根据各图表需要的数据结构（可在画布编辑器的「数据」标签页中查看），分别编写对应的处理逻辑。 

三个图表所需字段：

• 浏览器用户数柱状图：x（浏览器名）、y1（用户数）

• 浏览器使用时长占比：name（浏览器名）、value（时长）

• 人均使用时长柱状图：x（浏览器名）、y3（人均时长）

各处理方法代码：

• 各浏览器用户数

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

1. 在画布中依次添加三类可视化组件：浏览器用户数柱状图、浏览器使用时长占比饼图、人均使用时长柱状图。

2. 分别从并行数据处理的三路输出端口引出连线，对接至对应图表的数据载入接口。 

3. 点击保存并可以预览效果。   4.预览出现下图情况  可以按照以下配置 样式优化操作：选中饼图控件，在数据系列配置项中调整内、外半径参数配比，优化图表展示观感。

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

5.5.1 添加SQL请求节点

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

2. 节点配置如下  点击“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 并行数据处理

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

2. 由 SQL 请求节点的执行成功输出端口引出连线，分别接入四项处理逻辑的输入端口。 

3. 接着参照数字翻牌器的接口映射格式处理数据源，选中画布上的数字翻牌器，在编辑器的数据选项卡里就能查阅接口映射详情。 

代码逻辑：

• 总使用时长

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

选取四款数字翻牌器组件并拖拽至画布，依次将并行数据处理模块下四个分支的输出端口，连线绑定至对应数字翻牌组件的数据导入接口，具体关联关系如下： 

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

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

拖拽工作日 vs 周末使用时长图表组件至画布，将 SQL 请求节点的执行成功输出接口连线接入该组件的数据导入接口，具体配置参考如下： 

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

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

点击 24 小时活跃用户分布节点，拖拽添加到画布；再把 SQL 请求节点的执行成功输出端，连接到该组件的导入数据接口，具体如下： 

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

图例颜色随标记同步变动，想要线条、标点、图例配色统一，需分开自定义颜色。选中图表进入数据系列，按 6 个浏览器对应的 6 个系列，分别配置折线和标记样式色值。 

设置完成效果如下：

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

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

保存预览。

同样需要对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 添加图表节点

选中使用频率分布节点添加至画布，从 SQL 请求执行成功输出端引线，对接组件导入数据接口，具体如下： 

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

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

拖拽浏览器使用数量分布节点到画布，引出 SQL 请求执行成功输出连线，接入图表的数据导入接口，对应关系如下： 

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

5.11 预览与发布

所有图表样式、数据配置完毕，支持预览与发布可视化项目，方便线上演示。 点击大屏右上角预览图标，预览成品大屏。 

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

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

单击右侧的复制按钮

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

 6.实验总结

6.1实验收获

1. 平台与蓝图基础认知
   
   ：系统掌握助睿 Max 蓝图编辑器的核心原理，理清数据源、SQL 请求、并行处理、触发器等关键概念，理解节点连线式零代码数据流的实现逻辑，明白页面初始化全局节点作为大屏数据加载触发器的运行机制。
2. 全流程数据接入实操
   
   ：熟练完成 MySQL 数据源新建与连接配置，能够自主编写查询 SQL 从 6 张业务统计表提取浏览器相关指标数据；掌握并行数据处理技巧，实现单条 SQL 结果拆分分发至多组件，通过 JS 格式化代码适配不同图表（柱状图、饼图、数字翻牌器、折线图）的数据接口字段规范。
3. 图表绑定与样式优化
   
   ：学会将蓝图处理后的输出数据对接各类可视化组件的导入接口；掌握折线图多系列配色调试方法，针对图例联动标记变色问题，手动逐个配置 6 类浏览器系列的折线、标记 RGB 颜色，统一全图表视觉效果，同时可对饼图内外半径等样式参数做美化调整。

6.2对平台的整体评价

1. 零代码蓝图设计易用高效
   
   ：依托节点拖拽连线实现数据流配置，无需后端开发即可完成多图表数据源分发，大幅降低数据大屏开发门槛，适配数据分析课程实训教学。
2. 全链路一体化功能完善
   
   ：平台集成数据源管理、SQL 编辑、数据预处理、可视化大屏制作、在线发布分享全功能，从数据接入到成果落地闭环完整，贴合教学实验场景。
3. 可视化调试便捷
   
   ：支持分步保存、实时预览大屏数据，配置错误可快速定位修改；组件样式自定义选项丰富，饼图、折线图等样式参数灵活可调，便于优化大屏展示效果。