当协作工具变成数据黑洞：企业如何依靠私有化部署夺回数据安全与自主可控
2026/6/9 20:56:54
浏览器市场分析-大屏数据接入
1 实验目的
本实验基于《浏览器市场分析-数据大屏静态布局制作》完成的大屏布局，使用助睿Max的蓝图编辑器，将之前实验加工好的数据表接入到大屏的各个图表组件中，使图表能够动态展示真实数据。
通过本实验，学生应掌握：
2 实验环境
实验平台：助睿在线实验平台
平台说明：本次实验使用助睿数智（Uniplore）一站式数据科学平台，覆盖数据接入、ETL处理、机器学习建模到可视化展示的全链路零代码功能。
可视化工具：助睿Max（数据大屏）
数据来源：团队私有数据库（MySQL）
3 实验数据
本实验使用上一实验加工完成的大屏一目标表，共6张表：
4 蓝图编辑器概述
4.1 什么是蓝图编辑器？
蓝图编辑器是助睿Max中用于配置数据流和交互逻辑的可视化编程工具。它采用“节点-连线”的方式，帮助您自由管理可视化应用中多个组件之间的交互关系。
蓝图编辑器的优势：
保证交互和数据的实时性和同步性
支持数据请求合并和数据分发功能
可模块化拆分，专注单个交互链路
无需关注代码规范，只需专注于业务规则和交互需求
4.2 核心概念
5 实验步骤
5.1 创建数据库数据源
首先，创建连接团队私有数据库的数据源。
进入数据大屏平台后，点击【我的数据】。
点击【+新建】→【新建数据源】。
输入团队私有数据库的连接信息，点击【立即添加】。
切换tab选项再切回“我的数据”，即可看到新添加的团队私有数据库。
5.2 组件导出到蓝图编辑器
只有当组件导入到蓝图编辑器后，才可以为该组件配置交互。
打开上一实验制作的“市场分析”数据大屏。
在画布编辑器内，右键单击左侧图层栏或中间画布区的组件，选择【导出到蓝图编辑器】，即可将对应组件导出到蓝图编辑器中。
同样的，依次把所有需要接入数据的组件导出到蓝图编辑器中。
导出成功后，单击【蓝图编辑器】图标切换到蓝图编辑器页面，可在导入节点列表中查看对应的节点。列表内所有节点都可供后续配置交互使用。
5.3 添加全局节点
在蓝图编辑器里，从【逻辑节点】面板中，将需要使用的逻辑节点拖入中间画布中。逻辑节点包括全局节点、数据处理类节点、流程控制类节点以及输入设备类节点。
首先添加全局节点，画布中自动添加1个全局节点。全局节点可用于在大屏打开时自动执行后续操作（如加载数据）。
5.4 为市场格局3个图表配置数据
市场格局区域包含3个图表：浏览器用户数柱状图、浏览器使用时长占比饼图、人均使用时长柱状图。这3个图表数据均来自 browser_coverage 表，可以通过一个SQL请求获取所有数据，然后分发到三个图表。
5.4.1 添加SQL请求节点
从逻辑节点面板中，拖拽【SQL请求】节点到画布，并将全局节点的“页面初始化完成”输出接口连接到SQL请求节点的“执行SQL”输入接口。
点击SQL请求节点，在配置面板中：
数据源：选择“团队私有数据库”
SQL类型：选择“查询”
处理方法代码框中输入以下SQL：
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个处理方法，分别命名为：
各浏览器用户数
各浏览器总使用时长
各浏览器人均使用时长
步骤3：连接SQL请求节点到处理方法
将SQL请求节点的“执行成功”输出接口分别连接到3个处理方法的输入接口。
步骤4：编写处理方法代码
根据图表的数据接口映射格式处理查询结果。
在画布编辑器界面选择图表，可在【数据】tab中查看数据接口映射格式：
各图表需要的字段：
各浏览器用户数处理方法代码：
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 添加图表节点
从左侧导入节点列表中，将以下3个图表节点拖拽到画布中：
浏览器用户数柱状图
浏览器使用时长占比
人均使用时长柱状图
将并行数据处理节点的3个处理方法的输出接口分别连接到对应图表的“导入数据接口”。
5.4.4 保存并预览
点击【保存】，预览数据是否符合预期。
常见问题处理：如果预览时出现图表数据未正确显示，可检查图表的数据请求方式设置。在画布编辑器中选择图表，将数据请求方式设置为“Defer”（请求完成后再渲染，避免数据未到先渲染）。
饼图样式优化：在画布编辑器中选择浏览器使用时长占比饼图，在数据系列中调整每个系列的内外半径，使饼图更协调。
5.5 为指标区域图表配置数据
指标区域包含4个数字翻牌器：总使用时长、人均使用时长、活跃用户占比、重度用户占比。数据来自 browser_overview 表。
5.5.1 添加SQL请求节点
拖拽【SQL请求】节点到画布，连接到全局节点。配置如下：
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 并行数据处理
添加并行数据处理节点，添加4个处理方法：总使用时长、人均使用时长、活跃用户占比、重度用户占比。
处理方法代码：
总使用时长：
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 添加图表节点
从导入节点列表中拖拽4个数字翻牌器节点到画布，将处理方法的输出接口连接到对应图表的“导入数据接口”。
5.5.4 保存并预览
点击【保存】，预览数据是否符合预期。
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.6.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 添加图表节点
从导入节点列表中拖拽“24小时活跃用户分布”节点到画布，将SQL请求节点的“执行成功”输出接口连接到图表的“导入数据接口”。
5.7.3 设置图表颜色
图例颜色跟随折线上的标签点颜色变化。为使折线、标签点、图例颜色一致，需要在画布编辑器中设置颜色。
该折线图有6个图例（6个浏览器），需要设置6个系列的折线和标记颜色。
5.7.4 保存并预览
点击【保存】，预览数据是否符合预期。
5.8 为周活跃用户变化图表配置数据
5.8.1 添加SQL请求节点
拖拽【SQL请求】节点到画布，连接到全局节点。配置如下：
let sql = `
select week_range as x,
active_user_count as y,
browser_name as s
from labs.browser_weekly_active
order by browser_name, week_range
`
return sql
5.8.2 添加图表节点
从导入节点列表中拖拽“浏览器周活跃用户数变化”节点到画布，将SQL请求节点的“执行成功”输出接口连接到图表的“导入数据接口”。
5.8.3 设置图表颜色
同样需要设置6个浏览器的颜色，保持与24小时活跃分布图表一致。
5.8.4 保存并预览
点击【保存】，预览数据是否符合预期。
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.9.3 保存并预览
点击【保存】，预览数据是否符合预期。
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.10.3 保存并预览
点击【保存】，预览数据是否符合预期。
5.11 完整的蓝图编辑器连线图
所有图表数据接入配置完成后，蓝图编辑器中的完整连线图如下：
5.12 预览并发布
组件样式和数据都配置完成后，可以预览并发布可视化应用，实现在线播放和演示。
步骤1：预览
单击大屏页面右上角的【预览】图标，预览可视化应用。
步骤2：发布
预览确认无误后，单击大屏页面右上角的【发布】图标。
在弹出的发布对话框中单击【发布分享】。
步骤3：获取分享链接
单击分享链接右侧的【复制】按钮，即可复制分享链接。
步骤4：在线观看
打开浏览器，将复制的链接粘贴到地址栏中，即可在线观看大屏。
6 蓝图节点清单
7 常见问题与解决
问题1：图表预览时显示“暂无数据”
原因：数据请求方式设置不正确，图表在数据返回前已渲染。
解决方法：在画布编辑器中选择图表，将数据请求方式设置为“Defer”（请求完成后再渲染）。
问题2：饼图显示不协调
原因：饼图内外半径设置不当。
解决方法：在画布编辑器中选择饼图，在数据系列中调整每个系列的内外半径。
问题3：折线图颜色与图例不一致
原因：折线和标记点颜色未单独设置。
解决方法：在画布编辑器中选择图表，点开数据系列，为每个系列分别设置折线和标记颜色。
问题4：SQL查询结果为空
原因：数据库连接配置错误或SQL语法有误。
解决方法：
检查数据源配置是否正确
在SQL请求节点的处理方法中先打印SQL语句，在数据库中测试
检查表名是否包含正确的数据库前缀（如 labs.）
8 实验总结
8.1 技术能力提升
蓝图编辑器理解：掌握了蓝图编辑器的核心概念（数据源、触发器、动作、变量）；
SQL请求节点配置：学会了为不同图表编写SQL查询语句，从数据库获取数据；
并行数据处理：掌握了使用并行数据处理节点将同一查询结果分发到多个图表的方法；
图表数据绑定：理解了各图表组件的数据接口映射格式，能够正确绑定数据。
8.2 关键操作回顾
8.3 平台优势总结
8.4 后续工作
本实验完成了市场分析大屏的数据接入。下一步将：
制作用户画像分析大屏
配置大屏间的跳转交互
添加浏览器筛选器，支持查看全部或单个浏览器
配置定时刷新，实现数据实时更新
附录：
各图表颜色配置色值见5.7.3、5.8.3节
SQL查询语句见各子章节