检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
组件自定义事件实现 组件之间的交互，主要包括组件自定义事件和组件响应动作，本章节将为您介绍组件自定义事件的实现方式。自定义事件是指组件作为触发器，当用户操作组件（比如下拉框选中选项）时发出的事件。 注册自定义事件 自定义事件在{widget}.editor.js文件中的eventConfi
代码结构介绍 了解代码目录结构 目录文件详解 父主题： 自定义组件开发规范
卡片装饰：卡片装饰设置，可根据自身的业务需求选择不同的卡片样式。单击“清除样式”，可清除已设置的装饰样式。 标题：是否显示组件的标题（如图3中的服务采购）。设置为“显示”时，可自定义标题的如下属性。 内容：组件标题显示的文字内容。 字体：设置组件标题的字体样式、大小和颜色等。 对齐：标题相对于组件的对齐方式，如左对齐、居中和右对齐。
图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图6 玫瑰花饼图图形 颜色：设置图表中，图形的颜色。 统一配置 数据系列：是否显示该系列数据。如果不选中，会隐藏该组件中对应的系列数据。 南丁格尔图：是否使用南丁格尔图。
图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图6 矩形水位图图形 颜色：设置图表中，图形的颜色。 统一配置 是否展现：是否展示水位图开关。 横坐标(%)：水位图整体在组件位置中的横坐标百分比。 纵坐标(%)：水位图整体在组件位置中的纵坐标百分比。
数据系列轮播效果 图8 X轴数据轮播效果 间隔时间：设置图表的轮播时间间隔，不能大于24秒。 图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图9 多折线图图形 颜色：设置图表中图形的颜色。 统一配置 折线类型：设置图形中折线类型，包括平滑和不平滑。
图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图6 钻石水位图图形 颜色：设置图表中，图形的颜色。 统一配置 是否展现：是否展示水位图开关。 横坐标(%)：水位图整体在组件位置中的横坐标百分比。 纵坐标(%)：水位图整体在组件位置中的纵坐标百分比。
表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图4 渐变色饼图图形 颜色：设置组件中图表的图例颜色。 统一配置 数据系列：是否显示该系列数据。如果不选中，会隐藏该组件中对应的系列数据。 南丁格尔图：是否使用南丁格尔图。 内半径：设置饼图内半径的值，单位%。 外半径：设置饼图外半径的值，单位%。
组件核心渲染API，负责组件的实例化、数据调用及事件、动作的实际实现。 是 beforeDestroy(生命周期函数) 组件销毁回调事件，负责组件在销毁期间的内存释放逻辑实现，需要把组件绑定的一些dom事件及全局的引用销毁。 是 initContainer render中抽取的独立逻辑，初始化
多区域折线图 多区域折线图是线状图的一种，通过不同数据区域的对比，可对数据的变化做出更直观的展现。 在大屏设计页面，从“全部组件 > 图表”中，拖拽“多区域折线图”组件至画布空白区域，如图1。 图1 多区域折线图 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由
图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图6 水滴水位图图形 颜色：设置图表中，图形的颜色。 统一配置 是否展现：是否展示水位图开关。 横坐标(%)：水位图整体在组件位置中的横坐标百分比。 纵坐标(%)：水位图整体在组件位置中的纵坐标百分比。
如何基于页面级的全局变量实现组件交互中实现的场景是：用户在“下拉选择框”中选择某个告警状态时，通过配置的交互事件将告警状态赋值给全局变量，“多区域折线图”组件呈现的数据来源于封装了华为云Astro轻应用某API接口的数据集，将该接口的入参与全局变量绑定，则“多区域折线图”组件呈现的告警数据会随着全局变量值变化而变化。
referenceLine 图表的X、Y轴参考线配置。 metrics 指标-自定义 metrics 图表的指标配置，如显示/隐藏、内容和样式控制。 自定义分类 自定义分类时，可以使用分类的对象形式，对象中可以配置的字段如下表所示。 表2 自定义分类对象中的字段 字段 类型 示例 说明
如何在数据集或跳转事件动作中设置变量 在组件的数据集或组件的跳转事件动作中，是支持设置变量的。 在数据集或事件动作中设置变量 在大屏编辑页面上方，单击，新建并设置页面级全局变量。 例如，新增全局变量“url”，设置变量说明为“数据详情页面URL”。 图1 新增全局变量 从“全部组件
echarts组件作为响应器的动作时，可以在自定义动作中设置。 自定义动作交互设置 选中某个echarts组件，单击。 在自定义动作中，单击“新增自定义动作”，修改动作名称为“设置数据高亮”。 图1 新建自定义动作 在动作实现中，输入如下代码，调用echarts提供的动作API。 echartsInst
组件除了可以作为事件的触发器，还可以处理事件的响应动作，在响应动作中选择组件响应，就可以选择对应的组件响应动作，数据刷新、获取当前输入框值等都是组件的自定义响应动作。本章节将向您介绍，如何实现组件响应动作。 注册动作 在响应动作中，单击“响应动作”，在下拉框中选择对应的响应动作。 图1
beforeDestroy()函数：组件销毁回调事件，负责组件在销毁期间的内存释放逻辑实现，需要把组件绑定的一些dom事件及全局的引用销毁。 /** * 组件销毁回调事件，负责组件在销毁期间的内存释放逻辑实现，需要把组件绑定的一些dom事件及全局的引用销毁 */ beforeDestroy()
组件配置项（Config配置） 配置项总览 通用配置 input textarea input-number slider tab switch radio checkbox colorpicker time select list 父主题： 自定义组件开发规范
目录文件详解 i18n.json packageinfo.json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题： 代码结构介绍
”页签下进行展示。 操作 单击操作列中的，可上传组件图标。 单击操作列中的，可删除上传的组件包。 上传成功后，返回我的组件页面，可查看到已上传的组件。 图2 查看已上传的BarGraph组件 在大屏页面中使用自定义组件。 参考使用空白画布新建页面中操作，新建一个大屏页面。 在大屏页面的“全部组件
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
