项目简介：本次我基于助睿Uniplore零代码数据平台，完整完成浏览器用户行为数据分析全流程实验，包含数据加工ETL、大屏静态布局制作、蓝图数据动态接入发布三大核心阶段。依托1000名用户、800万+条行为记录、825MB原始数据，完成多维度指标统计表加工、市场分析大屏可视化搭建，最终实现可在线预览的业务数据大屏。

一、实验目的

（一）数据加工实验目的

我基于“用户-日-浏览器-小时”明细表，完成数据大屏所需全部统计表的ETL加工处理，核心加工统计维度包含：浏览器市场格局统计、浏览器周活跃趋势统计、浏览器使用频率分布统计、用户浏览器使用数量分布统计、浏览器工作日与周末使用对比统计、用户多维度画像统计（性别、年龄、学历、职业、收入、居住地类型、省份分布）。

通过本阶段实验，我掌握了大数据预处理、多维度聚合统计、多表关联分析的零代码实操方法，理解大屏预聚合数据的核心业务价值。

（二）大屏静态布局实验目的

我基于上一实验加工完成的聚合统计表，使用助睿Max数据大屏制作浏览器市场行为分析大屏。熟练掌握业务驱动的大屏布局设计、图表选型、页面美化、组件排版方法，能够独立完成专业化数据大屏静态页面搭建。

（三）大屏数据接入实验目的

我基于已完成的大屏静态布局，通过助睿Max蓝图编辑器，完成数据库数据源配置、SQL数据查询、数据处理、组件数据绑定，实现静态大屏转为动态真实数据大屏，掌握可视化平台数据流、触发器、交互逻辑的核心原理与实操。

二、实验环境

本次实验全程依托助睿在线实验平台与Uniplore助睿数智一站式大数据智能服务平台完成，平台支持零代码全链路数据处理与可视化开发，适配教学与企业实战场景。

  • 数据处理工具：助睿ETL数据集成平台（200+组件，支持流批一体数据处理）
  • 建模工具：助睿AI人工智能平台
  • 可视化工具：助睿Max数据大屏可视化平台、蓝图编辑器
  • 数据库环境：团队私有MySQL数据库
  • 数据规模：1000名用户、800万+条行为记录、总数据量约825MB

三、实验数据

本次实验数据来源于上一实验《浏览器用户行为分析与流失预测-数据加工》产出聚合数据，以及原始用户属性表，所有数据为2012年浏览器用户真实行为数据。

（一）基础数据源

  • 行为明细表：daily_browser_detail（用户-日-浏览器-小时粒度明细，本实验核心基础表）
  • 用户属性表：demographic.csv（含用户性别、年龄、学历、职业、收入、居住地、省份等画像数据）

（二）上期已产出数据表

  • browser_coverage：浏览器市场覆盖率统计表
  • browser_hourly：浏览器时段活跃统计表

（三）本期加工目标数据表

我通过ETL加工，全新产出6张核心业务数据表，支撑大屏全部可视化指标：

  • browser_overview：大屏核心指标概览表
  • browser_weekly_active：浏览器周活跃趋势统计表
  • browser_frequency_stats：浏览器轻/中/重度使用频率分布表
  • browser_multi_usage：用户浏览器使用数量分布表
  • browser_weekday_weekend：浏览器工作日/周末使用对比表
  • user_profile_stats：用户全维度画像统计表

四、整体分析框架

（一）核心业务问题（大屏设计核心依据）

我在设计大屏与加工数据前，先明确业务分析目标，所有数据加工、图表展示均围绕以下业务问题展开，杜绝无效数据统计：

业务问题

业务价值

哪个浏览器用户最多？哪个浏览器使用时长最长？

明确市场头部产品，判断各浏览器市场地位

用户活跃度整体增长还是下降？

判断产品生命周期，及时发现衰退风险

用户全天什么时段最活跃？

优化产品推送、运营触达的最佳时机

用户属于重度使用还是轻度使用？

区分核心用户与边缘用户，制定差异化运营策略

用户同时使用几款浏览器？

判断用户忠诚度、竞品替代风险

工作日与周末使用习惯有何差异？

区分办公、娱乐使用场景，优化产品功能设计

核心用户画像特征是什么？（性别/年龄/职业/收入/地域）

精准定位目标用户，指导产品迭代、市场投放、营销策划

（二）分析维度与核心指标

（1）浏览器市场行为分析维度

分析维度

对应业务问题

核心指标

市场格局

哪个浏览器用户最多、使用最久

用户数、使用时长占比、人均使用时长

