组件库与样式

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

认识组件库

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

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

81 个组件按大分类如下：

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

搜索组件

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

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

把组件加到画布

有几种方法，效果一样：

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

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

样式页签

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

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

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

通用的几组：

边框与背景

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

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

悬浮弹层

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

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

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

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

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

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

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

工程里有多个页面时，菜单里还会多出「移动到页面」「复制到页面」，见多页面、画面与弹窗。

复制样式到别的组件

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

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

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

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

保存为组件（资产库）

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

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

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

资产库是跟账号走的，换一个工程也能用。画面也能整体存进资产库，见多页面、画面与弹窗。

多选与成组

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

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

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

下一步

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