企业官网建设流程全解析

一、实验概述

1.1 实验背景

在大数据时代，理解“谁在使用产品”是产品设计和营销决策的基础。本次实验基于之前加工完成的用户画像统计表（user_profile_stats），从零开始搭建一个完整的浏览器用户画像分析数据大屏。实验涵盖从大屏布局设计、数据接入配置，到交互功能实现的全流程，帮助学生掌握低代码数据可视化平台的核心操作能力。

1.2 实验目的

本次实验共分为三个子实验，分别达成以下目标：

实验6-1：大屏静态布局制作

• 根据用户画像分析需求，合理设计大屏的信息结构与叙事逻辑

• 理解不同图表类型在用户画像分析中的适用场景与分析价值

• 将数据结果转化为可直观理解、可支撑决策的用户洞察

实验6-2：大屏数据接入

• 理解蓝图编辑器的基本概念（数据源、触发器、动作、并行数据处理）

• 使用并行数据处理节点接收筛选器参数并分发给多个SQL请求节点

• 为不同图表组件编写带参数的SQL查询语句，配置筛选器与图表的联动交互

实验6-3：大屏交互设置

• 使用图层可见性控制实现大屏内容切换

• 使用按钮组件配置页面跳转或内容显示/隐藏

• 使用地图组件的交互事件，实现省份下钻联动

• 配置指标卡组件根据地图点击动态更新数据

1.3 实验环境

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

• 核心工具：助睿数智（Uniplore）一站式数据科学平台、助睿Max（数据大屏）

• 数据来源：团队私有数据库（MySQL），使用 user_profile_stats 用户画像统计表

二、数据表结构说明

在开始大屏搭建之前，先了解本次实验使用的核心数据表 user_profile_stats 的结构：

该表按浏览器维度统计了用户在各人口属性上的分布，支持整体分析与分浏览器对比分析。

​

三、实验6-1：浏览器用户画像分析-大屏静态布局制作

3.1 业务问题分析

在开始搭建大屏之前，需要先明确：这张大屏要帮助谁、看懂什么？

用户画像大屏的核心价值不是“罗列统计数字”，而是回答“谁在用我们的产品”，并将抽象的人口属性转化为可行动的人群认知。

3.2 图表选型方案

3.3 大屏布局设计（5大模块）

最终整理的用户画像大屏方案包含5个核心模块：

模块一：数据概览

• 指标项：总用户数、平均年龄、本科及以上占比、中高收入占比

• 使用组件：指标卡

• 作用：一眼获取最核心的结论

模块二：性别与居住地类型分布

• 指标项：性别分布、居住地类型分布（城市/城郊/乡村）

• 使用组件：环形图

• 作用：了解用户的性别构成和城乡分布

模块三：用户属性分布

• 指标项：年龄分布、学历分布、职业分布、收入分布

• 使用组件：条形图

• 作用：全面了解用户的基本属性特征

模块四：省份分布

• 指标项：各省份用户分布

• 使用组件：中国地图

• 作用：识别区域市场热点，指导本地化运营

模块五：筛选器（浏览器多选）

• 指标项：浏览器名称选择（Chrome/Safari/Firefox/Edge等）

• 使用组件：下拉多选筛选器

• 作用：支持按浏览器筛选，对比不同用户群体的画像差异​

3.4 操作步骤

步骤1：创建大屏项目

登录助睿在线实验平台，进入“助睿Max”数据大屏模块，点击“新建大屏”，命名为“浏览器用户画像分析大屏”。

步骤2：添加标题和导航栏

• 拖入“文本”组件作为大屏主标题（如“浏览器用户画像分析”）

• 为后续两大屏切换预留导航区域​

步骤3：拖入模块一（数据概览指标卡）

• 从组件库拖入4个“指标卡”组件（或使用“翻牌器”组件）

• 分别放置在大屏中间靠左，占位展示核心指标

• 设置标题：总用户数、平均年龄、本科及以上占比、中高收入占比

• 指标卡样式建议：字体醒目、背景半透明、边框圆润，符合大屏风格

  ​

步骤4：拖入模块二（环形图）

• 拖入2个“环形图”组件，分别用于展示性别分布和居住地类型分布

