检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
如何使用高级表格的后台筛选功能 操作场景 后台排序必须和全局变量一起配合使用。后台分页、后台排序和后台筛选同时启用时,在添加转换器时,需要先筛选、再排序、最后分页,如图1。 图1 转换器添加顺序 后台筛选 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。
行智慧决策,提升城市运行效率和居民生活质量。 图1 S市智慧城市大脑 工业制造 在工业制造领域,数据可视化大屏可以展示生产线实时运行状态、设备故障警报、生产效率等数据,帮助工厂管理者实现生产过程的全面监控与分析,及时发现并解决生产中的问题,提高生产效率和产品质量。 图2 现场作业看板
AstroZero API数据集 通过调用AstroZero的接口,来获取数据。 前提条件 连接的数据源已创建,如何创建请参见AstroZero数据源。 数据集所使用的转换器已创建,如何创建请参见新建转换器。 AstroCanvas预置了转换器供用户直接使用,用于把调用API接口
页面开发流程 在AstroCanvas可视化开发页面,通过拖拽组件、设置页面布局、对接业务数据等,即可构建AstroCanvas大屏&PC端/移动端页面,具体流程如图5所示。 图5 页面开发流程 页面设置 配置页面屏幕大小、适应方式、背景颜色或背景图片。更多介绍,请参见如何进行设置页面。
如何自定义动作 操作场景 在配置组件交互时,可以通过编写代码实现自定义交互动作,从而实现对应的业务需求。 图1 自定义动作 自定义动作参数说明 在自定义动作中,支持直接使用的参数如下: eventParam:组件传递出的参数。 以日期选择器组件为例,介绍如何获取eventParam。
echarts组件自定义动作交互设置 echarts组件作为响应器的动作时,可以在自定义动作中设置。 自定义动作交互设置 选中某个echarts组件,单击。 在自定义动作中,单击“新增自定义动作”,修改动作名称为“设置数据高亮”。 图1 新建自定义动作 在动作实现中,输入如下代码,调用echarts提供的动作API。
params); }; 参考上传自定义组件中操作,将组件包“SelectWidget.zip”上传到组件库,场景选择“大屏&PC端”或“移动端”。 测试组件。 在页面中,拖入该组件。 图2 拖入组件 在组件上方单击,配置组件交互事件。 单击“交互事件”,选择“选中值发生变化时触
页面数据来源介绍 组件是大屏应用页面的组成元素,配置页面数据即为配置组件数据。AstroCanvas中,页面组件的数据来源包括非数据源(包括桥接器预置、静态数据和数据集等)和数据源(包括关系型数据库、Roma连接器、AstroZero和HTTP连接器等)。选中组件,单击组件上方的,即可配置组件在页面呈现数据的来源。
其他数据源 配置组件数据时,支持直接创建关系型数据库、ROMA连接器、DLI、DWS、AstroZero、AstroZero API、HTTP连接器和Prometheus数据源作为组件的数据来源。 操作场景 使用在数据集中配置的数据源前,需要提前在数据中心创建各种类型数据源,配置
组件间交互 操作场景 组件间交互是指在同一页面中,不同组件之间进行的交互事件。组件和组件之间可互为触发器和响应器,根据用户所定义的事件不同,可定义组件行为、赋值全局变量以及响应自定义动作。 本章节以在同一区域中,添加多个组件,使用tab来切换不同tab页签下需要呈现的组件为例,向您介绍如何设置组件间的交互能力。
复制项目版本 项目创建完成后,支持将项目中发布的版本复制到其他工作空间。 复制项目版本 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在项目列表中,将鼠标放在对应的项目上,单击。 选择对应的工作空间和项目版本,单击“确定”。 图1 选择工作空间和项目版本
{widget}.css 文件介绍 {widget}.css为组件的样式文件,在该文件中编写组件的CSS样式。 AstroCanvas的组件未进行打包编译,CSS样式可能存在互相影响的风险。因为,CSS选择器务必要加上组件id,通过组件id减少互相影响的可能。 文件示例 #EchartsWidgetTemplate
echarts组件自定义事件交互设置 echarts组件作为触发器的事件时,可以在自定义事件中设置。 自定义事件交互设置 在大屏设计页面,从Echarts图表中拖拽一个折线图堆叠组件到画布中。 图1 拖拽折线图堆叠组件到画布中 选中折线图堆叠组件,单击。 在自定义事件中,单击“新
列显示效果 表格导出:是否开启表格导出功能。开启表格导出后,可以设置“悬浮显示”、“图标色”和“图标选中色”。 悬浮显示:开启悬浮显示后,鼠标移动到表格组件上时,才会显示对应的按钮。 图标色:设置按钮的图标颜色。 图标选中色:设置选中按钮时,按钮图标的颜色。 配置 在配置中,设置组件的背景色、表格行数、表头和单元格等。
组件自定义事件实现 组件之间的交互,主要包括组件自定义事件和组件响应动作,本章节将为您介绍组件自定义事件的实现方式。自定义事件是指组件作为触发器,当用户操作组件(比如下拉框选中选项)时发出的事件。 注册自定义事件 自定义事件在{widget}.editor.js文件中的event
如何在数据集或跳转事件动作中设置变量 在组件的数据集或组件的跳转事件动作中,是支持设置变量的。 在数据集或事件动作中设置变量 在大屏编辑页面上方,单击,新建并设置页面级全局变量。 例如,新增全局变量“url”,设置变量说明为“数据详情页面URL”。 图1 新增全局变量 从“全部组件
图4 列显示效果 表格导出:是否开启表格导出功能。开启表格导出后,可以设置“悬浮显示”、“图标色”和“图标选中色”。 悬浮显示:开启后,鼠标移动到表格组件上时,才会显示对应的按钮。 图标色:设置按钮的图标颜色。 图标选中色:设置选中按钮时,按钮图标的颜色。 配置 在配置中,设置组件的全局样式、表头设置、行、序列号等。
通过参数控制响应动作 在设置组件交互动作时,可以通过选择事件参数、全局变量或固定值,明确有哪些类型的参数可以传递。 通过参数控制响应动作 参考创建大屏&PC端项目中操作,新建一个大屏项目。 参考使用空白画布新建页面中操作,新建一个空白页面,如页面一,并拖入实心圆饼图和下拉选择框。
桥接器模板 桥接器为连接前台页面和后台数据的连接器。在进行前台页面开发时,经常要调用后台数据,例如购物车中用户的ID,订单编号,商品信息等,这时需要通过桥接器动态调用后台接口获取后台数据。通过AstroCanvas预置的桥接器模板,您可以自定义桥接器。自定义桥接器时,需要先下载桥
组件响应动作实现 组件除了可以作为事件的触发器,还可以处理事件的响应动作,在响应动作中选择组件响应,就可以选择对应的组件响应动作,数据刷新、获取当前输入框值等都是组件的自定义响应动作。本章节将向您介绍,如何实现组件响应动作。 注册动作 在响应动作中,单击“响应动作”,在下拉框中选择对应的响应动作。