组件入门

什么是组件？

组件（即Widget）是可复用的页面组成元素，一个页面由一个或多个Widget拼装而成。如果将一个页面看成拼图游戏的完整图案，那么Widget相当于拼图的每一小块。

Widget的运行依赖Library，如果缺少相应的Library，则Widget不能正常运行。如果页面要使用前端框架或组件库，例如流行的Vue、Bootstrap、ElementUI等，需要将其制作成Library资产，然后上传到环境中使用。

AstroCanvas中组件

介绍AstroCanvas支持的组件类型，以及每个类型下所包含的具体组件，帮助您快速了解各组件的位置分类，更加高效的开发可视化应用。目前AstroCanvas中支持如下类型的组件，各组件详情介绍请参见组件介绍。当预置组件不满足需求时，还可以自定义组件并上传到AstroCanvas中使用，详情请参见自定义组件说明。

当前仅“Astro大屏应用专业版”实例，才提供Echarts图表组件。

图2 AstroCanvas中组件

组件通用设置

在AstroCanvas某个可视化页面中，单击画布中的某一个组件，组件上方会出现配置项面板，如图3。AstroCanvas中组件的配置项菜单分为卡片、指标、图形、图例、提示、参考线和坐标轴七大类（不同的组件展示有所不同，请以实际展示的为准）。

图3 组件配置项面板

图4 组件七大分类设置效果

• 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。
• 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。
• 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。
• 提示（悬浮提示）主要用于展示可视化图表组件，在具体维度节点的具体指标展示。
• 指标是指可视化组件中，对除可视化图形之外的具体补充，即主要以文字和数字的表现形式，为可视化组件提供具体数值的参考。
• 坐标轴是指对图表组件，进行坐标系相关样式、颜色、位置和行为的设置。
• 参考线是指为图表组件添加可视化的参考标准，为图表中数据提供具体的参考依据。

组件数据来源

组件是大屏页面的组成元素，配置页面数据即为配置组件数据。选中组件，单击组件上方的，可配置组件在页面呈现数据的来源，更多介绍请参见数据接入。

图5 配置组件数据

组件交互

AstroCanvas为组件设计了事件-动作机制实现组件与组件、组件与页面之间的交互，更多介绍请参见交互设置。

图6 组件交互

组件的主题色

通过设置主题，可一键改变装饰卡片元素、图表配色和字体颜色等视觉效果。AstroCanvas提供了追光、红色记忆等主题颜色，供您选择。

图7 主题颜色（大屏&PC端）

图8 主题颜色（移动端）