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