• 设置环形图样式：内径大小、颜色方案、标签显示位置（建议显示百分比和标签）​

步骤5：拖入模块三（条形图）

• 拖入4个“条形图”组件，分别用于展示年龄分布、学历分布、职业分布、收入分布

• 设置条形图样式：颜色、轴标签旋转角度（当类别较多时）、数据显示格式​

步骤6：拖入模块四（中国地图）

• 拖入“中国地图”组件，用于展示各省份用户分布

• 设置地图样式：颜色渐变方案（深色代表用户多，浅色代表用户少）、地图缩放级别、显示数据标签​

步骤7：拖入模块五（筛选器）

• 拖入“下拉多选”筛选器组件，放置在页面顶部

• 设置选项：Chrome、Safari、Firefox、Edge、Opera等主流浏览器

• 筛选器样式：设置背景透明以融合导航栏样式

​

步骤8：整体样式优化

• 统一色系，确保大屏整体风格一致

• 利用图层管理功能调整各组件的前后层级

• 预览大屏静态布局效果，确认各组件位置、大小、样式符合预期​

四、实验6-2：浏览器用户画像分析-大屏数据接入

4.1 蓝图编辑器核心概念

蓝图编辑器是助睿Max中用于配置数据流和交互逻辑的可视化编程工具，采用“节点-连线”方式管理可视化应用中多个组件之间的交互关系。

4.2 整体蓝图逻辑

本次数据接入的总体逻辑如下：

页面加载或用户选择浏览器 → 触发两个SQL请求：

1. 维度数据SQL：查询性别、年龄、学历、职业、收入、居住地类型、省份分布

2. 核心指标SQL：查询总用户数、平均年龄、本科及以上占比、中高收入占比

数据分发：

• 维度数据通过并行数据处理节点，按 dimension_type 分发到各个图表

• 核心指标通过并行数据处理节点，将单行多列的指标数据拆分为四个独立数值，分别发送给四个指标卡

4.3 操作步骤

步骤1：配置数据源

• 打开大屏的“蓝图编辑器”

• 添加“数据源”节点，配置MySQL数据库连接信息

• 数据源名称：MySQL_UserProfile

• 连接信息：填写服务器地址、端口、数据库名称、用户名、密码

• 测试连接，确认成功​

步骤2：配置维度数据SQL查询节点

在蓝图编辑器中添加“SQL查询”节点，配置以下SQL语句。该节点将查询用户画像各维度的分布数据：

// 从全局变量获取选中的浏览器值 const selectedBrowser = window.GLOBAL_SELECTED_BROWSER; let sql = ` -- 性别分布 select 'gender' as dimension_type, gender as name, sum(user_count) as value from labs.user_profile_stats where browser_name = '${selectedBrowser}' group by gender union all -- 年龄段分布 select 'age' as dimension_type, age_group as name, sum(user_count) as value from labs.user_profile_stats where browser_name = '${selectedBrowser}' group by age_group union all -- 学历分布 select 'edu' as dimension_type, edu as name, sum(user_count) as value from labs.user_profile_stats where browser_name = '${selectedBrowser}' group by edu union all -- 职业分布 select 'job' as dimension_type, job as name, sum(user_count) as value from labs.user_profile_stats where browser_name = '${selectedBrowser}' group by job union all -- 收入分布 select 'income' as dimension_type, income as name, sum(user_count) as value from labs.user_profile_stats where browser_name = '${selectedBrowser}' group by income union all -- 居住地类型分布 select 'city_type' as dimension_type, city_type as name, sum(user_count) as value from labs.user_profile_stats where browser_name = '${selectedBrowser}' group by city_type union all -- 省份分布 select 'province' as dimension_type, province as name, sum(user_count) as value from labs.user_profile_stats where browser_name = '${selectedBrowser}' group by province `; return sql

​

步骤3：配置核心指标SQL查询节点

添加第二个“SQL查询”节点，配置以下SQL语句，用于获取核心概览指标：

