检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
跨页面复制组件 通过复制到功能,可快速将组件复制到其他页面,从而高效完成多个同类型组件配置项参数之间的传递。 跨页面复制组件 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在编辑页面状态下,选中一个或多个组件,单击右键,选择“复制到”,并选择组件待复制到的页面。
参考模板:系统预置的组件样式模板,如默认、带标记模板等。 图表背景:设置图表的背景颜色、圆角和内边距。 配置 在配置中,可以开启或关闭组件的轮播效果。开启轮播效果后,轮播时间间隔不能超过24秒。 图6 区域图配置 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。
readerVm.selectConf, "selectValue", event.itemVal); }, 配置动作时,可以在华为云Astro大屏应用画布交付界面,配置itemVal的值为“${e.xxx}”将事件抛出的“xxx”参数复制到itemVal中。然后select组件
editor.js:组件核心渲染文件。组件属性定义文件,负责组件编辑状态时需要渲染的界面和逻辑。 {widget}.flt:组件DOM结构文件,需要在服务端提前渲染的部分可以写在此文件中,相当于HTML文件,负责样式展示。 {widget}.js:组件逻辑文件,整个Widget的渲染核
选中实心圆饼图,单击。 “数据类型”选中“数据集”,并选择所需的数据集。 在全局变量配置中,绑定8中的全局变量,并给全局变量赋值。 图5 绑定全局变量 在组件预览中,从“表格字段”中拖拽对应的字段到“配置”中,并单击“保存”。 返回大屏设计页面,单击,再单击。 在预览页面,单击折线图
边距:组件中图表距离整个组件四边(上、下、左、右,如图2)的距离,默认为0,即铺满整个组件。 配置 在配置中,设置组件的页签样式、导航页签和默认路由。 图4 路由导航(示例)配置 页签样式统一配置 页签方向:设置页签的显示方向,如水平方向、垂直方向。 位置:设置页签的位置,支持默认和自定义两种方式。
右边距:进度条到组件边框右侧的距离。 下边距:进度条到组件边框底部的距离。 左边距:进度条到组件边框左侧的距离。 配置 在配置中,设置组件的模板、是否显示标题等。 图5 进度条配置 参考模板:系统预置的进度条模板,单击默认或参考配色模板可进行切换。 组件标题 设置标题:是否显示组件标题。
单击“编辑页面”,进入大屏开发页面。 在页面上方工具栏中,单击,即可将当前页面下载到本地。 下载到本地的页面模板文件命名为“当前页面的名称”.page。 图1 将大屏页面保存为页面模板文件 父主题: 页面管理
整个组件。 图表背景:设置图表的背景颜色。 边框圆角:边框的圆角,四个角弧度取值范围为0~500,单位px。 配置 在配置中,设置组件模板和组件标题。 图4 雷达图配置 选择模板:选择雷达图模板,支持多组单数据模板和单组多数据模板。 组件标题 设置标题:是否显示组件标题。 内容:设置标题内容。
数据中心用于对页面的数据源进行集中的配置管理,支持多种数据源,如静态数据、调用华为云Astro轻应用API接口和ROMA API接口等。 数据源管理:新增并管理关系型数据库、DWS、DLI和华为云Astro轻应用等数据源。 数据集管理:新增并管理数据集,配置数据集后,在组件“数据”页签中可选择具体的数据集。
将向您介绍,如何实现组件响应动作。 注册动作 在响应动作中,单击“响应动作”,在下拉框中选择对应的响应动作。 图1 响应动作 /** * 文件global_SelectWidget.js中, 在init钩子中注册响应动作 * @params thisObj: 组件实例 */ Studio
组件对齐 选中多个组件后,单击右侧配置面板的对齐或分布图标。支持左、水平居中、右、顶、垂直居中、底等多种对齐方式,以及水平和垂直的自动分布方式。 组件对齐 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在页面编辑模式下,选择所需的组件,单击下图红框中图标,进行组件对齐。
选中选项卡组件,单击组件上方的,进入交互设置页面。 在作为触发器中,单击“+ 交互事件”,选择“饼图事件”。 饼图事件对应饼图选项卡,当选择饼图时,显示两个饼图组件,隐藏其他图表组件。 图6 显示饼图组件 图7 隐藏其他图表组件 按照上述操作,分别设置柱图事件、折线图事件和气泡图事件选项卡对应的交互动作。
创建的数据源。 目录:设置数据集的存放目录,配置为(可选)新建目录中新建的目录,也可以直接单击“新增目录”,新建一个目录。 责任人:数据集的创建人。 描述:新建数据集的描述信息,通常设置为数据集的功能。 配置数据集参数。 图2 配置数据集参数 查询类型:设置查询数据的类型,如查询时间范围内的数据或瞬时数据。
数据集 选择在“数据中心”中配置的数据集,作为组件数据来源。选择此方式时,请确保数据集已在数据中心创建,详情请参见数据中心。 数据集 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在编辑页面状态下,选中组件,单击组件上方的。 在数据类型中,选择“数据集”。
参考模板:系统预置的组件样式模板,如默认、极简等。 图表背景:设置图表的背景颜色、圆角和内边距。 配置 在配置中,可以开启或关闭组件的轮播效果。开启轮播效果后,轮播时间间隔不能超过24秒。 图6 基本折线图配置 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。
参考模板:系统预置的组件样式模板,支持默认和带标记模板等。 图表背景:设置图表的背景颜色、圆角和内边距。 配置 在配置中,可以开启或关闭组件的轮播效果。 图6 多区域折线图配置 轮播:是否开启轮播效果。 轮播类型:设置图表的轮播类型,支持按照数据系列轮播和按照X轴数据轮播。 图7 多区域折线图数据系列轮播效果
导入项目 从本地导入已创建的项目包,实现离线迁移、部署项目。 约束与限制 导入项目后,如果当前环境中不包含同名的数据源,会从项目包中安装数据源。新安装的数据源密码是空的,请在数据源中重新配置密码,也可以在项目页面的“数据”页签,单击,重新配置。 导入项目 参考登录华为云Astro大屏应
数据源:选择HTTP连接器数据源中,创建的数据源。 目录:设置数据集的存放目录,配置为(可选)新建目录中新建的目录,也可以直接单击“新增目录”,新建一个目录。 责任人:数据集的创建人。 描述:新建数据集的描述信息,通常设置为数据集的功能。 配置数据集参数。 动作:创建HTTP连接器时,定义的执行动作。
参考线:设置已有参考线的颜色和线型,单击“新增X轴参考线”,可新增参考线。单击对应参考线后的“x”,可删除参考线。 数据 在数据中,配置气泡图的数据来源,更多介绍请参见数据接入。 交互 在交互中,配置气泡图与其他组件或页面之间的交互能力。交互设置更多介绍,请参见交互设置。 父主题: 图表