企业官网建设流程全解析

一、实验目的与核心价值

本次实验的核心目标是基于已加工完成的用户画像统计表，利用助睿Max平台完成“浏览器用户画像分析”大屏的静态布局设计。实验不仅要求掌握大屏搭建的技术操作，更强调站在“数据产品”的角度，理解如何将抽象的用户人口属性数据，转化为更为直观数据大屏。

核心价值在于回答一系列关键业务问题：

• 目标用户是谁（年龄、性别、职业）？
• 用户的教育与收入水平如何？
• 用户的地理分布在哪里？
• 不同浏览器的用户画像是否存在差异？

实验环境：

• 实验平台：助睿在线实验平台
• 可视化工具：助睿Max（数据大屏）

二、业务问题与分析维度

三、整体设计方案与模块构成

本次大屏设计遵循“信息层次清晰、分析逻辑连贯”的原则，整体分为五大分析模块，并搭配筛选器实现交互探索：

1. 数据概览模块（核心指标卡）：展示覆盖用户数、平均年龄、本科以上占比、中高收入占比四个关键指标，快速勾勒用户群的规模与基本轮廓。

2. 基本信息模块（饼图/柱状图/条形图）：包括性别分布、年龄分布、学历分布、职业分布、收入分布。针对不同维度特点选择合适图表——性别用饼图突出比例；年龄、职业、收入用柱状图便于横向对比；学历名称较长则采用横向条形图提升可读性。

3. 地域分布模块（地图+列表）：以中国地图（区域热力层）直观展示用户省份分布的空间热点与空白区域，辅以“用户数TOP5省份”轮播列表，弥补地图难以精确读数的不足，实现“看趋势”与“读数值”的互补。

4. 居住地类型模块（轮播饼图）：分析城市、城郊、乡村用户的结构占比，为差异化市场策略提供依据。

5. 交互筛选模块（下拉多选）：支持按单个、多个或全部浏览器进行筛选，使大屏从静态展示变为可探索的分析工具，便于对比不同浏览器用户的画像差异。

• 整体效果预览：

四、具体实验步骤

1.打开之前已完成“市场分析”大屏的项目文件。

2.使用图层管理功能，将“市场分析”大屏的所有组件选中并整体复制。

3.将复制得到的组件组重命名为“用户画像分析”，将“市场分析”组件隐藏，我们针对“用户画像”，逐步添加和布局本次实验所需的组件。

接下来我们正式开始几个小板块的设计：位置和大小可自行参照调整，下边不一一展示噢！

1）用户省份分布（地图→基础平面地图）：在“子组件管理中”选择“区域热力层”

2）核心指标：参考图片添加4个“数字翻牌器”纵向排列，设置标题和数值样式，用“单张图片”设置标题背景

3）用户数TOP5省份排行榜（轮播列表）：

①添加“单张图片”组件，作为排行榜区域背景

②添加“通用标题”组件，作为排行榜标题

③添加“轮播列表”组件，作为排行榜主体

4）性别分布（基础饼图）：

①使用“单张图片”组件设置区域背景，并设置好标题

②添加“基础饼图”组件，调整大小和位置

5）年龄段分布（基础柱图）：

①使用“单张图片”组件设置区域背景，并设置好标题

②助睿Max 支持多种柱状图：基础柱图、弧形柱图、水平基础柱图、水平胶囊柱图等，这里我们使用基础柱图进行展示

6）学历分布（水平基础柱图）：

①使用“单张图片”组件设置区域背景，并设置好标题

②这里我们使用助睿Max 的水平基础柱图

7）职业分布（基础柱图）：

①使用“单张图片”组件设置区域背景，并设置好标题

②这里我们使用助睿Max的基础柱图

8）收入分布（水平基础柱图）：

①使用“单张图片”组件设置区域背景，并设置好标题

②这里我们使用助睿Max 的水平基础柱图

9）居住地类型分布（轮播饼图）：

①使用“单张图片”组件设置区域背景，并设置好标题

②为了使大屏可视化效果更丰富，这里我们使用助睿Max 的轮播饼图

10）筛选器（下拉选择组件）：

支持按不同浏览器进行对比分析。通过筛选器，用户可以：

• 查看全部浏览器用户的整体画像（默认视图），了解产品大盘用户特征；

