华为云首页用户手册

ASTRO大屏应用 ASTROCANVAS-ECharts图表:Echarts组件设置

ASTRO大屏应用 ASTROCANVAS-ECharts图表:Echarts组件设置

时间：2024-11-06 21:53:39

ASTRO大屏应用 ASTROCANVAS

Echarts组件设置

在Echarts组件设置中，可以设置ECharts组件的初始化代码块、实例化代码块、自定义事件和自定义动作。

图4 代码设置

初始化代码块：初始化代码块输入框是一个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组件自定义动作交互设置。

上一篇：ASTRO大屏应用 ASTROCANVAS-ECharts图表:数据

下一篇：ASTRO大屏应用 ASTROCANVAS-ECharts图表:数据

新客秒杀 2核2G 3M L实例

68元/年

普惠上云领千元上云礼券

立即前往

企业专享 X实例 4核8G 5M

888元/年

热门域名 1元随心购

1元/年起

ASTRO大屏应用 ASTROCANVAS-ECharts图表:Echarts组件设置

意见反馈

0/200

提交成功！非常感谢您的反馈，我们会继续努力做到更好反馈提交失败！请稍后重试！

推荐文章

解决方案
相关专题