一、实验背景
1. 实验目的
1. 基于助睿数智（Uniplore）平台完成浏览器日志数据ETL加工，清洗、聚合每日浏览器访问明细数据，生成周活跃、使用频率、时长统计等8张业务表。
2. 掌握数据大屏静态布局搭建，完成9个多类型图表（柱状图、饼图、指标卡、折线图）页面排版与样式美化。
3. 学习蓝图编辑器交互配置，实现MySQL数据源接入、并行数据分发、图表自动渲染数据库真实数据。
4. 排查数据链路报错、字段映射错误、页面脚本异常等可视化常见故障，形成完整排错思路。
2. 实验环境
- 平台全称：助睿数智（Uniplore）一站式数据科学实验平台
- 实验地址：https://lab.guilian.cn/
- 数据规模：1000用户，800万+条行为记录，约825MB
- 数据源：团队私有MySQL数据库
- 实验模块：
1. 数据加工（ETL）：对应官方手册topic/118
2. 大屏静态布局：对应官方手册topic/119
3. 大屏蓝图数据接入：对应官方手册topic/120
3. 整体处理流程
1. **数据加工阶段**：创建用户-日-浏览器-小时明细表 → 生成8张业务统计表 → 数据探查验证
2. **大屏布局阶段**：新建市场分析大屏 → 导入背景与素材 → 9个图表组件拖拽排版 → 组件导出至蓝图编辑器
3. **数据接入阶段**：创建数据库数据源 → 全局节点触发 → 6个SQL请求节点拉取数据 → 并行数据处理 → 图表绑定数据接口
4. **验证发布阶段**：预览调试 → 故障排查 → 发布生成分享链接
---
二、实验步骤
模块1：浏览器数据加工
步骤1：创建用户_日_浏览器_小时明细表
1. 打开项目"互联网用户行为日志"，新建转换流**"创建用户_日_浏览器_小时明细表"**
2. 拖拽**执行一个SQL脚本**组件，数据库连接选择"团队私有数据库"
3. 输入建表SQL：
```sql
CREATE TABLE IF NOT EXISTS `daily_browser_detail` (
`user_id` VARCHAR(50) NOT NULL COMMENT '用户ID',
`usage_date` DATE NOT NULL COMMENT '使用日期',
`browser_name` VARCHAR(50) NOT NULL COMMENT '浏览器名称',
`hour` TINYINT NOT NULL COMMENT '小时',
`total_duration_sec` INT NOT NULL COMMENT '总使用时长(秒)',
`active_count` INT NOT NULL COMMENT '活跃次数'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户_日_浏览器_小时明细表';
```
4. 点击"运行"执行转换流
步骤2：复制并修改转换流
1. 复制"互联网用户行为日志数据清洗抽取"转换流，重命名为**"输出用户日浏览器小时明细表"**
2. 修正**排序记录1**组件：排序字段改为`user_id`、`usage_date`、`process_name`、`hour`（与分组组件一致）
3. 添加**值映射**组件，连接分组1输出，完成浏览器名称映射：
| 进程名 | 目标值 |
|--------|--------|
| iexplore.exe | IE浏览器 |
| 360chrome.exe | 360极速 |
| 360se.exe | 360se |
| chrome.exe | Google |
| sogouexplorer.exe | 搜狗 |
| QQBrowser.exe | QQ浏览器 |
4. 修改**过滤记录**组件：仅保留上述6个浏览器进程，删除EXCEL.EXE等非浏览器进程
5. 修改分组组件：将聚合类型"个数"改为"统计不同值的数量(N)"
6. 添加**表输出**组件，目标表`daily_browser_detail`，字段映射：
| 表字段 | 流字段 |
|--------|--------|
| user_id | user_id |
| usage_date | usage_date |
| browser_name | process_name |
| hour | hour |
| total_duration_sec | total_duration_sec |
| active_count | active_count |
7. 勾选"裁剪表"，运行转换流
步骤3：创建全部目标数据表
1. 新建转换流**"创建浏览器大屏分析目标数据表"**
2. 拖拽执行一个SQL脚本组件，输入完整建表语句（包含7张表的DROP+CREATE）：
```sql
-- 1. 核心指标概览表
DROP TABLE IF EXISTS `browser_overview`;
CREATE TABLE `browser_overview` (
`metric_name` VARCHAR(50) NOT NULL COMMENT '指标名称',
`metric_value` DECIMAL(12,2) NOT NULL COMMENT '指标值'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='核心指标概览表';
-- 2. 各浏览器周活跃趋势表
DROP TABLE IF EXISTS browser_weekly_active;
CREATE TABLE `browser_weekly_active` (
`browser_name` VARCHAR(50) NOT NULL COMMENT '浏览器名称',
`week_range` VARCHAR(20) NOT NULL COMMENT '周日期范围',
`active_user_count` INT NOT NULL COMMENT '活跃用户数'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='各浏览器周活跃趋势表';
-- 3. 浏览器使用频率分布表
DROP TABLE IF EXISTS browser_frequency_stats;
CREATE TABLE `browser_frequency_stats` (
`browser_name` VARCHAR(50) NOT NULL COMMENT '浏览器名称',
`usage_level` VARCHAR(10) NOT NULL COMMENT '使用等级',
`user_count` INT NOT NULL COMMENT '用户数'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='浏览器使用频率分布表';
-- 4. 用户使用浏览器数量分布表
DROP TABLE IF EXISTS browser_multi_usage;
CREATE TABLE `browser_multi_usage` (
`browser_count` VARCHAR(10) NOT NULL COMMENT '使用浏览器数量',
`user_count` DECIMAL(5,2) NOT NULL COMMENT '用户数量'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户使用浏览器数量分布表';
-- 5. 浏览器工作日周末对比表
DROP TABLE IF EXISTS browser_weekday_weekend;
CREATE TABLE `browser_weekday_weekend` (
`browser_name` VARCHAR(50) NOT NULL COMMENT '浏览器名称',
`day_type` VARCHAR(10) NOT NULL COMMENT '工作日/周末',
`avg_duration_sec` INT NOT NULL COMMENT '人均使用时长(秒)',
`total_duration_hour` BIGINT NOT NULL COMMENT '总使用时长(小时)',
`user_count` INT NOT NULL COMMENT '用户数'
) COMMENT '浏览器工作日周末对比表';
-- 6. 用户画像统计表
DROP TABLE IF EXISTS `user_profile_stats`;
CREATE TABLE `user_profile_stats` (
`browser_name` VARCHAR(50) NOT NULL COMMENT '浏览器名称',
`gender` VARCHAR(10) COMMENT '性别',
`age_group` VARCHAR(10) COMMENT '年龄段',
`edu` VARCHAR(50) COMMENT '学历',
`job` VARCHAR(50) COMMENT '职业',
`income` VARCHAR(50) COMMENT '收入',
`city_type` VARCHAR(10) COMMENT '居住地类型',
`province` VARCHAR(50) COMMENT '省份',
`user_count` INT NOT NULL COMMENT '用户数'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户画像统计表';
```
3. 运行转换流完成所有表创建
步骤4：各浏览器周活跃趋势表数据抽取
1. 新建转换流**"各浏览器周活跃趋势表数据抽取"**
2. **表输入**：读取`daily_browser_detail`表
3. **字段选择**：修改`usage_date`字段类型为Date，格式`yyyy-MM-dd`
4. **值映射**：将所有日期映射为对应周区间（5/7-5/13、6/4-6/10、7/2-7/8、8/6-8/12），目标字段`week_range`
5. **排序记录**：按`browser_name`、`week_range`升序
6. **分组**：分组字段`browser_name`、`week_range`，聚合`user_id`为"统计不同值的数量"，输出`active_user_count`
7. **表输出**：写入`browser_weekly_active`，勾选裁剪表
8. 运行转换流
步骤5：各浏览器使用频率分布表数据抽取
1. 新建转换流**"使用频率分布数据抽取"**
2. **表输入**：读取`daily_browser_detail`
3. **排序记录**：按`user_id`、`browser_name`升序
4. **分组**：按用户+浏览器聚合`total_duration_sec`总和，输出`total_seconds`
5. **增加常量**：新增`hour_m_s=3600`
6. **计算器**：计算`total_hours = total_seconds / hour_m_s`，保留2位小数
7. **JavaScript代码**：实现时长分级：
```javascript
var total_hours = total_hours;
var usage_level = '';
if (total_hours < 3) {
usage_level = '轻度';
} else if (total_hours >= 3 && total_hours < 10) {
usage_level = '中度';
} else {
usage_level = '重度';
}
```
8. **排序记录**：按`browser_name`、`usage_level`升序
9. **分组**：按浏览器+使用等级统计用户数
10. **表输出**：写入`browser_frequency_stats`
11. 运行转换流
步骤6：各浏览器使用数量分布表数据抽取
1. 新建转换流**"浏览器使用数量分布数据抽取"**
2. **表输入**：读取`daily_browser_detail`
3. **排序记录**：按`user_id`升序
4. **分组**：按用户统计浏览器种类数量，输出`browser_cnt`
5. **JavaScript代码**：转换为"1种"、"2种"、"3种及以上"：
```javascript
var browser_cnt = browser_cnt;
var browser_count = '';
if (browser_cnt == 1) {
browser_count = '1种';
} else if (browser_cnt == 2) {
browser_count = '2种';
} else {
browser_count = '3种及以上';
}
```
6. **排序记录**：按`browser_count`升序
7. **分组**：按使用数量统计用户数
8. **表输出**：写入`browser_multi_usage`
9. 运行转换流
步骤7：各浏览器工作日周末对比表数据抽取
1. 新建转换流**"浏览器工作日周末对比数据抽取"**
2. **表输入**：读取`daily_browser_detail`
3. **JavaScript代码**：判断工作日/周末：
```javascript
var date = usage_date;
var dayOfWeek = date.getDay();
var day_type = "";
if (dayOfWeek >= 1 && dayOfWeek <= 5) {
day_type = "工作日";
} else {
day_type = "周末";
}
```
4. **排序记录**：按`browser_name`、`day_type`升序
5. **分组**：聚合平均时长、总时长、用户数
6. **增加常量**：`hour_m_s=3600`
7. **计算器**：总时长转换为小时
8. **字段选择**：删除冗余字段
9. **表输出**：写入`browser_weekday_weekend`
10. 运行转换流
步骤8：核心指标数据抽取
1. 新建转换流**"核心指标数据抽取"**
2. **表输入**：执行SQL计算4个核心指标：
```sql
SELECT
ROUND(SUM(total_duration_sec) / 3600, 2) AS total_hours,
ROUND(SUM(total_duration_sec) / 3600 / COUNT(DISTINCT user_id), 2) AS avg_hours,
ROUND(
(SELECT COUNT(DISTINCT user_id) FROM daily_browser_detail
WHERE usage_date BETWEEN '2012-08-06' AND '2012-08-12'
) * 100.0 / COUNT(DISTINCT user_id), 2
) AS active_ratio,
ROUND(
(SELECT COUNT(*) FROM (
SELECT user_id FROM daily_browser_detail
WHERE usage_date BETWEEN '2012-05-07' AND '2012-07-08'
GROUP BY user_id
HAVING SUM(total_duration_sec) / 3600 > 30
) t) * 100.0 / COUNT(DISTINCT user_id), 2
) AS heavy_ratio
FROM daily_browser_detail
```
3. **行转列**：将4个指标转为键值对格式
4. **值映射**：将指标名映射为中文
5. **表输出**：写入`browser_overview`
6. 运行转换流
步骤9：用户画像表加工
1. 从公共空间导出`demographic.csv`到项目根目录
2. 新建转换流**"用户画像表加工"**
3. **CSV文件输入**：读取`demographic.csv`，编码UTF-8
4. **增加常量**：`year=2012`
5. **计算器**：计算年龄`age = year - BIRTHDAY`
6. **JavaScript代码**：年龄分段：
```javascript
var age_group = '';
if (age < 18) {
age_group = '<18';
} else if (age <= 25) {
age_group = '18-25';
} else if (age <= 35) {
age_group = '26-35';
} else {
age_group = '>35';
}
```
7. **表输入**：读取`daily_browser_detail`
8. 两个数据流分别按`user_id`和`USERID`排序
9. **记录集连接**：左连接两个表，关联字段`user_id`和`USERID`
10. **排序记录**：按所有分组字段排序
11. **分组**：按浏览器+所有用户属性统计用户数
12. **表输出**：写入`user_profile_stats`
13. 运行转换流
模块2：大屏静态布局制作
步骤1：新建市场分析大屏
1. 进入助睿数据大屏平台，点击"+新建"→"新建大屏"
2. 选择空白模板，命名为"市场分析"
3. 进入编辑界面
步骤2：大屏基础样式设置
1. **背景设置**：右侧页面设置→背景图片，粘贴链接：
`https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/bg-2.png`
2. **标题设置**：
- 拖拽"单张图片"组件，重命名"标题banner"
- 图片链接：`https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/banner01.png`
- 基础属性：宽度1920，高度114，位置x=0,y=0
3. **导航设置**：
- 拖拽"单张图片"作为导航背景，链接：`https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/comprehensive-data/navigation-bg-1.png`
- 添加"通用标题"组件，文本"市场分析"
- 复制导航组件，修改为"用户画像"，调整位置
4. 将顶部所有组件成组，命名"顶部"
步骤3：9个图表组件布局制作
按照官方手册布局，依次制作以下9个图表区域：
| 图表名称 | 组件类型 | 标题 | 背景图链接 |
|----------|----------|------|------------|
| 浏览器用户数 | 基础柱状图 | 浏览器用户数 | 短标题背景 |
| 浏览器使用时长 | 多维度饼图 | 浏览器使用时长 | 短标题背景 |
| 浏览器人均使用时长 | 基础柱状图 | 浏览器人均使用时长 | 短标题背景 |
| 数据概览 | 4个数据翻牌器 | 数据概览 | 长标题背景 |
| 工作日vs周末使用时长 | 分组柱状图 | 工作日vs周末使用时长 | 长标题背景 |
| 24小时活跃用户数分布 | 区域图 | 24小时活跃用户数分布 | 长标题背景 |
| 浏览器周活跃用户数变化 | 折线图 | 浏览器周活跃用户数变化 | 短标题背景 |
| 使用频率分布 | 垂直基本柱图 | 使用频率分布 | 短标题背景 |
| 浏览器使用数量分布 | 基本饼图 | 浏览器使用数量分布 | 短标题背景 |
每个图表区域包含：
1. 区域背景：链接`https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/area-bg.png`
2. 标题背景：短标题`https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/title-bg-short.png`，长标题`https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/title-bg-long.png`
3. 通用标题组件
4. 对应图表组件
步骤4：组件导出到蓝图编辑器
1. 右键画布中每个图表和指标卡组件
2. 选择"导出到蓝图编辑器"
3. 全部导出完成后，点击顶部"蓝图编辑器"切换页面
模块3：大屏蓝图数据接入
步骤1：创建团队私有数据库数据源
1. 大屏顶部切换到"我的数据"
2. 点击"+新建"→"新建数据源"
3. 数据库类型MySQL，填入团队私有数据库地址、端口、账号、密码
4. 点击"立即添加"，测试连接成功
步骤2：为市场格局3个图表配置数据
1. 拖拽**全局节点**到画布
2. 拖拽**SQL请求**节点，连接全局节点"页面初始化完成"→"执行SQL"
3. SQL请求配置：
- 数据源：团队私有数据库
- SQL代码：
```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
```
4. 拖拽**并行数据处理**节点，添加3个处理方法：
- 各浏览器用户数：
```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. 连接SQL请求"执行成功"到3个并行处理方法
6. 添加3个图表节点到画布，连接并行处理输出到对应图表"导入数据接口"
7. 返回画布，每个图表：
- 数据源切换为对应并行处理接口
- 字段映射：柱状图x→x,y→y；饼图name→name,value→value
步骤3：为指标区域配置数据
1. 拖拽**SQL请求**节点，连接全局节点
2. SQL代码：
```javascript
let sql = `select metric_name, metric_value from labs.browser_overview `
return sql
```
3. 拖拽**并行数据处理**节点，添加4个处理方法：
- 总使用时长：
```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 }];
```
4. 连接4个并行处理输出到对应数据翻牌器
步骤4：为其他图表配置数据
按照相同步骤，依次配置剩余5个图表：
| 图表名称 | SQL代码 |
|----------|---------|
| 工作日vs周末使用时长 | `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` |
| 24小时活跃用户数分布 | `select hour as x, active_user_count as y, browser_name as s from labs.browser_hourly order by browser_name, hour` |
| 浏览器周活跃用户数变化 | `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` |
| 使用频率分布 | `select browser_name as s, user_count as y, usage_level as x from labs.browser_frequency_stats order by browser_name` |
| 浏览器使用数量分布 | `select browser_count as name, user_count as value from labs.browser_multi_usage order by browser_count` |
步骤5：预览与发布
1. 点击画布右上角"保存"
2. 点击"预览"按钮，打开新页面查看效果
3. 确认所有图表正常显示数据，无控制台报错
4. 点击"发布"按钮，生成分享链接
画布链接：http://47.109.66.142:30887/#/dataScreen/release?shareId=1235cbd8eb6f4f9caf63aa857500f61e
三、实验结果
1. **ETL加工结果**：成功生成8张业务数据表，所有转换流执行无报错，数据探查验证各表数据完整准确。
2. **静态布局结果**：完成9个图表组件的规范排版，页面分区清晰，样式符合官方要求。
3. **数据接入结果**：
- 数据库数据源连接正常，6个SQL请求均可成功查询数据
- 并行数据处理正确拆分数据，输出符合图表要求的格式
- 所有图表成功加载数据库真实数据，无空白或静态示例数据
4. **最终成果**：生成可分享的浏览器市场分析大屏链接：
http://47.109.66.142:30887/#/dataScreen/release?shareId=1235cbd8eb6f4f9caf63aa857500f61e`
---
四、问题与解决
问题1：转换流运行报错"Column 'week_range' cannot be null"
1. 现象：周活跃趋势表转换流表输出失败
2. 原因：值映射组件未覆盖所有日期，部分日期未匹配到周区间
3. 解决：补全4周所有28天的日期与周区间映射关系
问题2：图表显示空白，无任何数据
1. 现象：切换数据接口后图表无内容
2. 原因：字段映射错误，将SQL原始字段y1/y3直接映射到图表y字段
3. 解决：并行处理已将y1/y3重命名为y，图表统一映射x→x,y→y
问题3：预览报错"Request error [SQL 请求] undefined"
1. 现象：控制台红色报错，图表无数据
2. 原因：蓝图存在两条独立SQL执行链，逻辑冲突；图表仍为静态数据模式
3. 解决：删除冗余节点，保留单条执行链；所有图表切换为数据接口模式
问题4：控制台报错"Uncaught SyntaxError: Unexpected token '<'"
1. 现象：页面脚本解析失败
2. 原因：浏览器缓存资源异常
3. 解决：Ctrl+Shift+Delete清除全部缓存，重新预览
问题5：饼图标签显示异常
1. 现象：饼图标签重叠或不显示
2. 原因：饼图内外半径设置不当
3. 解决：调整数据系列内外半径，设置标签显示方式
---
五、实验总结
1. 实验收获
1. 完整掌握助睿平台从数据ETL加工到可视化大屏制作的全流程操作
2. 熟练使用蓝图编辑器实现数据请求、并行处理、图表绑定的完整数据流
3. 积累了丰富的可视化故障排查经验，能够快速定位和解决常见问题
4. 理解了商业数据分析大屏的设计思路和实现方法
2. 平台评价
助睿数智平台提供了一站式零代码数据处理与可视化解决方案，大大降低了数据分析的门槛。蓝图编辑器的可视化编程方式非常直观，适合初学者学习。但平台内网访问偶尔会出现资源加载异常的情况，操作时需要注意及时保存。
3. 改进建议
1. 增加更多的图表样式和交互功能
2. 优化蓝图编辑器的节点连线体验
3. 提供更详细的错误提示信息，方便用户排查问题