• 选择单个浏览器（如 Chrome、IE、360 等），聚焦该浏览器用户的画像，回答“使用 Chrome 的用户与其他用户有什么不同？”；

• 选择多个浏览器进行对比，直观比较不同浏览器用

【下拉选择框的数据属性设置用于蓝图编辑器中，后边将基于这6个静态数据实现组件交互！！】

到这里，我们就完成了所需的10个小模块的静态设计，下边是整体的效果展示。

五、数据接入——使用蓝图编辑器

1. 整体设计流程

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

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

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

2）浏览器筛选器 → 将选中的浏览器值传递给两个SQL请求节点。

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

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

3）各图表组件接收数据并展示。

2.整体设计流预览：

3.前期准备

• 由于在数据大屏中，我们需要展示平均年龄这一核心指标，为了更准确地计算平均年龄，我们需要在user_profile_stats表中增加一个age字段。

3.1 修改目标表的结构

• 使用“执行一个SQL脚本”修改原有的表结构，增加age字段。

这一步执行的SQL语句如下：

DROP TABLE IF EXISTS `user_profile_stats`; CREATE TABLE `user_profile_stats` ( `browser_name` VARCHAR(50) NOT NULL COMMENT '浏览器名称', `gender` VARCHAR(10) COMMENT '性别', `age` INT NOT NULL 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.2 修改原“用户画像表加工”转换流

① 修改排序记录组件，增加 age 字段的升序排序

② 修改分组组件，分组字段更加 age

③ 执行转换流

查看得到的数据表，检查age字段是否已经成功显示。（tips：若数据异常可排查计算器组件的配置，“计算”属性值可能会发生丢失，运行前记得检查一下噢！）

4.组件导出到蓝图编辑器

• 当组件导入到蓝图编辑器后，才可以为该组件配置交互和接入数据，所以我们需要将标签卡、各数据表和热力图等导出到蓝图编辑器中（注意：本次实验中基本平面地图自身不需要导出，导出的是它的 “区域热力层” 噢！）。

• 其他组件正常导出到蓝图编辑器即可：（演示时我已导出，大家操作时右键点击“导出到蓝图编辑器”即可）

接下来切换到蓝图编辑器，最终我们需要导出的组件可以参考下图：

5.添加浏览器参数接收节点（并行数据处理）

• 大屏上的浏览器筛选器让用户可以选择某个具体的浏览器。当用户切换选择时，地图、饼图、柱状图等所有图表的数据都需要跟着变。实现联动的这个节点就是“浏览器参数接收”，它用“并行数据处理”组件来实现。

5.1 双击节点，添加两个处理方法

方法一（页面加载时执行一次，设置基础URL）

const BASE_URL = 'https://lab.guilian.cn'; window.GLOBAL_BASE_URL = BASE_URL; return data;

这个方法主要是为后续可能用到的外部API预留一个基础地址，本实验用不上，但保留结构。

方法二（每次筛选器变化时执行，接收浏览器参数）

const SELECTED_BROWSER = data.value; window.GLOBAL_SELECTED_BROWSER = SELECTED_BROWSER; return { value: SELECTED_BROWSER };

这个方法把用户选中的浏览器存到window.GLOBAL_SELECTED_BROWSER这个全局变量里。后面的SQL请求节点只要读取这个变量，就知道该查哪个浏览器的数据了。

5.2 在画布编辑器中补全“下拉选择框”组件的配置

• 其中，浏览器的选项我们可以直接使用静态数据（因为个数不多）：title为前端显示内容，value为实际查询内容，即数据库中存储的对应 browser_name，如：{ "title": "IE浏览器", "value": "IE浏览器" }（有多个值时用“[]”框起来，用“,”分割）
• 填写6个浏览器的对应内容，并刷新数据，同时，输入框中默认选中设置为“IE浏览器”

6.添加维度数据SQL请求（SQL请求）

【！！！注意：所有SQL查询语句都需要将from修改为自己的数据库表！！！】

• 这个节点负责查询性别、年龄、学历、职业、收入、居住地类型、省份等维度数据，使用UNION ALL合并，输出格式为(dimension_type, name, value)。

添加“SQL请求”节点，重命名为“维度数据SQL请求”，查询SQL如下：

// 从全局变量获取选中的浏览器值 const selectedBrowser = window.GLOBAL_SELECTED_BROWSER; let sql = ` -- 1.性别分布 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 -- 2.年龄段分布 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 -- 3.职业分布 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 -- 4.收入分布 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 -- 5.居住地类型分布 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 -- 6.省份分布 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

7.添加核心指标SQL请求（SQL请求）

• 只查询四个核心指标，输出单行多列格式（一行包含四个字段），不需要UNION ALL，取值更简单。

添加“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

8.添加维度数据分发节点（并行数据处理）

• 基于上一步SQL查出来的是一张包含所有维度数据的大表，但每个图表只需要其中一部分，所以需要一个分发节点，把数据按dimension_type拆开，分别送给对应的图表。这个节点也用“并行数据处理”来实现。

8.1 添加“并行数据处理”节点，重命名为“数据分发”。将SQL请求节点的“执行成功”连接到该节点。

8.2 双击节点，为每个图表添加一个处理方法

• 具体处理方法脚本如下：

分支1：性别分布（饼图）

var filtered = data.filter(item => item.dimension_type === 'gender'); return filtered.map(item => ({ name: item.name, value: item.value }));

分支2：年龄段分布（柱状图）

var filtered = data.filter(item => item.dimension_type === 'age'); var order = ['<18', '18-25', '26-35', '36-45', '>45']; filtered.sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name)); return filtered.map(item => ({ x: item.name, y: item.value, s: '用户数' }));

