---
title: 组件库与样式
source: https://vjmap.com/guide/visual/components.html
---

---
group: 搭建页面
description: 81 个内置组件怎么找、怎么加到画布，样式面板里的常用设置，以及复制样式、成组、保存到资产库。
---

# 组件库与样式

大屏上的每一块内容都是一个组件：标题、图表、表格、按钮、地图、三维场景、组态画板……本篇讲组件从哪里找、怎么加到画布，以及右侧「样式」页签里那些每个组件都有的通用设置。组件怎么接数据见[数据接入与绑定](./data.html)，点击、联动这类交互见[事件交互与多状态](./events.html)。

## 认识组件库

编辑器左下方是组件库，内置 81 个组件：

![左侧组件库：深色组件库下的「图表」分类](./images/components-library.webp)

1. **搜索框与三个库**：搜索框按名称找组件。下面切换「深色」「浅色」「资产库」：深色、浅色是同一批组件的两套预设配色，资产库是你自己保存的组件。
2. **显示方式**：大图卡片或小图网格；右边的箭头把组件库收起或展开到整列。
3. **大分类**：常用、全部，以及布局、地图控件组件、图表、地图、文本、图标、控件、媒体、组态、时间、三维场景、指标、小组件，下面的数字是组件个数。「常用」按你最近用过的排列。
4. **小分类**：大分类里再细分，例如图表下的表格、柱状图、饼图、折线图……
5. **标签**：按风格再筛一次，例如图表的「基础」「斑马」「排行」「环形」「平滑」「组合」「关系」。
6. **组件卡片**：鼠标移上去出现「+」，点一下就加到画布上。

81 个组件按大分类如下：

| 大分类 | 个数 | 包含的组件 |
|---|---|---|
| 布局 | 9 | 行布局、列布局、网格布局、流式行、固定面板、停靠布局、手风琴、侧边栏、视图容器，用法见[画布适配与布局](./layout.html) |
| 地图控件组件 | 12 | 坐标位置、比例尺、数据图例、缩放控件、指南针、视角+全屏、鹰眼、导出(图片/PDF)、测量工具、底图切换、CAD 图层、图层管理，配合二维地图使用 |
| 图表 | 25 | 明细表、斑马表、排行榜、轮播列表、排名列表；柱状图、饼图、环形图、折线图、平滑折线、面积图、双轴图、双轴堆叠图、散点图、雷达图、漏斗图、仪表盘、热力图、矩形树图、桑基图、关系图、水球图、词云、胶囊柱图、区域地图 |
| 地图 | 1 | 2D 地图（CAD 图纸和互联网地图），见[二维地图](./map.html) |
| 文本 | 3 | 大标题、副标题、段落 |
| 图标 | 1 | 图标 |
| 控件 | 14 | 按钮、搜索框、基础下拉菜单、列表、进度条、嵌入网页、横向菜单、纵向菜单、分页器、弹窗、选项卡、视图导航、数据循环容器、画面组件 |
| 媒体 | 4 | 图片、图形、轮播图、视频 |
| 组态 | 1 | 组态画板，见[组态](./scada.html) |
| 时间 | 5 | 时钟、计时器、日历、时间选择、时间轴 |
| 三维场景 | 1 | 三维场景，见[三维场景](./scene3d.html) |
| 指标 | 1 | 数字卡片 |
| 小组件 | 4 | 装饰边框、装饰、流程管道、翻牌器 |

地图、三维场景、组态画板这三个组件是「容器」：放到画布上以后双击进去，里面还有自己的图层、三维元素和图元库，分别在对应的文档里讲。

## 搜索组件

搜索框支持拼音和首字母。比如输入 `zzt`，就能找到「深色柱状图」：

![输入首字母「zzt」搜索组件](./images/components-search.webp)

1. **搜索框**：输入中文、全拼或首字母都可以，点右边的 × 清空。
2. **分类计数**：搜索时左侧每个分类的数字变成匹配个数，一眼能看出结果在哪个分类。
3. **搜索结果**：和平时一样，悬停点「+」添加。