// 从全局变量获取选中的浏览器值 const selectedBrowser = window.GLOBAL_SELECTED_BROWSER; let sql = ` -- 核心指标（总用户数、平均年龄、本科及以上占比、中高收入占比） select 'total_users' as name, sum(user_count) as value from labs.user_profile_stats where browser_name = '${selectedBrowser}' union all select 'avg_age' as name, round(sum(age * user_count) / sum(user_count), 1) as value from labs.user_profile_stats where browser_name = '${selectedBrowser}' union all select 'high_edu_ratio' as name, round(sum(case when edu in ('本科', '硕士及以上') then user_count else 0 end) * 100.0 / sum(user_count), 1) as value from labs.user_profile_stats where browser_name = '${selectedBrowser}' union all select 'high_income_ratio' as name, round(sum(case when income in ('5001～8000元', '8001～12000元','12000元以上') then user_count else 0 end) * 100.0 / sum(user_count), 1) as value from labs.user_profile_stats where browser_name = '${selectedBrowser}' `; return sql

​

步骤4：配置筛选器联动

• 添加“页面加载”触发器，设置页面初始化时加载全部浏览器数据

• 添加“变量”节点，定义 browser_filter 变量

• 将筛选器组件的“值变更”事件连接到变量节点

• 变量节点连接到两个SQL查询节点

并行数据处理配置：

• 添加“并行数据处理”节点（维度数据分发）

  • 输入：维度SQL查询结果

  • 按 dimension_type 字段值分发：

    • 'gender' → 性别环形图

    • 'age_group' → 年龄条形图

    • 'edu' → 学历条形图

    • 'job' → 职业条形图

    • 'income' → 收入条形图

    • 'city_type' → 居住地类型环形图

    • 'province' → 中国地图

• 添加第二个“并行数据处理”节点（指标数据分发）

  • 输入：核心指标SQL查询结果（单行多列）

  • 提取各字段值，分别发送给四个指标卡组件

​

步骤5：绑定图表数据

• 进入大屏编辑区，依次选中各个图表组件

• 导出到蓝图编辑器

​

步骤6：测试和预览

• 点击“预览”按钮，查看大屏动态数据展示效果

• 测试筛选器功能：选择一个浏览器（如Chrome），观察所有图表数据是否同步刷新

• 切换浏览器，验证数据联动是否正常

​​

4.4 常见问题与排查

五、实验6-3：2012年浏览器全景分析-大屏交互设置

5.1 大屏切换功能实现

实现原理：

市场分析和用户画像两个大屏实际上是在同一个大屏文件中，通过控制图层的可见性来实现切换：

• 将所有市场分析的组件放入“市场分析组”

• 将所有用户画像的组件放入“用户画像组”

• Tab列表组件设置2列：ID为1的“市场分析”和ID为2的“用户画像”

• 点击某列时，根据ID控制两个组的可见性：显示对应组，隐藏另一组

操作步骤：

步骤1：创建图层分组

• 在图层管理面板中，创建两个新分组：“市场分析组”和“用户画像组”

• 将所有市场分析相关的组件移动到“市场分析组”

• 将所有用户画像相关的组件移动到“用户画像组”

​

步骤2：添加Tab列表组件

• 从组件库拖入“Tab列表”组件

• 设置2个标签页：“市场分析”和“用户画像”

​

步骤3：配置交互逻辑

• 打开蓝图编辑器

• 添加Tab列表的“当前选中项变化”触发器

• 添加“条件判断”节点：判断选中的ID

• 分别添加两个“设置图层可见性”动作节点

• 连接逻辑：

  • 选中ID=1（市场分析）：显示“市场分析组”，隐藏“用户画像组”

  • 选中ID=2（用户画像）：显示“用户画像组”，隐藏“市场分析组”

5.2 配置地图省份点击联动

5.2.1 设计思路与原理

在用户画像大屏中，我们希望通过点击地图上的任意省份，右侧的核心指标卡（总用户数、平均年龄、本科及以上占比、中高收入占比）能立即切换为该省份的数据。这是一种典型的地理下钻分析，也是数据大屏的核心交互之一。

助睿Max 的蓝图编辑器让这种交互无需编写后端代码，只需通过“事件-动作”的连线即可实现。整个数据流如下：

地图点击（事件） → 提取省份名称（并行数据处理） → 动态SQL查询（SQL请求） → 数据分发（并行数据处理） → 四个指标卡刷新

核心知识点：

• 事件驱动：地图组件的“点击区域时”事件是起点，它会输出被点击区域的地理信息（如省份名称）。