分支3：学历分布（条形图）

var filtered = data.filter(item => item.dimension_type === 'edu'); var order = ['小学及以下', '初中', '高中/中专/技校', '大专', '大学本科', '硕士及以上']; filtered.sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name)); return filtered.map(item => ({ x: item.name, y: item.value, s: '学历' }));

分支4：职业分布（柱状图）

var filtered = data.filter(item => item.dimension_type === 'job'); return filtered.map(item => ({ x: item.name, y: item.value, s: '职业' }));

分支5：收入分布（柱状图）

var filtered = data.filter(item => item.dimension_type === 'income'); // 按收入金额升序排序（提取数字进行比较） filtered.sort((a, b) => { // 提取收入段中的最小金额 var getMinIncome = (incomeStr) => { // 处理 "无收入"、"500元及以下" 等特殊情况 if (incomeStr === '无收入') return -1; if (incomeStr === '500元及以下') return 0; // 提取数字，如 "1501~2000元" 提取 1501 var match = incomeStr.match(/(\d+)/); return match ? parseInt(match[1]) : 999999; }; return getMinIncome(a.name) - getMinIncome(b.name); }); return filtered.map(item => ({ x: item.name, y: item.value, s: '收入' }));

分支6：居住地类型分布（饼图）

var filtered = data.filter(item => item.dimension_type === 'city_type'); return filtered.map(item => ({ name: item.name === 'unknown' ? '未知' : item.name, value: item.value }));

分支7：省份排行榜TOP5

/ 过滤出省份数据 var filtered = data.filter(item => item.dimension_type === 'province'); // 按用户数降序排序 filtered.sort((a, b) => b.value - a.value); // 取前5条 var top5 = filtered.slice(0, 5); // 直接返回组件需要的字段名 return top5.map(item => ({ province: item.name, user_count: item.value }));

以上的输出结果不正确的话，可以在最终输出结果的节点的处理方法代码中添加以下代码，查看返回的数据：

// console.log("返回的数据",data)

9.添加核心指标分发节点（并行数据处理）

同样地，通过“并行数据处理”节点，我们按name字段过滤，将每个指标单独输出给对应指标卡。

分支示例（总用户数）：

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

其他分支类似，参照指标数据的定义，只需修改item.name === 'total_users'的条件即可

10.连接节点并保存预览

根据我们的需求和设计框架，参照下图完成组件间的连线

预览效果：（所有组件应该正常显示，我的热力图和排行榜部分仍需排查问题）

六、大屏交互设置

本实验基于前两个实验完成的市场分析大屏和用户画像大屏，使用助睿Max的蓝图编辑器，配置两个大屏之间的切换交互，以及地图省份点击联动指标卡的功能。

1. 大屏切换逻辑

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