## 把组件加到画布

有几种方法，效果一样：

- 在卡片上悬停，点出现的「+」，组件加到画布上。
- 双击卡片。
- 按住卡片拖到画布上，松手的位置就是组件的位置；拖到布局容器的格子里，就直接放进那个格子。
- 布局容器的空格子中间有个「+」，点它打开「选择组件」对话框，挑一个组件填进这个格子，见[画布适配与布局](./layout.html)。

加进来的组件会出现在左上「页面图层」里，图层越靠上，画面上越在前面。

::: tip 小技巧
新加的组件带着演示数据，先摆位置、调样式，最后再接真实数据也可以。
:::

## 样式页签

选中一个组件，右侧属性面板默认打开「样式」页签。每个组件的设置分成若干组，点组名展开或收起：

![选中深色柱状图后的属性面板](./images/components-style-groups.webp)

1. **四个页签**：「样式」调外观，「数据」接数据，「事件」配交互，「代码」写脚本。
2. **状态**：默认是「默认状态」，多状态组件在这里新建、切换状态，见[事件交互与多状态](./events.html)。
3. **组件名称和类型**：名称在图层里也会显示，可以改成「销售额柱图」这类好认的名字。
4. **保存为组件**：把当前组件连同样式存进资产库，见下文。
5. **删除**：删除这个组件。
6. **设置分组**：前面几组是所有组件都有的通用设置，后面是组件自己的设置（柱状图是「图表设置」「坐标轴」）。

各组都有一个「⋮」菜单，里面的「重置该组」把这一组恢复成默认值。

通用的几组：

| 分组 | 里面有什么 |
|---|---|
| 基本设置 | 不透明度、鼠标穿透（播放时鼠标点击穿过这个组件，落到下面的组件上） |
| 大小&位置 | 组件大小、组件位置、位置/尺寸单位（像素 / 百分比）、组件旋转（X、Y、Z 三个方向） |
| 响应式布局 | 本设备显示、横向布局、纵向布局，用来让组件随窗口贴边或拉伸，见[画布适配与布局](./layout.html) |
| 边框设置 | 边框颜色、宽度、圆角半径、样式（实线 / 虚线 / 点状 / 无边框） |
| 背景设置 | 背景颜色、背景图或视频（从素材库选或上传本地）、填充方式（拉伸 / 平铺 / 不填充）、背景模糊 |
| 组件封面 | 给组件设一张封面：无封面、截屏或上传图片 |
| 悬浮弹层 | 鼠标悬停或点击时在组件旁边弹出说明，见下文 |

### 边框与背景

边框和背景两组的组名右边有开关，打开以后组里的设置才生效。下图给柱状图加了蓝色边框、10 像素圆角和半透明深蓝背景：

![打开边框与背景两组](./images/components-border-bg.webp)

1. **边框设置**：开关打开后，设边框颜色、边框宽度（图中 2 像素）、圆角半径（10 像素）和边框样式。
2. **背景设置**：开关打开后，设背景颜色，或者放一张背景图、一段视频；图片可以拉伸、平铺或保持原样，背景模糊能做出毛玻璃效果。

### 悬浮弹层

悬浮弹层让任何组件在鼠标经过或点击时，在旁边弹出一段说明：

![悬浮弹层的设置](./images/components-popup.webp)

1. **启用**：打开悬浮弹层。
2. **触发方式**：「悬停」「点击」或「悬停+点击」。
3. **内容类型**：「文字提示」弹出一段文字；「画面(可交互)」弹出一个画面，里面可以放图表、按钮，鼠标移进去不会消失。画面怎么做见[多页面、画面与弹窗](./pages-windows.html)。
4. **提示文字**：内容类型为文字提示时显示的文字。
5. **外观**：背景颜色、文字颜色、文字大小、最大宽度和内边距。
6. **弹出位置与节奏**：弹出朝向（默认「自动」，挑空间够的一边）、和组件的间距、是否显示箭头，以及进入、离开的延时（默认各 150 毫秒）。

