ECharts图表
为了拓展预置组件的能力,AstroCanvas集成了Echarts图表库。ECharts是当前使用最为广泛的开源图表库之一。
![](https://support.huaweicloud.com/usermanualcanvas-astrozero/public_sys-resources/note_3.0-zh-cn.png)
当前仅“Astro大屏应用专业版”实例,才提供Echarts图表组件。
以基础折线图为例,在大屏设计页面,从“全部组件 > ECharts图表”中,拖拽“基础折线图”组件至画布空白区域,如图1。
卡片
卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图表、卡片背景、卡片边框)和图表元素构成。
![](https://support.huaweicloud.com/usermanualcanvas-astrozero/zh-cn_image_0000001830230389.png)
- 卡片装饰:卡片装饰设置,可根据自身的业务需求选择不同的卡片样式。单击“清除样式”,可清除已设置的装饰样式。
- 标题
- 标题:是否显示标题。
- 内容:输入标题的内容。
- 字体:设置标题的字体、大小和颜色等。
- 对齐:设置标题的对齐方式,如左对齐、右对齐或居中。
- 标题背景色:设置标题的背景颜色。
- 背景
- 背景色:设置组件卡片的背景颜色。
- 边框:组件卡片边框设置,支持无边框、全边框和角边框三种样式。设置为全边框和角边框时,支持设置组件外圈边框的线型、圆角等。
- 样式:选择图片时,图片显示的样式,支持普通、居中、拉伸和平铺四种样式。
- 选择图片:使用本地的图片作为组件背景,支持新增目录和子目录,便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片,且每张图片不能超过50MB。
- 特效:组件是否高亮显示,支持默认展示和跳转到页面时展示。
- 边距:组件中图表距离整个组件四边(上、下、左、右)的距离(参见图2),默认为0,即铺满整个组件。
- 上边距:图表到组件边框顶部的距离。
- 右边距:图表到组件边框右侧的距离。
- 下边距:图表到组件边框底部的距离。
- 左边距:图表到组件边框左侧的距离。
Echarts组件设置
在Echarts组件设置中,可以设置ECharts组件的初始化代码块、实例化代码块、自定义事件和自定义动作。
![](https://support.huaweicloud.com/usermanualcanvas-astrozero/zh-cn_image_0000001830231429.png)
- 初始化代码块:初始化代码块输入框是一个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。
![](https://support.huaweicloud.com/usermanualcanvas-astrozero/zh-cn_image_0000001697822329.png)
引入第三方库
第三方脚本可以通过AstroCanvas平台“库”的能力引入。例如,引入https://www.makeapie.cn/echarts_content/xr1WrPou3b.html案例依赖的第三方脚本D3。
![](https://support.huaweicloud.com/usermanualcanvas-astrozero/zh-cn_image_0000001649703078.png)
下载第三方脚本到本地PC机,新建文件packageinfo.json,并在文件中写入如下内容:
{ "js": [ { "name": "d3js.org_d3.v4.min" } ] }
将脚本d3js.org_d3.v4.min.js和packageinfo.json打包为zip,在AstroCanvas界面
中上传。上传成功后,回到项目设置页面。在 中,新建资源,选择刚上传的D3库,并保存项目设置。![](https://support.huaweicloud.com/usermanualcanvas-astrozero/zh-cn_image_0000001815443176.png)
![](https://support.huaweicloud.com/usermanualcanvas-astrozero/zh-cn_image_0000001874660233.png)
成功引入D3库后,将demo提供的代码粘贴到echarts组件实例化代码块,即可看到渲染效果。
![](https://support.huaweicloud.com/usermanualcanvas-astrozero/zh-cn_image_0000001649553150.png)
数据
在数据中,配置ECharts组件的数据来源,更多介绍请参见数据接入。
与其他组件不同的是,ECharts组件在数据配置流程中没有字段映射,而是直接改变实例化代码块的内容。
![](https://support.huaweicloud.com/usermanualcanvas-astrozero/zh-cn_image_0000001850941225.png)
将左侧表格字段拖拽到右侧配置中的代码块高亮处,如图14。如果简单的拖拽列方法无法满足需求,可以在代码中用“$data”获取数据配置结果,以javascript代码处理逻辑,如图15。
交互
在交互中,配置Echarts组件与其他组件或页面之间的交互能力。交互设置更多介绍,请参见交互设置。与其他组件不同的是,echarts组件作为触发器的事件和作为响应器的动作时,可以在自定义事件和自定义动作中设置。更多介绍,请参见echarts组件自定义事件交互设置和echarts组件自定义动作交互设置。