• 变量传递：通过window.globalProvinceName全局变量，可以将省份名称在不同节点间共享，避免重复连线。

• 动态SQL：SQL请求节点可以接收外部变量，实现“根据用户点击的省份查询不同数据”。

• 并行数据处理：将一次查询返回的多行数据（每个指标一行）拆分、过滤，分别发送给不同的目标组件。

传统开发中，实现此类下钻功能需要编写前端 JavaScript 和后端 API，而助睿Max 通过蓝图编辑器将数据流可视化，拖拽节点即可完成，开发效率提升数倍。

5.2.2 核心组件配置

（1）提取地区名称（并行数据处理）

地图组件点击后返回的省份名称是全称（如“江苏省”、“广西壮族自治区”），但我们的数据表中存储的是简称（“江苏”、“广西”）。因此需要先做一个名称映射。

• 作用：接收地图点击事件输出的data对象，从中提取name字段，并通过映射表转换为数据表中的简称，最后存入全局变量window.globalProvinceName。

• 代码（已提供完整映射表，支持省、自治区、直辖市、特别行政区）

// 省份特殊映射（直辖市、自治区、特别行政区） const specialMap = { '北京市': '北京', '天津市': '天津', '上海市': '上海', '重庆市': '重庆', '广西壮族自治区': '广西', '内蒙古自治区': '内蒙古', '西藏自治区': '西藏', '宁夏回族自治区': '宁夏', '新疆维吾尔自治区': '新疆', '香港特别行政区': '香港', '澳门特别行政区': '澳门' }; let provinceName = data.name; // 优先使用特殊映射 if (specialMap[provinceName]) { provinceName = specialMap[provinceName]; } else { // 通用处理：去除末尾的“省”、“自治区”、“市” provinceName = provinceName.replace(/(省|自治区|市)$/, ''); } window.globalProvinceName = provinceName; return provinceName;

（2）省份核心指标查询（SQL请求节点）

根据当前选中的浏览器（window.GLOBAL_SELECTED_BROWSER）和点击的省份（window.globalProvinceName），从user_profile_stats表中查询四个核心指标。为了便于后续分发，使用UNION ALL将四个指标输出为多行，每行包含name（指标名）和value（数值）

const selectedProvince = window.globalProvinceName; console.log("点击的省份名称（处理后）：", selectedProvince); const selectedBrowser = window.GLOBAL_SELECTED_BROWSER; const sql = ` select 'total_users' as name, sum(user_count) as value from labs.user_profile_stats where browser_name = '${selectedBrowser}' and province = '${selectedProvince}' union all select 'avg_age' as name, round(sum(age * user_count) / sum(user_count), 0) as value from labs.user_profile_stats where browser_name = '${selectedBrowser}' and province = '${selectedProvince}' union all select 'high_edu_ratio' as name, round(sum(case when edu in ('本科', '硕士及以上') then user_count else 0 end) * 100.0 / sum(user_count), 2) as value from labs.user_profile_stats where browser_name = '${selectedBrowser}' and province = '${selectedProvince}' union all select 'high_income_ratio' as name, round(sum(case when income in ('5001～8000元', '8001～12000元','12000元以上') then user_count else 0 end) * 100.0 / sum(user_count), 2) as value from labs.user_profile_stats where browser_name = '${selectedBrowser}' and province = '${selectedProvince}' `; console.log("生成的省份核心指标SQL：", sql); return sql;

（3）省份核心指标分发（并行数据处理）

SQL 返回的是四行数据，而四个指标卡每个只需要一个数值。通过“并行数据处理”节点，我们按name字段过滤，将每个指标单独输出给对应的指标卡。

• 分支示例（总用户数）：

var item = data.find(item => item.name === 'total_users'); return [{ value: item ? item.value : 0 }];

• 其他分支：只需修改item.name === 'total_users'的条件即可，分别对应：

  • 'avg_age'→ 平均年龄指标卡

  • 'high_edu_ratio'→ 本科及以上占比指标卡

  • 'high_income_ratio'→ 中高收入占比指标卡

5.2.3 蓝图连线与数据流

按照以下顺序连接蓝图节点：

1. 区域热力层的“点击区域时”事件→ 连接到“提取地区名称”节点。