悬浮弹层只在预览和发布后的页面里出现，编辑时不弹。点顶部「预览」，鼠标移到柱状图上：

![预览时鼠标移到柱状图上](./images/components-tooltip.webp)

1. **悬浮弹层**：显示设置好的提示文字。
2. **图表自带的提示**：图表本身的数据提示，和悬浮弹层互不影响。

## 右键菜单：复制样式、成组

在画布或图层里右键一个组件，弹出组件菜单：

![组件的右键菜单](./images/components-context-menu.webp)

1. **重新加载、重命名、删除、移入待处理**：「移入待处理」把组件暂时挪出画布，放到图层面板的「待处理」页，需要时再加回原位。
2. **隐藏、锁定**：隐藏后画面上看不到；锁定后在画布上点不中，防止误拖。
3. **复制**：「复制组件」「复制交互」「复制样式」，以及「添加到资产库」。
4. **分组**：「成组」「移入到分组」「合并到分组」「取消分组」。
5. **图层与选择图层**：调整前后顺序；几个组件叠在一起时，用「选择图层」从鼠标下面的组件里精确选一个。

工程里有多个页面时，菜单里还会多出「移动到页面」「复制到页面」，见[多页面、画面与弹窗](./pages-windows.html)。

### 复制样式到别的组件

调好一个组件的外观后，可以把同样的外观套到别的组件上：

1. 右键调好的组件，选「复制」→「复制样式」。
2. 右键要改的组件，「复制」子菜单里多了「粘贴样式」，点它。

![复制样式后，右键别的组件出现「粘贴样式」](./images/components-paste-style.webp)

1. **复制样式**：记下当前组件的外观设置。
2. **粘贴样式**：把记下的外观套到这个组件上，比如让折线图也用上柱状图的边框和背景。

「复制交互」「粘贴交互」同理，用来把一个组件配好的事件复制给别的组件。

### 保存为组件（资产库）

经常要用的组件，比如调好配色的卡片、带公司标识的标题，可以存进资产库，以后在任何工程里都能直接拖出来：

1. 选中组件，点属性面板标题右边的星形按钮（或右键 →「复制」→「添加到资产库」）。
2. 在「保存为组件」对话框里填一个名字，点「OK」。
3. 组件库切到「资产库」页签，在「我的」里就能找到它。

![「保存为组件」对话框](./images/components-save-asset.webp)

1. **组件名称**：默认是组件当前的名字，改成好认的名字。
2. **OK**：保存到资产库。

资产库是跟账号走的，换一个工程也能用。画面也能整体存进资产库，见[多页面、画面与弹窗](./pages-windows.html)。

### 多选与成组

按住 `Ctrl` 点击可以选中多个组件，画布上方的选区工具栏显示「2 个组件」，可以一起对齐、移动、删除。再按 `Ctrl+G`（或右键「分组」→「成组」）把它们装进一个分组面板：

![两个图表成组后的分组面板](./images/components-group.webp)

1. **图层里的分组**：分组面板下面缩进列出里面的组件，可以展开、收起。
2. **选区工具栏**：显示当前选中的是「分组面板」，可以对齐、调层级、锁定、复制和删除，详见[编辑器界面](./editor.html)。
3. **分组面板**：整组一起移动、缩放。

分组面板本身也是一个组件，有自己的样式：可以加边框背景，「内部组件布局」可选静态、流式或栅格，「随画布增长」决定画布变大时是让里面的组件重新排列，还是整体按比例放大。双击分组面板进入里面编辑单个组件，按 `Esc` 退出；`Ctrl+Shift+G` 取消分组。

## 下一步

- [画布适配与布局](./layout.html)：让大屏在不同屏幕上铺满、不变形，用布局组件搭骨架。
- [数据接入与绑定](./data.html)：让组件显示你自己的数据。
- [事件交互与多状态](./events.html)：点击跳页、联动筛选、按数据切换状态。