周活跃趋势

用户活跃度涨跌变化

每周活跃用户数

时段偏好

用户活跃时间段分布

24小时各时段活跃用户数

使用频率

用户轻重度使用分层

轻/中/重度用户占比、用户数

浏览器使用数量

用户多浏览器使用习惯

1种/2种/3种及以上浏览器使用用户占比

工作日vs周末

场景化使用行为差异

工作日、周末人均使用时长、总使用时长、用户数

（2）用户画像分析维度

我从七大用户属性维度完成画像统计：性别、年龄、学历、职业、收入、居住地类型、省份分布，核心指标为各维度下不同分层的用户数与占比。

（3）大屏设计原则

我在搭建大屏时，严格遵循可视化设计规范，保证大屏逻辑清晰、美观专业：

  1. 叙事逻辑：自上而下、先整体后局部、先趋势后细节
  2. 重点突出：顶部放置核心指标卡，直观展示全局数据
  3. 图表适配：趋势用折线图、对比用柱状图、分布用饼图/环形图
  4. 色彩统一：6款浏览器固定专属配色，便于区分识别
  5. 交互友好：支持浏览器筛选、数据联动、实时刷新

五、全流程实验实操步骤

（一）基础明细表加工：用户-日-浏览器-小时明细表

该表是所有后续统计分析的基础，我通过复刻、优化上期转换流完成搭建：

  • 新建建表SQL流：创建转换流并添加「执行SQL脚本」组件，在团队私有数据库执行建表语句，生成 daily_browser_detail 明细表，定义用户ID、使用日期、浏览器名称、小时、使用时长、活跃次数字段。

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='用户_日_浏览器_小时明细表';

 

 

 

  • 复制优化旧转换流：复制上期数据清洗转换流，重命名为「输出用户日浏览器小时明细表」，修正排序字段，保证排序与分组字段完全一致（user_id、usage_date、process_name、hour），彻底解决数据重复问题。

 

 

 

 

  • 浏览器名称映射：新增值映射组件，将进程exe文件映射为中文浏览器名称：iexplore.exe=IE浏览器、360chrome.exe=360极速、360se.exe=360se、chrome.exe=Google、sogouexplorer.exe=搜狗、QQBrowser.exe=QQ浏览器。

进程名

说明

iexplore.exe

IE浏览器

360chrome.exe

360极速

360se.exe

360se

chrome.exe

Google

sogouexplorer.exe

搜狗

QQBrowser.exe

QQ浏览器

 

  • 数据清洗过滤：剔除EXCEL.EXE、WINWORD.EXE、AlilM.exe等非浏览器无效进程，修改分组聚合规则，将计数改为「统计不同值的数量」，保证数据精准。

 

 

  • 数据入库落地：添加表输出组件，绑定团队私有数据库、目标明细表，开启裁剪表、字段映射，运行转换流生成完整明细数据。

 

 

 

（二）批量创建所有目标业务数据表

我新建专属转换流，通过 DROP + CREATE 批量执行SQL，一次性创建全部6张目标统计表，规避重复建表报错，统一规范数据表结构，包含字段注释、字符集、引擎属性，完成大屏所有数据源表初始化。

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='用户画像统计表';

 

 

 

（三）各维度统计表ETL精细化加工

（1）浏览器周活跃趋势表（browser_weekly_active）

实验目标：统计4个周期内各浏览器每周活跃用户数，分析活跃度趋势。

实操流程：读取明细数据→字段标准化日期格式→值映射匹配5/7-5/13、6/4-6/10、7/2-7/8、8/6-8/12四周区间→按浏览器+周区间排序、分组→用户ID去重计数→数据入库。

 

 

 

 

 

 

 

 

 

（2）浏览器使用频率分布表（browser_frequency_stats）

分层规则：轻度用户（<3h/周）、中度用户（3-10h/周）、重度用户（>10h/周）

实操流程：按用户+浏览器分组汇总使用秒数→新增常量3600→计算器换算小时→JS代码自动划分使用等级→按浏览器+使用等级分组统计用户数→入库。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

（3）用户浏览器使用数量分布表（browser_multi_usage）

实验目标：统计用户使用1种、2种、3种及以上浏览器的人数占比。

实操流程：用户维度分组统计浏览器种类→JS划分数量等级→按等级分组统计用户总量→生成饼图数据源入库。

 

 

 

 

 

 

 

 

 

 

 

（4）工作日周末对比表（browser_weekday_weekend）

实验目标：对比不同浏览器工作、娱乐场景的使用差异。