2. “提取地区名称”的“执行成功”输出→ 连接到“省份核心指标查询”节点的“执行SQL”输入。

3. “省份核心指标查询”的“执行成功”输出→ 连接到“省份核心指标分发”节点的输入。

4. “省份核心指标分发”的四个输出分支→ 分别连接到四个核心指标卡的“导入数据接口”。

5.3 地图热力层根据用户数渲染颜色

5.3.1 设计思路与原理

为了直观展示全国各省份的用户分布，我们需要在地图上用颜色深浅来表示每个省份的用户数（用户数越多，颜色越深）。这是数据大屏中常见的热力图效果。

助睿Max 的地图组件支持通过“区域热力层”子组件接收自定义数据。数据格式要求为{ name, value, area_id }，其中name为省份名称，value为用户数，area_id为行政区划代码（adcode）。因此，我们需要完成以下步骤：

1. 提取地理数据中的 adcode 和 name：地图组件内部包含全国各省份的 GeoJSON 边界数据，其中包含adcode（行政区划代码）和标准名称。我们需要提取并建立一个“省份名称 → adcode”的映射表，存储在全局变量中。

2. 查询所有省份的用户数：根据当前选中的浏览器，从user_profile_stats表中统计每个省份的用户总数。

3. 数据映射与格式化：将查询结果中的省份名称与 adcode 映射表匹配，输出格式{ name, value, area_id }。

4. 导入热力值数据：将格式化后的数据导入地图的“区域热力层”子组件，即可自动渲染颜色深浅。

传统开发中，实现地图热力层需要前端加载 GeoJSON、手动计算颜色映射、绑定事件等。而助睿Max 只需配置子组件的数据接口，平台自动完成渲染，极大降低了地理可视化的门槛。

5.3.2 核心组件配置

（1）提取 adcode 映射表（并行数据处理）

此节点只需执行一次，在页面加载时运行，从地图组件内置的 GeoJSON 中提取每个省份的 adcode 和标准名称，建立映射表globalProvinceAdcode。

• 操作步骤：

  • 在蓝图中添加“并行数据处理”节点，命名为“提取adcode映射表”。

  • 将区域热力层的“当数据接口地理边界geojson数据加载完成时”事件连接到该节点（确保地图数据加载后执行）。

• 处理方法代码：javascript

/** * 提取地理数据中的 adcode 和 name，建立名称→adcode 映射 * @param {Object} data - 地理数据对象（包含 features 数组） * @returns {Object} 名称到 adcode 的映射表 */ function extractAdcodeAndName(data) { if (!data || !Array.isArray(data.features)) { console.error('无效的地图数据格式'); return {}; } const nameToAdcode = {}; data.features.forEach(feature => { const props = feature.properties; if (props && props.adcode && props.name) { nameToAdcode[props.name] = props.adcode; } }); return nameToAdcode; } const mapping = extractAdcodeAndName(data); window.globalProvinceAdcode = mapping; console.log("省份adcode映射表已加载", Object.keys(mapping).length); return mapping;

（2）查询所有省份的用户数（SQL请求节点）

根据当前选中的浏览器（window.GLOBAL_SELECTED_BROWSER），统计每个省份的用户总数，并按用户数降序排列。

• 操作步骤：

  • 添加“SQL请求”节点，命名为“各省份用户数查询”。

  • 在“处理方法”中输入以下代码：javascript

const selectedBrowser = window.GLOBAL_SELECTED_BROWSER; // 当前选中的浏览器 const sql = ` SELECT province AS name, SUM(user_count) AS value FROM labs.user_profile_stats WHERE browser_name = '${selectedBrowser}' AND province IS NOT NULL AND province != '' GROUP BY province ORDER BY value DESC `; console.log("生成的所有省份用户数SQL：", sql); return sql;

（3）地图数据映射（并行数据处理节点）

将 SQL 查询结果中的省份名称与window.globalProvinceAdcode匹配，生成{ name, value, area_id }格式的数据，供地图热力层使用。

• 操作步骤：

  • 添加“并行数据处理”节点，重命名为“地图数据与用户数映射”。

  • 处理方法代码：

