检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
具体流程如图5所示。 图5 页面开发流程 页面设置 配置页面屏幕大小、适应方式、背景颜色或背景图片。更多介绍,请参见如何进行设置页面。 构思布局 根据大屏高保真设计或构思,划分基本布局,并拖拽对应的组件到画布中。如何添加组件到画布中,请参见组件管理。 组件设置 为组件对接业务数据
input-number 配置项说明 表1 input-number配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "input-number" 配置项类型。 value String 否 value: 1 默认值。 name String 是
colorpicker 配置项说明 表1 colorpicker配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "colorpicker" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name
textarea 配置项说明 表1 textarea配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "textarea" 配置项类型。 value String 否 - 默认值。 name String 是 name: "commProps.myString"
组件数据的动态变化。本示例不做配置。 在组件预览中,选择要展示的表字段,即从左边栏中拖入到右边栏中,单击“保存”。 图7 拖拽字段到对应坐标轴 表格字段:展示创建关系型数据库数据集中,接入的关系型数据库中的数据。 配置:从表格字段中,拖拽所需的字段到X轴数据、Y轴数据或系列中。
选中组件,单击组件上方的。 选择所需的数据类型。 在全局变量配置下方,单击“+”,选择转换器,添加2创建的转换器。 图5 添加转换器 在组件预览中,将表格中的字段,拖拽到对应的配置中。 图6 拖拽字段到对应配置中 单击“保存”,完成组件数据源的配置。 保存页面,预览效果。 图7 查看后台排序效果
选中组件,单击组件上方的。 选择所需的数据类型。 在全局变量配置下方,单击“+”,选择转换器,添加2创建的转换器。 图5 添加转换器 在组件预览中,将表格中的字段,拖拽到对应的配置中。 图6 从表格字段中拖拽字段到对应配置中 单击“保存”,完成组件数据源的配置。 保存页面,预览效果。 图7 查看后台筛选效果
发布及安装项目 发布项目 安装项目 如何将华为云Astro轻应用中的大屏项目迁移到华为云Astro大屏应用
布局:散点图(不包含组件标题)距离整个组件四边(上、下、左、右)的距离。 图4 散点图布局 上边距:散点图到组件边框顶部的距离。 右边距:散点图到组件边框右侧的距离。 下边距:散点图到组件边框底部的距离。 左边距:散点图到组件边框左侧的距离。 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如
离。 图4 进度条布局 上边距:进度条到组件边框顶部的距离。 右边距:进度条到组件边框右侧的距离。 下边距:进度条到组件边框底部的距离。 左边距:进度条到组件边框左侧的距离。 配置 在配置中,设置组件的模板、是否显示标题等。 图5 进度条配置 参考模板:系统预置的进度条模板,单击默认或参考配色模板可进行切换。
从“数据转换”中,拖拽一个转换器节点到输入节点后,此时页面会出现一个图标。 单击图标,即可进入盘古助手。 图2 在页面数据集中调出盘古助手 从组件数据中进入盘古助手 参考使用空白画布新建页面中操作,新建一个空白页面。 在“组件”页签中,拖拽所需的组件到画布中。 选中组件,单击组件上方的,进入组件数据设置页面。
布局:气泡图(不包含组件标题)距离整个组件四边(上、下、左、右)的距离。 图4 气泡图布局 上边距:气泡图到组件边框顶部的距离。 右边距:气泡图到组件边框右侧的距离。 下边距:气泡图到组件边框底部的距离。 左边距:气泡图到组件边框左侧的距离。 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如
自定义的事件名为“sendSelect”,必须配置。 在组件“.js”文件逻辑代码中,使用“thisObj.triggerEvent()”方法触发该事件时,要将变量字段传入发送的data中。 desc 事件的中英文描述,可描述事件的具体场景、作用,必须配置。 fields 变量列表,必须配置,即事件对外输出的
参考使用空白画布新建页面中操作,新建一个空白页面。 在大屏开发页面,从“全部组件 > 装饰”中拖拽“自定义背景框”组件到画布中,并调整大小。 图1 拖拽自定义背景框到画布中 从“全部组件 > 导航”中拖拽“选项卡”组件到“自定义背景框”中。 图2 拖拽选项卡到自定义背景框组件中 增加选项卡组件的选项卡数量,并设置选项卡名称。
propertiesConfig是一个数组,用于保存组件配置项的相关字段,包括数据接入配置、组件配置项。 图1 propertiesConfig配置示例 数据接入配置 数据接入配置详细介绍,请参见组件数据接入。 组件配置项 配置示例如下,配置后效果如图2所示,组件配置项详细介绍请参见表1。 {
您也可以在搜索框中,输入所需的组件(如图1),或者按照图2进行查找。 图1 搜索所需组件 图2 按照分类查找 按住鼠标左键,将目标组件拖拽到画布中。 图3 拖拽文本编辑组件到画布中 组件添加成功后,会自动展示在画布中。您可以通过拖拽组件边框,调整组件的大小,也可以参考拖拽组件中操作,调整组件的位置。
selectConf, "selectValue", event.itemVal); }, 配置动作时,可以在华为云Astro大屏应用画布交付界面,配置itemVal的值为“${e.xxx}”将事件抛出的“xxx”参数复制到itemVal中。然后select组件内统一从itemVal获取数据。se
参考线是指为图表组件添加可视化的参考标准,为图表中数据提供具体的参考依据。 组件数据来源 组件是大屏页面的组成元素,配置页面数据即为配置组件数据。选中组件,单击组件上方的,可配置组件在页面呈现数据的来源,更多介绍请参见数据接入。 图4 配置组件数据 组件交互 华为云Astro大屏应用为组件设计了事件-动作机制实现组件
render中抽取的独立逻辑,基于默认prop和组件配置的props进行融合处理,并返回。 建议实现。 initI18n 初始化组件message-en/message-zh的多语言信息,统一注册到独立的i18nVue实例中,供组件获取桩数据、获取默认配置、初始化组件统一使用。 建议实现。 initReaderVm
参考模板:系统预置的组件样式模板,如默认、带标记模板等。 图表背景:设置图表的背景颜色、圆角和内边距。 配置 在配置中,可以开启或关闭组件的轮播效果。开启轮播效果后,轮播时间间隔不能超过24秒。 图6 区域图配置 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。