实操流程：JS代码获取日期星期，区分工作日（周一至周五）、周末（周六周日）→按浏览器+日期类型分组，统计人均时长、总时长、用户数→秒转小时优化数据可读性→剔除冗余字段→入库。

 

 

 

 

 

 

 

 

 

 

 

（5）大屏核心指标概览表（browser_overview）

实验目标：生成大屏顶部4大核心指标：总使用时长、人均使用时长、活跃用户占比、重度用户占比。

实操流程：单SQL聚合全局指标→行转列将单行数据转为键值对结构→值映射转为中文指标名称→适配指标卡组件入库。

 

 

 

 

 

 

 

（6）用户画像统计表（user_profile_stats）

本步骤为核心多表关联实操，整合行为数据与用户属性数据。

实操流程：导入公共资源demographic.csv用户属性表→通过2012年份常量+计算器计算用户年龄→JS划分四段年龄（<18、18-25、26-35、>35）→明细表、属性表分别按用户ID排序→记录集左连接关联数据→多维度分组（浏览器+七大用户属性）→去重统计用户数→最终入库生成完整画像数据。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

（四）数据大屏静态布局完整搭建

我新建1920*1080空白大屏，命名「市场分析」，依托平台OSS素材完成全页面美化与组件排版，所有模块统一采用「背景图+标题背景+文字标题+图表」的标准化布局，组件成组管理，整洁易维护。

 

 

 

 

（1）全局样式配置

  • 页面背景：配置全局大屏背景图
  • 顶部Banner：添加官方标题素材图，作为大屏主标题
  • 导航组件：制作「市场分析」「用户画像」双导航按钮，区分选中/未选中样式，支持大屏跳转
  • 顶部所有组件统一成组，命名为「顶部导航」

 

 

（2）核心模块布局搭建

  1. 数据概览指标区：使用长标题背景，搭建4组「图标+数据翻牌器」组件，分别对应总使用时长、人均使用时长、活跃用户占比、重度用户占比，微调字体、配色、间距，保证视觉统一。
  2. 市场格局模块：短标题布局，搭建三大核心图表：浏览器用户数柱状图、浏览器使用时长占比饼图、人均使用时长柱状图，自定义6款浏览器专属配色，隐藏饼图外圈、展示类目标签。
  3. 用户行为趋势模块：依次完成工作日vs周末分组柱状图、24小时活跃分布区域图、周活跃趋势折线图布局与样式美化。
  4. 使用习惯与竞争模块：搭建使用频率堆叠柱状图、用户浏览器使用数量分布饼图，统一调整图表边距、图例、配色。

 

 

 

 

（五）蓝图编辑器动态数据接入（核心实操）

静态布局完成后，我通过蓝图编辑器实现数据库数据源对接、SQL查询、数据处理、组件绑定全流程，让大屏展示真实业务数据。

（1）前置准备工作

  1. 新建团队私有数据库数据源，完成平台数据库连接配置；
  2. 将大屏所有图表、指标卡组件全部导出至蓝图编辑器，生成可配置节点；
  3. 添加全局触发器节点，设置页面初始化自动加载数据。

 

 

 

（2）通用配置逻辑

我采用「单SQL查询+并行数据处理」的高效方案，一份数据源拆分多分支，同时供给多个组件，减少重复查库，提升大屏加载性能。根据不同图表格式，编写JS映射规则，适配柱状图、饼图、折线图、指标卡的数据结构。

（3）分模块数据绑定实操

  • 市场格局三图表数据接入：编写统一SQL查询browser_coverage表，通过并行处理拆分用户数、使用时长、人均时长三组数据，分别绑定对应柱状图、饼图组件。

Python
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 cs_group_8.browser_coverage
order by browser_name`

return sql

 

 

Plain Text
return data.map(item => ({
    x: item.x,
    y: item.y1,
    s: '用户数'
}));

 

Plain Text
return data.map(item => ({
    name: item.x,
    value: item.y2
}));

 

Plain Text
return data.map(item => ({
    x: item.x,
    y: item.y3,
    s: '人均时长(小时)'
}));

 

  • 四大指标卡数据接入：查询browser_overview指标键值表，通过find匹配对应指标名称，拆分4组数值，绑定数据翻牌器，实现核心指标动态展示。

Plain Text
let sql = `select metric_name, metric_value from cs_group_8.browser_overview `
return sql

 

Plain Text
var item = data.find(d => d.metric_name === 'total_hours');
return [{ value: item ? item.metric_value : 0 }];

 

Plain Text
var item = data.find(d => d.metric_name === 'avg_hours');
return [{ value: item ? item.metric_value : 0 }];

 

Plain Text
var item = data.find(d => d.metric_name === 'active_ratio');
return [{ value: item ? item.metric_value : 0 }];

 

Plain Text
var item = data.find(d => d.metric_name === 'heavy_ratio');
return [{ value: item ? item.metric_value : 0 }];

 

 

 

  • 工作日周末对比图表：查询browser_weekday_weekend表，绑定分组柱状图，展示双场景使用差异。

Plain Text
let sql = `
select
    browser_name as x,
    avg_duration_sec as y,
    day_type as s