function convertToMapData(data) { if (!Array.isArray(data) || data.length === 0) { return []; } return data.map(item => { const provinceName = item.name; // 注意：SQL 返回字段名为 name let area_id = globalProvinceAdcode[provinceName]; // 如果直接匹配失败，尝试简化名称（案例中已实现） if (!area_id) { const simplifiedName = provinceName.replace(/省|市|自治区|特别行政区|回族|壮族|维吾尔|藏族|苗族/g, ''); for (const fullName in globalProvinceAdcode) { if (fullName.includes(simplifiedName)) { area_id = globalProvinceAdcode[fullName]; break; } } } if (!area_id) { // console.warn(`未找到省份 "${provinceName}" 的匹配 adcode`); area_id = "000000"; } return { name: provinceName, value: parseFloat(item.value) || 0, area_id: Number(area_id) }; }); } const result = convertToMapData(data); // console.log("最终返回的地图热力数据：", result); return result;

（4）导入地图热力层

在地图组件（基础平面地图）中，已经添加了子组件“区域热力层”。我们需要将映射后的数据导入该子组件。

• 操作步骤：

  • 将“地图数据与用户数映射”节点的输出端口连接到“区域热力层”的“导入热力值数据接口”。

助睿Max的地图组件及其子组件的事件和动作非常丰富。通过“导入热力值数据接口”动态更新数据，可以实现浏览器切换时热力图自动刷新。

5.3.3 蓝图连线与数据流

完整的热力渲染数据流如下（独立于点击联动）：

区域热力层“geojson加载完成”事件 → 提取adcode映射表（存储到window.globalProvinceAdcode） ↓ 浏览器筛选器变化 → 各省份用户数查询 → 地图数据与用户数映射 → 区域热力层“导入热力值数据接口”

5.4 预览与发布

完成上述所有配置后，大屏应具备三个核心交互功能：

验证步骤：

1. 点击右上角“预览”按钮，进入大屏预览模式。

2. 依次测试上述三项功能，确保均正常工作。

3. 打开浏览器开发者工具（F12）的 Console 面板，检查是否有报错信息；如有，根据错误提示调整蓝图配置。

发布大屏：

1. 确认所有功能正常后，点击顶部工具栏的“发布”按钮。

2. 在弹出的发布对话框中，打开“发布分享开关”。

3. 复制生成的分享链接。

4. 打开新浏览器窗口（或使用无痕模式），将复制的链接粘贴到地址栏中访问，验证发布后的大屏是否与预览效果一致。

六、实验成果展示

完成全部三个实验后，最终的用户画像分析大屏应具备以下功能：

关键成果总结

1. 数据驱动决策：大屏回答了“谁在用我们的产品”这一核心问题，将抽象的人口属性转化为直观的视觉表达，为产品设计、定价策略、区域运营提供数据支撑。

2. 低代码高效开发：通过拖拽式搭建和蓝图编辑器，全程无需编写复杂前端代码即可完成专业级数据大屏开发，大幅降低了可视化开发门槛。

3. 交互式探索分析：筛选器与地图联动让大屏从“静态展示”升级为“可探索的分析工具”，用户可以根据需要自由切换维度，深入洞察数据。

七、实验总结与心得

7.1 技术收获

通过本次三个实验的系统学习，我掌握了以下技能：

• 数据驱动的大屏设计思维：从业务问题出发，选择合适的图表类型传递分析价值

• 蓝图编辑器的灵活运用：掌握数据源配置、SQL参数化查询、并行数据分发等核心功能

• 交互联动配置：实现筛选器联动和地图下钻联动，提升大屏的可探索性

7.2 踩坑与避坑指南

• 筛选器参数传递：确保变量命名一致，SQL中使用{{变量名}}语法引用筛选器值

• 并行数据分发：注意区分维度数据分发和指标数据分发，前者按类型字段拆分，后者将一行多列拆为多行

• 图层管理：大屏切换时，两组图层的组件不要相互重叠，合理利用图层分组功能

• SQL性能优化：使用聚合表而非原始明细表，避免大屏加载过慢

7.3 拓展思考

• 如何在地图联动的同时，联动所有图表同步更新为该省份的数据？

• 如何添加时间筛选器，分析用户画像的月度趋势变化？

• 如何将大屏发布为企业级应用，供业务部门日常使用？