实现原理：通过 tab列表组件实现。将市场分析的所有组件放入“市场分析组”，用户画像的所有组件放入“用户画像组”。tab列表组件设置2列（“市场分析”和“用户画像”），每列设置不同的ID（如"id": 1和"id": 2），背景设为透明以融合导航栏样式。点击某列时，根据ID控制两个组的可见性：显示对应组，隐藏另一组。

助睿Max图层管理优势：通过“图层”面板可以轻松控制组件的显示/隐藏，无需编写代码。配合蓝图编辑器，可以实现按钮与图层可见性的联动。

2. 地图省份点击联动逻辑

在用户画像大屏中，点击地图上的某个省份时，右侧的四个核心指标卡（总用户数、平均年龄、本科及以上占比、中高收入占比）需要更新为该省份的数据。

用户点击省份 → 地图组件触发“点击区域”事件 → 蓝图接收省份名称 → SQL请求查询该省份的核心指标 → 指标卡刷新数据

3. 完整蓝图连接示意图

4. 具体操作步骤

4.1 配置大屏切换

（1）添加Tab列表组件，调整大小、位置，两个导航按钮重合

（2）Tab列表组件的基本设置中，设置行数为1，列数为2，再标签默认配置中，将“背景颜色”、“选中背景色”、“悬浮背景色”的透明度设置为0，这样就看不见Tab列表组件，给用户的感觉就是只有2个按钮

（3）设置Tab列表组件每个选项的id：在数据中，保留2列数据，id分别为1、2，content为空，设置后记得刷新数据

（4）将“市场分析”组、“用户画像”组、Tab列表组件导出到蓝图编辑器

（5）在蓝图编辑器中，将“市场分析”组、“用户画像”组、Tab列表组件添加到蓝图编辑器画布中，通过“分支判断”节点来做“当Tab点击时”的id判断，处理方法为：return data.id == 1;

（6）在“分支判断”的 满足 分支上，添加两个“设置图层可见性”动作：（也就是连线）

• 目标图层：市场分析组 → 显示

• 目标图层：用户画像组 → 隐藏

（7）在“判断选项卡”的 不满足 分支上，添加两个“设置图层可见性”动作：

• 目标图层：市场分析组 → 隐藏

• 目标图层：用户画像组 → 显示

4.2 配置地图省份点击联动

核心知识点：

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

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

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

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

（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'的条件即可

（4）组件连线：将上述组件参照图片连接起来

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

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

助睿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. 导入热力值数据：将格式化后的数据导入地图的“区域热力层”子组件，即可自动渲染颜色深浅。

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

/** * 提取地理数据中的 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请求节点）

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）地图数据映射（并行数据处理节点）

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）蓝图连线与数据流

5.预览与发布

部分细节存在问题，完整的结果参照下图噢！

以上，我们就完成了本次实验的全部内容。

七、实验问题与总结评价

实验问题

• 数据库账号权限报错

现象：在预览调试蓝图时，控制台显示1045 Access denied账号访问拒绝。

原因：使用的数据库账号se_group_8未被授权当前客户端 IP 访问，或账号密码配置有误，无法直连数据库执行脚本。

临时处理：重新输入数据库密码，刷新数据源。

• SQL 请求节点未配置数据源

现象：Server error（500）报错。

后果：平台无法执行查询，直接抛出服务器错误。

处理：检查所有SQL请求节点的数据源配置，以及SQL表名是否正确修改

• 数据加工组件配置丢失

现象：修改数据转换流、新增age字段后，计算器、分组、排序等组件配置意外丢失，导致加工后数据异常。

原因：平台数据转换流组件稳定性不足，多次编辑、重新运行后易丢失自定义配置。

临时处理：每次运行转换流前逐项核对组件配置，补全丢失的排序、分组、计算规则。

实验总结

本次完成浏览器用户画像分析大屏搭建，实现布局设计、数据接入、多组件交互联动等操作。实验中遇到服务器报错，经查是 SQL 节点未选择数据源导致；同时存在数据查询返回空值、地图省份编码匹配异常、组件联动偶尔失效等问题，逐一排查后完成全部功能。通过实操，掌握了数据可视化大屏搭建、低代码蓝图配置与数据流转的基本方法。

平台评价

平台功能齐全，集成数据处理、可视化设计、交互配置等模块，组件丰富、上手简单，贴合课程教学需求。但报错提示有些模糊的问题。整体而言是较优质的教学实验平台，若优化细节体验，使用效果会更好。