ECharts图表
为了拓展预置组件的能力，AstroCanvas集成了Echarts图表库。ECharts是当前使用最为广泛的开源图表库之一。
当前仅“Astro大屏应用专业版”实例，才提供Echarts图表组件。
以基础折线图为例，在大屏设计页面，从“全部组件 > ECharts图表”中，拖拽“基础折线图”组件至画布空白区域，如图1。
卡片
卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。
- 卡片装饰：卡片装饰设置，可根据自身的业务需求选择不同的卡片样式。单击“清除样式”，可清除已设置的装饰样式。
- 标题
- 标题：是否显示标题。
- 内容：输入标题的内容。
- 字体：设置标题的字体、大小和颜色等。
- 对齐：设置标题的对齐方式，如左对齐、右对齐或居中。
- 标题背景色：设置标题的背景颜色。
- 背景
- 背景色：设置组件卡片的背景颜色。
- 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。
- 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。
- 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。
- 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。
- 边距：组件中图表距离整个组件四边（上、下、左、右）的距离（参见图2），默认为0，即铺满整个组件。
- 上边距：图表到组件边框顶部的距离。
- 右边距：图表到组件边框右侧的距离。
- 下边距：图表到组件边框底部的距离。
- 左边距：图表到组件边框左侧的距离。
Echarts组件设置
在Echarts组件设置中，可以设置ECharts组件的初始化代码块、实例化代码块、自定义事件和自定义动作。
- 初始化代码块：初始化代码块输入框是一个javascript的执行环境，该执行环境的目的是调用echarts的init方法创建实例，此处可配置初始化相关的操作，包括echarts的主题等。
图5 初始化代码块
- 单击“参数说明”，可查看初始化代码块的参数说明。
- 单击
，可复制初始化代码。 - 单击
，可最大化初始化代码块页面。
- 实例化代码块：和初始化代码块类似，实例化代码块的目的是构造echarts setOption所需要的option对象（setOption对象平台会自动执行）。AstroCanvas提供了上百种echarts组件，本质上是不同的实例化代码，这些实例化代码来自echarts官网的demo代码，例如https://echarts.apache.org/examples/zh/editor.html?c=line-simple。如果这些demo不满足您的需求，还可以在echarts开源社区选择合适的demo。
在实例化代码块中，还可以实现异步加载和引入第三方库，详情请参见异步加载和引入第三方库。
图6 实例化代码块
- 单击“参数说明”，可查看实例化代码块的参数说明。
- 单击
，可复制实例化代码。 - 单击
，可最大化实例化代码块页面。
- 自定义事件：echarts组件支持自定义扩展事件和交互，来扩展组件在系统中的交互能力。单击“新增自定义事件”，可新增事件。在事件实现中，编辑事件实现的代码，为echarts实例或组件实例的某个动作回调绑定发送事件的方法triggerCurrentEvent。单击“新增字段”，可定义发送事件时携带的参数字段。如何为自定义事件添加交互，请参见echarts组件自定义事件交互设置。
图7 自定义事件
- 自定义动作：echarts组件支持自定义动作，来响应事件。单击“新增自定义动作”，可新增动作。在动作实现中，编写触发动作的执行逻辑。入参的echartsInst可以使用echarts的API，widgetInst可以使用AstroCanvas组件通用的API。单击“新增参数”，可以定义触发动作时入参字段。如何为自定义动作添加交互，请参见echarts组件自定义动作交互设置。
异步加载
对于部分配置项，初始化echarts之前需要异步加载文件。例如“地图（SVG）”组件需要先加载svg文件。这里需要在异步加载动作的完成回调函数中，手动调用echarts的setOption。
引入第三方库
第三方脚本可以通过AstroCanvas平台“库”的能力引入。例如，引入https://www.makeapie.cn/echarts_content/xr1WrPou3b.html案例依赖的第三方脚本D3。
下载第三方脚本到本地PC机，新建文件packageinfo.json，并在文件中写入如下内容：
{
"js": [
{
"name": "d3js.org_d3.v4.min"
}
]
}
将脚本d3js.org_d3.v4.min.js和packageinfo.json打包为zip，在AstroCanvas界面中上传。上传成功后，回到项目设置页面。在中，新建资源，选择刚上传的D3库，并保存项目设置。
成功引入D3库后，将demo提供的代码粘贴到echarts组件实例化代码块，即可看到渲染效果。
数据
在数据中，配置ECharts组件的数据来源，更多介绍请参见数据接入。
与其他组件不同的是，ECharts组件在数据配置流程中没有字段映射，而是直接改变实例化代码块的内容。
将左侧表格字段拖拽到右侧配置中的代码块高亮处，如图14。如果简单的拖拽列方法无法满足需求，可以在代码中用“$data”获取数据配置结果，以javascript代码处理逻辑，如图15。
交互
在交互中，配置Echarts组件与其他组件或页面之间的交互能力。交互设置更多介绍，请参见交互设置。与其他组件不同的是，echarts组件作为触发器的事件和作为响应器的动作时，可以在自定义事件和自定义动作中设置。更多介绍，请参见echarts组件自定义事件交互设置和echarts组件自定义动作交互设置。
