认识组件
认识组件
组件是可视化大屏的重要的组成部分，一个酷炫的大屏都是由各种形态的组件组成的。本文将帮助您了解组件的组成及使用方法。
组件分类
内置组件：在可视化设计器的左侧组件面板内，包含以下几大类：
图表组件：柱状图、折线图、饼图等常用统计图表。
地图组件：2D、3D 地图等空间数据展示。
文字组件：除了标题、数字卡片等文字展示的组件外，还内置分页列表、轮播列表等展示列表数据的组件。
装饰组件：边框、背景、装饰线等美化元素。
素材组件：内置二十多类图标，支持自定义上传图片、视频素材。
区块组件：多个组件封装为一个整体的黑盒工具，可以复用业务逻辑，提高开发效率。通过封装组件样式、布局、数据配置等，对外提供统一的接口。
收藏组件：用户在使用过程中收藏的组件，方便快速调用和重复使用。可以收藏任何类型的组件，包括内置组件、区块组件等。
自定义组件：用户根据特定需求自主开发的组件，可以实现个性化的可视化效果和交互功能。支持通过组件开发工具进行开发和调试。
组组件：将多个组件组合在一起，形成一个整体的组组件，可以实现复杂的布局和交互效果。
画布中的组件
添加组件：从左侧组件面板拖拽组件添加到画布中。
删除组件：在画布中选中组件，
点击工具栏中
按钮进行删除。使用键盘
Delete/Dackspace删除组件。使用右键菜单
删除组件。
调整组件大小及位置：
在画布中可拖拽组件改变组件的位置。选中组件后，拖拽组件的八个手柄可改变组件的大小。
通过组件基本属性中的组件尺寸及组件位置进行精确调整。
可以使用键盘 PgUp【↑】、PgDn【↓】、Home【←】、End【→】 键进行微调。
组件层级：默认后添加的组件层级越高。层级越高的组件会遮挡层级低的组件。
通过图层面板拖拽调整组件的层级顺序。
使用工具栏中的
层级菜单进行组件层级调整。使用右键菜单中的置顶、置底、上移一层、下移一层进行组件层级调整。
组件锁定：使用图层或工具栏中的
进行组件锁定。锁定组件后将禁用组件在画布中的所有交互操作，包括选中、拖拽、缩放等，可以有效防止组件被意外修改。解锁时从图层面板进行解锁。
组件隐藏：使用图层或工具栏中的
进行组件显示隐藏。组件隐藏后在画布中看不到。可以从图层面板进行显示操作。
组件配置
一个基本的组件，属性用于描述组件的外貌，数据用于描述组件的内容，交互用于描述组件的行为。
组件属性
组件基本属性包含两大类配置：基础信息配置和盒样式配置。基础信息配置用于设置组件的标题、尺寸、位置等基本信息；盒样式配置提供丰富的外观样式设置，包括模糊、透明度、旋转、边框、背景、阴影等视觉效果，让组件展示更加美观。
组件数据
数据配置是组件获取和处理数据的核心功能，支持多种数据源接入、数据处理和性能优化，确保组件能够高效地展示业务数据。
数据接入方式
静态数据：支持表格和 JSON 两种编辑方式。
数据资源：支持 API、SQL 数据资源。
数据处理能力
数据优化：支持数据排序、过滤和聚合函数。
数据映射：将数据映射为视觉元素，通过视觉元素来表现数据。例如：在图表中用图形的尺寸来表示数据的大小、用不同的颜色或形状来表示数据的分类。
条件映射：条件映射是一个强大的样式控制工具，能够根据特定条件自动应用不同的样式设置。通过条件映射，用户可以实现数据可视化的精细化样式控制，使图表展示更加丰富和个性化。
操作指南：以饼图为例
在画布中添加一个饼图组件。
选中组件，右侧面板切换到数据面板。
选择数据来源为
超市-订单[示例]。从字段列表中将字段拖到数据匹配中，注意：标记为必填的匹配框中至少添加一个字段。
可以使用字段的更多操作进行聚合、排序、删除字段等操作。
组件交互
交互配置是组件间实现动态联动的核心功能，通过事件触发、数据响应机制，让组件突破独立展示的限制，实现丰富的交互体验。例如：点击标题控制显隐、切换按钮更新数据、点击地图联动详情、选择时间筛选数据等场景。
实现原理：组件交互基于"发布-订阅"模式，由触发组件（发布者）和响应组件（订阅者）组成。触发组件将交互数据存入变量，响应组件监听该变量变化并自动更新展示，从而实现组件间的数据联动。
下面以饼图与数字卡片为例，饼图展示产品类别数据，点击饼图的某个扇区，数据卡片查询该产品类别下的销售额。
添加饼图组件，数据资源使用
超市-订单[示例]，数据匹配配置子类别和数量。
添加数字卡片组件，数据资源使用
超市-订单[示例]，数据匹配配置销售额。
在
大屏属性→变量池中添加变量type。选中饼图，在交互面板中
扇区选中事件添加字段为子类别，绑定变量type,并且启用事件。选中数字卡片，在交互面板中
数据响应中配置变量type，绑定到字段子类别。保存大屏。
预览查看效果：点击饼图的扇区，数字卡片查询对应子类别的销售额。
节点编程中的组件
在节点编程中组件统称为组件节点，组件节点由事件和动作组成。
事件
事件是节点编程中与组件进行交互的重要机制。当特定条件被触发时，事件会被执行并可能抛出相关数据供后续节点使用。
根据事件的触发机制分为以下几类：
由用户触发的事件：例如饼图的
扇区选中事件、图例切换事件等，需要用户操作触发。生命周期事件：例如
页面加载完成，由大屏内部自动触发。数据相关事件：例如
当数据请求发送前、当数据请求发送后等，由组件加载数据时内部自动触发。状态事件：例如
监听交互变量变化事件、临时变量值改变后等，由状态发生变化时触发。定时事件：例如
定时定点启动、定时循环启动等，由时间触发。键盘事件：例如
键盘按下、键盘抬起等，由键盘触发。
事件触发后通常会抛出相关的参数数据，这些数据可以在后续的转换器或触发器中使用，也可以为下游动作提供数据。
动作
动作是组件可以执行的具体操作，用于响应事件并实现特定的功能。
根据组件的特性不同可以分为以下几类：
数据相关动作：例如
请求数据接口、导入数据等，用于对数据进行处理。样式相关动作：例如
更新组件配置、高亮图形等，用于对组件进行样式设置。显示控制：例如
显示/隐藏，用于对组件进行显示隐藏。变量操作类：例如
设置交互变量、设置临时变量，用于对变量赋值。
动作由事件触发，组件会根据动作类型和参数配置来执行相应的功能。动作的执行可能会：
改变组件的数据状态（如重新请求或更新数据）。
修改组件的显示效果（如显示/隐藏、样式更新）。
触发组件的交互行为（如高亮、上卷下钻）。
更新全局变量（如设置交互变量、临时变量）。
通过合理配置动作参数，可以实现组件间的联动、数据的动态更新以及复杂的交互效果。