from cs_group_8.browser_weekday_weekend
order by day_type,browser_name
`
return sql

 

  • 24小时活跃分布图表：查询browser_hourly时段数据，绑定区域图，自定义6类浏览器折线配色，保证图例、折线、标记颜色统一。

SQL
let sql = `
    select hour as x,
    active_user_count as y,
    browser_name as s
from cs_group_8.browser_hourly
order by browser_name, hour
`
return sql

 

  • 周活跃趋势图表：配置周维度查询SQL，绑定折线图，展示四周活跃度变化趋势。

Plain Text
let sql = `
  select week_range as x,
    active_user_count as y,
    browser_name as s
  from cs_group_8.browser_weekly_active
  order by browser_name, week_range
`
return sql

 

  • 使用频率分布图表：查询browser_frequency_stats分层数据，绑定堆叠柱状图。

Plain Text
let sql = `
  select
      browser_name as s,
      user_count as y,
      usage_level as x
   from cs_group_8.browser_frequency_stats
   order by browser_name
`
return sql

 

  • 浏览器数量分布饼图：查询browser_multi_usage数据，绑定饼图，展示用户多浏览器使用占比。

Plain Text
let sql = `
  select
      browser_count as name,
      user_count as value
  from cs_group_8.browser_multi_usage
  order by browser_count
`
return sql

 

（六）大屏预览与发布上线

所有数据绑定、样式调试完成后，我多次预览大屏，核对数据准确性、图表样式、布局美观度，确认无误后完成发布，生成公开在线分享链接。

 

 

 

 

 

六、实验核心素材汇总（全部官方OSS链接）

素材名称

素材链接

页面背景

https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/bg-2.png

导航按钮背景

https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/comprehensive-data/navigation-bg-1.png

顶部Banner标题图

https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/banner01.png

短标题背景

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

图表区域背景

https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/area-bg.png

时长指标图标

https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/library-data/audio-video.png

用户指标图标

https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/library-data/degree-thesis.png

七、实验总结与个人收获

（一）项目整体成果

本次实验我完整落地了原始数据→ETL聚合加工→静态大屏布局→动态数据接入→上线发布的全链路数据分析项目，从零搭建8张标准化业务数据表、完成专业化数据大屏制作，实现浏览器市场格局、用户行为、用户画像的全方位可视化分析，解决了原始明细数据查询卡顿、数据零散、无业务聚合的问题。

（二）个人实操收获

  1. 熟练掌握Uniplore零代码ETL核心组件用法，精通数据清洗、字段计算、分组聚合、多表关联、值映射、JS自定义计算等实操技能；
  2. 深刻理解大屏可视化工程化核心思想：预聚合优先、规避明细查询、按需加工指标，保障大屏加载效率；
  3. 掌握助睿Max蓝图编辑器核心逻辑，理解数据源、触发器、SQL查询、数据分发、组件绑定的完整数据流；
  4. 建立「业务问题→分析维度→指标设计→数据加工→可视化落地」的标准化数据分析思维。

（三）项目可优化方向

后续可基于本项目迭代升级：增加大屏筛选交互、新增竞品重叠桑基图、补充用户流失分析、完善用户画像大屏、实现数据定时自动刷新。

#数据分析 #数据可视化 #数据大屏 #Uniplore #ETL #大数据实战 #零代码#助睿平台 #浏览器数据分析 #实验教程 #计算机实训 #数据加工 #可视化大屏

 

# 数据分析 # 数据挖掘
Logo
EazyDevelop社区

一站式 AI 云服务平台

更多推荐

cover

解密 MCP 协议：如何用 Node.js 从零手写一个本地文件读取 MCP 服务器

avatar EazyDevelop社区
cover

2026 工业 4G 采集网关行业落地指南：四大高频场景痛点拆解与选型实战

avatar EazyDevelop社区
cover

如何零代码生成PPT-上传参考文档自动生成PPT

avatar EazyDevelop社区