Appearance
云搭平台快速入门指南
概述
欢迎使用云搭大数据可视化平台！云搭平台是一个专业的大数据可视化平台，支持快速搭建各种大屏应用。
学习目标
通过本指南，您将学会：
- 创建第一个数据大屏
- 添加和配置图表组件
- 连接数据源
- 设置简单的交互效果
- 发布大屏
开始之前
您需要准备什么？
- 账号：云搭平台账号（如无账号请联系管理员）
学习时间
- 预计用时：15-20分钟
- 难度等级：入门级
- 适用人群：数据可视化新手
核心功能
工作台界面
工作台是您管理所有项目的中心枢纽，界面布局如下：
| 区域 | 功能描述 |
|---|---|
| 左侧导航 | 工作空间和应用列表管理 |
| 右侧主体 | 应用管理区域（预览、编辑、删除、导出等操作） |
| 全局功能 | 数据管理、资源管理等核心功能 |
核心功能模块
工作空间管理
- 创建工作空间：支持创建不同主题的工作空间（如：交通、建筑等）
- 创建分组：分组是空间内的子分类，用于进一步细分和管理应用
- 权限管理：控制编辑权限、预览权限和用户管理
数据管理
- 数据源管理：配置各种数据源连接（API、数据库等）
- 数据集管理：统一管理应用数据，支持数据预览和编辑
- API数据集：专门管理API接口数据，支持参数配置
- 变量管理：全局变量和页面变量，便于数据共享
资源管理
- 组件收藏：保存常用组件，提高设计效率
- 模板收藏：保存优质应用模板，快速复用
- 设计资源：管理字体、图片、图标等设计资源
- 自定义组件：开发满足特殊需求的组件
搭建流程
云搭平台采用标准化的五步工作流程：
text
创建应用 → UI还原 → 数据对接 → 事件配置 → 发布部署流程说明
| 步骤 | 主要内容 | 用户操作 |
|---|---|---|
| 创建应用 | 新建项目、选择模板 | 命名应用、设置画布尺寸 |
| UI还原 | 添加组件、布局设计 | 拖拽组件、调整样式 |
| 数据对接 | 配置数据源、数据转换 | 连接数据、设置过滤器 |
| 事件配置 | 设置交互行为 | 配置事件和动作 |
| 发布部署 | 保存、预览、导出 | 发布应用、分享链接 |
第一步：创建应用
目标：创建一个新的可视化应用项目
新建应用
点击工作台的创建应用按钮，您有两种选择：
创建方式对比
| 方式 | 适用场景 | 优势 |
|---|---|---|
| 空白创建 | 自定义需求、独特设计 | 完全自由，无限制 |
| 模板创建 | 快速搭建、标准场景 | 快速开始，减少工作量 |
创建应用
- 选择空白创建
- 输入应用名称：
我的第一个大屏 - 设置画布尺寸：
1920×1080（默认）
应用管理操作
在应用列表中，您可以执行以下操作：
- 预览：查看应用效果
- 编辑：进入设计器进行编辑
- 删除：删除不需要的应用
- 导出：导出为zip包，便于本地部署
第二步：UI还原
目标：通过拖拽组件完成大屏的视觉设计
1、了解设计器界面
设计器界面采用四区域布局：
text
┌─────────────────────────────────────────────────────────┐
│ 顶部工具栏 │
├─────────────┬─────────────────────┬─────────────────────┤
│ │ │ │
│ 左侧面板 │ │ 右侧面板 │
│ │ │ │
│ • 屏幕管理 │ │ • 属性配置 │
│ • 图层管理 │ 画布编辑区 │ • 数据配置 │
│ • 组件库 │ │ • 事件配置 │
│ • 资源库 │ │ │
│ │ │ │
└─────────────┴─────────────────────┴─────────────────────┘画布设置
支持自由设置不同分辨率
注意：超出画布范围的元素不会显示
2、添加组件到画布
平台提供9大类110多种组件，详细分类如下：
图表组件
| 组件类型 | 功能特点 | 适用场景 |
|---|---|---|
| 柱状图 | 支持圆角、主题宽度、标题、坐标轴、数值、图例等配置 | 数据对比分析 |
| 折线图 | 展示数据趋势变化 | 时间序列数据 |
| 面积图 | 展示数据变化范围 | 趋势分析 |
| 饼图 | 支持玫瑰图等变体 | 占比分析 |
文字组件
| 组件类型 | 功能特点 | 适用场景 |
|---|---|---|
| 渐变文本 | 支持多种渐变效果 | 标题展示 |
| 单行文本 | 基础文字显示 | 普通文本 |
| 多行文本 | 支持换行显示 | 长文本内容 |
| 指标卡 | 数字+单位，支持自适应 | 关键指标展示 |
其他组件
- 表格：数据列表展示
- 地图：地理数据可视化
- 图片：支持直接拖拽使用
- 自定义组件：满足特殊需求
3、调整组件位置和大小
组件操作
- 选择组件：点击画布上的组件
- 拖拽移动：按住组件拖拽到目标位置
- 调整大小：拖拽组件边缘的控制点
- 精确调整：在右侧属性面板输入具体数值
对齐和分布
- 对齐工具：选择多个组件进行对齐操作
- 分布工具：均匀分布多个组件
- 网格对齐：开启网格辅助对齐
4、配置组件样式
每个组件都包含三大配置模块：
- 属性：外观样式设置
- 数据：数据源配置
- 事件：交互行为设置
5、管理图层和屏幕
图层操作功能
| 操作 | 功能描述 | 使用场景 |
|---|---|---|
| 成组 | 将多个组件组合管理 | 复杂布局管理 |
| 锁定 | 避免误操作 | 已完成的模块保护 |
| 置顶 | 控制组件层级关系 | 层级调整 |
| 收藏 | 保存常用组件 | 提高效率 |
屏幕管理
- 多屏幕支持：一个应用可创建多个屏幕
- 应用场景：不同页面、弹窗等
第三步：数据对接
目标：将数据源连接到组件，实现数据可视化
1、数据源配置
平台支持多种数据源类型：
| 数据源类型 | 说明 | 适用场景 |
|---|---|---|
| 静态数据 | 手动输入的数据 | 测试、演示 |
| API接口 | 通过HTTP请求获取数据 | 实时数据 |
| 数据库 | 支持MySQL、PostgreSQL等数据库 | 历史数据 |
2、配置数据请求
创建数据请求
- 进入应用：在左侧面板点击"数据请求"标签
- 新建请求：点击"新建数据请求"按钮
- 设置基本信息：
- 输入数据请求名称
- 选择数据类型（静态数据/API接口/数据库）
- 进行具体配置
3、组件选择对应的数据请求
绑定数据到组件
- 选择组件：在画布上点击需要绑定数据的组件
- 进入数据配置：在右侧面板点击"数据"标签
- 选择数据源：
- 选择"数据请求"类型
- 从下拉列表中选择已创建的数据请求
4、数据处理
将返回数据转换为组件所需格式
- 打开过滤器：在组件数据配置中点击"编辑过滤器"
- 编写处理逻辑：使用JavaScript处理数据
- 预览效果：查看处理后的数据格式
- 保存配置：确认过滤器设置
第四步：事件配置
目标：为应用添加交互事件
1、了解事件和动作
支持的事件类型
| 事件类型 | 触发条件 | 应用场景 |
|---|---|---|
| 数据更新 | 数据变化时触发 | 实时数据展示 |
| 点击/双击 | 用户交互触发 | 用户操作响应 |
| 鼠标移入/移出 | 悬停效果 | 交互提示 |
| 自定义事件 | 复杂条件触发 | 高级交互 |
支持的动作类型
| 动作类型 | 功能描述 | 使用场景 |
|---|---|---|
| 跳转链接 | 打开外部链接 | 页面跳转 |
| 屏幕跳转 | 切换应用屏幕 | 页面切换 |
| 组件联动 | 组件间数据联动 | 数据关联 |
| 变量赋值 | 设置页面或全局变量 | 状态管理 |
| 数据请求 | 触发新的数据获取 | 数据刷新 |
| 全局提示 | 显示系统消息 | 用户反馈 |
2、选择触发组件
在画布上选择需要添加事件的组件
3、配置事件触发条件
设置事件类型
- 选择事件类型：从下拉列表中选择触发条件
- 配置触发参数：
- 点击事件：无需额外参数
- 数据更新：设置数据变化条件
- 鼠标事件：设置触发区域
常用事件配置
| 事件类型 | 配置要点 | 示例场景 |
|---|---|---|
| 点击事件 | 无需额外配置 | 点击按钮触发动作 |
| 数据更新 | 设置数据源和条件 | 数据变化时自动刷新 |
| 鼠标移入 | 设置触发区域 | 悬停显示详细信息 |
4、设置动作响应
选择动作类型
- 选择动作：从动作列表中选择响应行为
- 配置动作参数：
- 跳转链接：输入目标URL
- 屏幕跳转：选择目标屏幕
- 组件联动：选择联动组件
动作配置示例
| 动作类型 | 配置步骤 | 参数设置 |
|---|---|---|
| 跳转链接 | 选择动作→输入URL | https://example.com |
| 屏幕跳转 | 选择动作→选择屏幕 | 选择目标屏幕名称 |
| 组件联动 | 选择动作→选择组件 | 选择联动的组件 |
第五步：发布部署
目标：完成应用的最终发布，实现应用分享
预览应用
- 进入预览：点击画布右上角的"预览"按钮
- 生成链接：系统将生成预览链接，该链接即为应用发布后的访问地址
导出应用
- 导出为zip包：用于离线部署
快速实践：创建销售数据大屏
实践目标
我们将通过创建一个销售数据大屏来学习平台的核心功能，按照完整的操作流程进行：
准备工作 → 创建应用 → UI还原 → 数据对接 → 事件配置 → 发布部署总用时：约20分钟
准备步骤：创建工作空间和分组
步骤1：创建工作空间
- 登录云搭平台，进入工作台
- 点击左侧导航的 管理 按钮
- 输入工作空间名称：
快速开始案例，选择哪些用户可以有该空间权限
- 点击 确定 创建工作空间
步骤2：创建分组
- 在刚创建的工作空间中，点击 新建项目分组 按钮
- 输入分组名称：
案例
第一步：创建应用
- 点击工作台的 创建应用 按钮
- 选择 空白创建
- 输入应用名称：
销售数据大屏，点击确定
- 选择画布尺寸：
1920×1080（默认）
第二步：UI还原
2.1 添加标题
- 在左侧组件库中找到 文字 分类
- 点击 渐变文本 组件
- 组件会自动添加到画布中央
- 在右侧属性面板中修改文字内容为：
销售数据大屏 - 调整样式：
- 字体大小：
48px - 字体颜色：选择您喜欢的颜色
- 对齐方式：居中
- 位置：拖拽到画布顶部中
- 字体大小：
2.2 添加图表组件
- 在组件库中找到 图表 分类
- 点击 柱状图 组件
- 拖拽调整图表位置和大小
- 将图表放在标题下方
第三步：数据对接
3.1 创建数据请求
- 在左侧侧边栏中点击数据请求标签
- 点击新建数据请求按钮
- 输入数据请求名称：
产品销售数据 - 选择数据类型：静态数据
- 在数据内容区域输入以下JSON数据：
json
[
{"name": "产品A", "value": 120},
{"name": "产品B", "value": 200},
{"name": "产品C", "value": 150},
{"name": "产品D", "value": 80},
{"name": "产品E", "value": 90}
]
3.2 组件配置数据请求
- 在数据类型中选择数据请求
- 选择刚创建的
产品销售数据请求
3.4 编辑过滤器
- 点击编辑过滤器按钮
- 在过滤器编辑器中处理数据格式
- 确保数据格式符合柱状图组件的要求
- 点击确定保存过滤器配置
3.5 调整图表样式
在属性标签页中：
- 标题：
产品销售统计 - 颜色：选择您喜欢的主题色
- 数值显示：开启数值标签显示
第四步：事件配置
- 选中柱状图组件
- 点击右侧事件标签
- 点击添加事件
- 选择事件类型：点击
- 选择动作：组件联动
- 联动组件
销售数据大屏 - 动作
显隐切换
第五步：发布
5.1 保存应用
- 点击画布右上角的保存按钮
- 确认应用已成功保存
5.2 预览应用
点击画布右上角的预览按钮
系统将生成预览链接，该链接即为应用发布后的访问地址
在预览模式下测试交互功能：
- 点击柱状图的任意柱子
- 验证事件配置是否正常工作
常见问题解决
Q1：组件拖拽不生效？
A： 确保点击组件后拖拽，而不是点击空白区域
Q2：数据不显示？
A： 检查数据格式是否正确，确保JSON格式无误
Q3：预览效果与设计不一致？
A： 检查画布尺寸设置，确保与实际显示设备匹配
Q4：如何撤销操作？
A： 使用快捷键Ctrl+Z或点击工具栏的撤销按钮
Q5：组件添加后看不到怎么办？
A： 检查以下几点：
- 确认组件已添加到画布上（查看左侧图层列表）
- 检查组件是否被其他组件遮挡
- 尝试调整组件的位置和大小
使用技巧
版本管理
- 历史版本：查看和回退到指定时间的历史版本
效率提升技巧
| 技巧 | 说明 | 快捷键 |
|---|---|---|
| 组件对齐 | 选择多个组件进行对齐和排列 | - |
| 功能搜索 | 快速搜索所需组件 | Ctrl+F |
| 撤销操作 | 撤销上一步操作 | Ctrl+Z |
| 成组管理 | 合理使用成组功能管理复杂布局 | Ctrl+G |
下一步学习
完成以上步骤后，您已经掌握了平台的基本使用方法。建议按以下路径继续学习：
学习路径
实践练习
- 创建几个简单的应用进行练习
- 尝试不同类型的组件组合
深入探索
- 深入了解各种组件的配置选项
- 学习高级数据对接技巧
高级功能
- 掌握自定义组件开发
- 学习复杂事件配置
团队协作
- 利用工作空间进行团队协作
- 使用素材中心共享资源
深入学习资源
- 核心功能指南 - 深入了解平台功能，如平台采用的完整工作流程为"创建应用 → UI还原 → 数据对接 → 事件配置 → 发布部署"
- 组件使用手册 - 学习各种组件的详细配置，平台提供9大类110多种可视化组件
- 数据接入指南 - 掌握数据源连接方法，平台支持静态数据、API接口、数据库等多种数据源
- 事件交互教程 - 实现复杂的交互效果，支持多种事件类型和动作类型
恭喜！您已经完成了第一个大屏
您学会了什么？
- 创建和命名应用
- 添加文字和图表组件
- 配置静态数据
- 设置简单的交互效果
- 发布和分享应用
祝您使用愉快！