1. 实验目的

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

• 理解蓝图编辑器的基本构成（数据源、触发器、动作）；
• 掌握数据库数据源连接的创建方法；
• 学会为图表组件编写SQL查询语句；
• 掌握将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内置的可视化编程工具，专用于配置数据流与交互逻辑。它通过“节点-连线”的直观方式，帮助用户灵活管理可视化应用中多组件间的交互关系。

核心优势：

1. 蓝图编辑器可以保证交互和数据的实时性和同步性。
2. 蓝图编辑器支持数据请求合并和数据分发的功能。
3. 蓝图编辑器可模块化拆分，专注单个的交互链路，不需要考虑代码的整理和规范，只需要专注于业务规则和交互需求即可。

4.2 核心概念

概念	详细说明
数据源	定义数据来源，即数据库连接配置
查询	定义数据获取规则，通常为SQL语句
触发器	触发数据加载的事件（如页面加载、组件点击、定时器等）
动作	触发器触发后的响应操作（如执行查询、刷新组件）
变量	用于在不同查询间传递参数（如筛选条件）

5. 实验步骤

5.1 创建数据库数据源

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

5.2 组件导出至蓝图编辑器

只有将组件导出至蓝图编辑器，方可为其配置交互逻辑。
打开上一实验保存的“市场分析”数据大屏项目。

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

依照此法，将所有需接入数据的组件逐一导出。
导出完毕后，点击顶部“蓝图编辑器”图标进入蓝图视图，在导入节点列表中可查看已导出的组件节点。

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查询结果分发至多张图表。
添加并行数据处理组件，点击“+”新增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请求节点

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 字段。
   

代码逻辑：

• 总使用时长
  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 添加图表节点

1. 拖入4个数字翻牌器节点。
2. 将并行输出的四个接口对应连接至翻牌器的“导入数据接口”。
   
3. 保存并预览。

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

1. 拖入“工作日vs周末使用时长”图表节点。
2. 连接SQL节点的成功输出至图表的“导入数据接口”。
   
3. 保存并预览。

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

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

2. 建立连线。
   

3. 保存并预览。

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

• 选中图表，进入数据系列，针对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 添加图表节点

1. 拖入“活跃用户周变化”图表节点并建立连线。
   
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 添加图表节点

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

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

5.10.2 添加图表节点

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

5.11 预览与发布

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

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

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

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

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

六、实验结果

6.1 大屏数据接入落地成果

本实验基于前期已落地至私有MySQL库的6张业务统计表，依托助睿Max蓝图编辑器完成全组件数据源对接落地，市场指标卡、多类柱状图、饼图、时段折线图、堆叠图等全部大屏组件成功绑定真实业务数据，静态大屏升级为可动态加载数据的在线可视化项目。

1. 数据源层面：已完成团队私有MySQL数据库数据源创建与连通校验，数据库连接稳定无超时、鉴权失败问题，6张目标数据表均可被SQL请求节点正常检索，字段识别完整、无表名/字段名匹配报错；
2. 蓝图链路层面：全大屏分区完成蓝图节点搭建，全局初始化触发器、SQL查询节点、并行数据处理节点、图表组件节点连线配置全部生效，页面加载时自动执行SQL查询、数据格式化、组件数据回填整套逻辑；
3. 图表渲染层面：指标翻牌器、24小时时段折线、周活跃趋势、工作日/周末分组对比、使用频率堆叠柱状、多浏览器占比饼图等所有图表均可实时渲染统计数据，字段映射无误，数值与源库统计结果保持一致；
4. 发布落地层面：大屏项目完成线上发布，生成可公开访问分享链接，通过外链可在任意浏览器打开完整可视化页面，数据随源表变更动态刷新，满足业务在线查看需求。

6.2 可视化数据分析落地效果

依托已完成数据联动的可视化大屏，沿用原有市场格局、用户使用行为、时段偏好、竞品竞争四大分析维度，实现数据即看即析，告别静态假数据：

• 市场格局模块：通过指标卡+饼图+柱状图直观查看各浏览器用户体量、总使用时长、人均使用时长，快速定位头部竞品与小众产品市场份额；
• 时段偏好模块：依托24小时活跃折线、工作日/周末分组柱状图，量化用户全天候使用规律、工作日与休息日使用差异；
• 周期趋势模块：周活跃折线直观呈现各浏览器周度用户波动，捕捉产品用户增长/流失节点；
• 用户分层模块：使用频率堆叠柱状、多浏览器装机饼图完成轻/中/重度用户拆分、用户多浏览器安装行为统计，支撑精细化运营分析。

七、实验总结

7.1 实验收获

（1）蓝图可视化编程落地能力

吃透助睿Max蓝图编辑器底层逻辑，熟练掌握数据源、触发器、查询、动作、变量五大核心概念，理解“节点+连线”无代码编程思想，可独立完成从数据库连接创建、SQL查询配置、数据加工到组件绑定的全链路蓝图搭建，明白全局页面初始化触发器的业务使用场景。

（2）大屏SQL数据查询与字段映射能力

熟练根据不同图表的数据结构编写适配SQL查询语句，能够结合单表字段完成维度筛选、排序取值；掌握JS脚本对原始查询结果二次格式化，依托map()、find()等语法实现字段拆分、筛选匹配，适配指标卡、饼图、折线图、柱状图等差异化数据格式需求，建立图表结构反向设计SQL与数据处理脚本的开发思路。

7.2 实验故障与解决方案

饼图占比展示失真，内外圈排版拥挤

• 故障现象：浏览器使用数量分布饼图内容挤压、标签重叠，占比可读性差；
• 故障原因：饼图默认内外半径参数不合理，未适配当前数据量级；
• 处理方案：在图表数据系列中微调饼图内半径、外半径比例，优化布局后饼图展示规整。