检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
eventConfig 字段介绍 eventConfig为组件事件配置项,用于定义组件事件暴露的变量结构,以及事件和对外透传变量的业务含义。eventConfig配置好后,在组件配置交互时可以将事件的itemVal传递给页面全局变量中,供其他组件使用。 典型示例 典型的eventConfig示例如下:
即为配置组件数据。在华为云Astro大屏应用中,页面组件的数据来源包括非数据源(包括桥接器预置、静态数据和数据集等)和数据源(包括关系型数据库、Roma连接器、AstroZero和HTTP连接器等)。选中组件,单击组件上方的,即可配置组件在页面呈现数据的来源。 图1 为组件配置数据
penLayers添加各类图层。 在大屏设计页面,从“地图”中,拖拽“OpenLayers地图”组件至画布空白区域,如图1。 图1 OpenLayers地图 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图表、卡片背景、卡片边框)和图表元素构成。
其他数据源 配置组件数据时,支持直接创建关系型数据库、ROMA连接器、DLI、DWS、华为云Astro轻应用、华为云Astro轻应用API、HTTP连接器和Prometheus数据源作为组件的数据来源。 操作场景 使用在数据集中配置的数据源前,需要提前在数据中心创建各种类型数据源
的,例如图表联动、自定义字段等功能。如何使用全局变量,可参考如何基于页面级的全局变量实现组件交互~如何通过全局变量,实现组件数据的动态变化。本示例不做配置。 在组件预览中,选择要展示的表字段,即从左边栏中拖入到右边栏中,单击“保存”。 图5 拖拽字段到坐标轴 表格字段:展示创建P
} ] } 文件字段说明 widegtApi > name:组件的名称,如“EchartsWidgetTemplate”。 widgetDescription:组件的描述信息。 authorName: :组件的作者信息。 width:在绝对布局高级页面中,添加该组件时的默认宽度
特效:组件是否高亮显示,支持默认展示和跳转到页面时展示。 边距:组件中图表距离整个组件四边(上、下、左、右)的距离(参见图2),默认为0,即铺满整个组件。 参考模板:系统预置的数据标记柱图模板。 图表背景:图表的背景颜色。 颜色设置:设置图表背景颜色。 圆角:图表背景是否为圆角。 圆角半径:四边圆角时的圆角
在配置中,设置组件的全局样式、表头设置、行、序列号等。 图4 基础表格配置 全局样式 背景色:设置表格的背景颜色。 表格行数:当前页显示多少行数据。 边框:设置表格的边框样式。 表头设置 溢出文本:设置表格中超长文本的显示样式,如显示为省略号和换行显示。 表头对齐方式:设置表头的对齐方式,如左对齐、居中或右对齐。
数。 边框:设置表格的边框样式。 表头设置 溢出文本:设置表格中超长文本的显示样式,如显示为省略号和换行显示。 表头对齐方式:设置表头的对齐方式,如左对齐、居中或右对齐。所有列的表头对齐方式同步修改。 表头行高占比(%):设置表头行高的占比。 表头背景色:设置表头的背景颜色,所有列的表头背景色同步修改。
图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图7 通用表格图形 统一配置 表头行高占比(%):设置表头的行高占比。 背景色:设置表头背景色。 对齐方式:设置表头对齐方式。 表头字体:设置表头的字体、大小和颜色等。 内容字体:设置表格内容的字体、大小和颜色等。
边框:设置表格的边框样式。 表头设置 溢出文本:设置表格中超长文本的显示样式,如显示为省略号和换行显示。 表头对齐方式:设置表头的对齐方式,如左对齐、居中或右对齐。 表头行高占比(%):设置表头行高的占比。 表头背景色:设置表头的背景颜色,所有列的表头背景色同步修改。 表头字体:设置表头字体,所有列的表头字体同步修改。
动作:创建HTTP连接器时,定义的执行动作。 参数:执行动作在连接器中,定义的参数。字段类型为“表达式”时,在字段值中单击鼠标,可进入表达式设置页面。在表达式设置页面,可从下方左侧面板选择字段名、函数或者直接输入函数,如图2。 图2 按需设置表达式 测试API接口:用于测试该接口,单击“测试API接口”,“样例报文”中会显示输出结果。
仪表盘 仪表盘是指通过仪表的特殊展示方式,对数据进行展示。 在大屏设计页面,从“全部组件 > 仪表盘”中,拖拽“仪表盘”组件至画布空白区域,如图1。 图1 仪表盘 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图表、卡片背景、卡片边框)和图表元素构成。
图16 选择本地部署的页面 添加可视化应用。 在项目列表中,单击“导入项目包”。 选择2中下载的可视化应用本地部署包(AstroCanvas_项目名_随机编码.zip)。 在项目列表中,可查看到项目已成功导入。 图17 查看导入的项目 配置数据源密码和加密字段。 在运行环境中导入可视
域名:请求的Host地址,不需要带上“http://”或“https://”协议头,同时也不需要“/”结尾。 域名参数:配置域名参数,包含字段名称、默认值和字段描述。连接器配置中,当域名中配置“{字段名}”参数时,才会显示该参数。 图6 配置域名参数 接口鉴权方式:设置接口鉴权方式,支持API鉴权、AK/SK、API
热力图是柱状图的一种,通过对色块着色来显示数据的统计图表。 在大屏设计页面,从“全部组件 > 图表”中,拖拽“热力图”组件至画布空白区域,如图1。 图1 热力图 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图表、卡片背景、卡片边框)和图表元素构成。 图3 热力图卡片
在大屏设计页面,从“全部组件 > 图表”中,拖拽“气泡图”组件至画布空白区域,如图1。 图1 气泡图 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图表、卡片背景、卡片边框)和图表元素构成。 图3 气泡图卡片 卡片装饰:卡
能以下划线开头或结尾。 域名:数据库所在的域名。 端口:数据库端口,取值范围为0~65535。 用户名:登录数据库的用户名。 密码:数据库用户密码。 数据库名称:数据库实例名称。 描述:新建数据源的描述信息。 单击“连接测试”,显示“连接成功”,表示DWS数据源可以调通。 单击“保存”,完成数据源的创建。
装饰图案是装饰组件的一种,用于为可视化应用添加多种类型的图案元素,能够使可视化应用展示更加美观。 在大屏设计页面,从“全部组件 > 装饰”中,拖拽“装饰图案2”组件至画布空白区域,如图1。 图1 装饰图案2 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片
的,例如图表联动、自定义字段等功能。如何使用全局变量,可参考如何基于页面级的全局变量实现组件交互~如何通过全局变量,实现组件数据的动态变化。本示例不做配置。 在组件预览中,选择要展示的表字段,即从左边栏中拖入到右边栏中,单击“保存”。 图6 拖拽字段到坐标轴 表格字段:展示创建数据集中,获取的数据。