检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
基本折线图 统计告警处理平均时长 开发移动端页面 登录AstroCanvas服务控制台,单击“进入首页”,进入AstroCanvas界面。 在项目列表页面,单击右上角的“+ 新建项目”。 选择“移动端”,输入项目名称为“Alarm”,单击“新建”。 图2 新建移动端项目 在项目中,单击“+新建页面”。
triggerEvent()”方法触发该事件时,要将变量字段传入发送的data中。 desc 事件的中英文描述,可描述事件的具体场景、作用,必须配置。 fields 变量列表,必须配置,即事件对外输出的变量集合,包含变量名、描述等,必须配置。 fields[0].name 表示变量名,例如“selectValue”。
成长地图 | 华为云 Astro大屏应用 Astro大屏应用(Astro Canvas,简称AstroCanvas)以数据可视技术为核心,以屏幕轻松编排,多屏适配可视为基础,帮助非专业开发者通过图形化界面轻松搭建专业水准的数据可视化大屏应用,满足项目运营管理、业务监控、风险预警等
理页面。 在左侧导航栏中,选择“页面资产管理 > 组件模板”。 在“全局”页签中,单击对应的组件模板。 在组件模板详情页,单击“预览”,可在线预览组件模板。 下载组件模板 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在主菜单中,单击页面右上方的“管
将鼠标放在对应的组件上,单击,可查看到新版本的组件(如1.0.1)。 图9 查看组件版本 :单击该图标,可下载当前版本组件。 :单击该图标,可在线编辑该版本组件。 编辑组件 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在主菜单中,选择“我的资产”。 在左侧导航栏中,单击“我的组件”。
页面扩容包计费规则,请参见计费项。 图1 购买实例(基础版) 图2 购买实例(专业版) 图3 购买实例(企业版) 选择支付方式,单击“去在线支付”,完成订单支付。 图4 确认付款 订单支付成功后,单击“返回Astro轻应用控制台”。 在Astro大屏应用控制台中,可以查看Ast
图5 设置桥接器信息 将鼠标放在对应的桥接器上,单击,可查看到桥接器的新版本。 :单击该图标,可下载当前版本桥接器。 :单击该图标,可在线编辑该版本桥接器。 编辑桥接器 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在主菜单中,选择“我的资产”。
名、函数或者直接输入函数,如图5。 图5 表达式设置 单击“保存”,完成数据集的创建。 在组件中使用数据集 返回AstroCanvas项目列表页面。 进入开发页面,拖拽所需组件(如基本柱图)到画布中。 图6 从图表中拖拽基本柱图到画布中 选中该组件,单击组件上方的,进入组件数据页面。
图形的提示标识。 图6 气泡图图例 显示图例:是否显示图例,图例文字内容来源于数据模型下“s”的取值。 图例标记:设置图例小图标形状和图例列表布局朝向。 图例宽高:设置图例的宽度和高度。 图例间隔:设置图例之间的间隔。 字体:设置图例的字体、颜色和大小。 文字风格:设置图例文字的风格,支持正常、斜体和倾斜体。
图形的提示标识。 图6 散点图图例 显示图例:是否显示图例。图例文字内容来源于数据模型下“s”的取值。 图例标记:设置图例小图标形状和图例列表布局朝向。 图例宽高:设置图例的宽度和高度。 图例间隔:设置图例之间的间隔。 字体:设置图例的字体、颜色和大小。 文字风格:设置图例文字的风格,支持正常、斜体和倾斜体。
提示标识。 图7 水平堆叠柱图图例 显示图例:是否展示图例。图例文字内容来源于数据模型下“s”的取值。 图例标记:设置图例小图标形状和图例列表布局朝向。 图例宽高:设置图例的宽度和高度。 图例间隔:设置图例之间的间隔。 字体:设置图例的字体、颜色和大小等。 左间距:图例到柱图组件
图形的提示标识。 图9 折柱图图例 显示图例:是否展示图例。图例文字内容来源于数据模型下“s”的取值。 图例标记:设置图例小图标形状和图例列表布局朝向。 图例宽高:设置图例的宽度和高度。 图例间隔:设置图例之间的间隔。 字体:设置图例的字体、颜色和大小。图例文字内容来源于数据模型下“s”的取值。
使用页面模板文件新建页面:将已开发的页面保存为模板,再次创建页面时可使用该页面模板文件,创建可视化页面,减少重复开发,提高交付效率。 发布及安装项目 项目开发完成后,可以在线预览,也可以一键打包从A环境发布、B环境安装,实现开发 > 测试 > 上线的快速部署,从而实现不同环境之间大屏&PC端、移动端资产的快速迁移。
页面数据集 操作场景 通过页面数据集,实现多个组件对接同一个数据输入,减少重复的请求和配置。同时,在新建页面数据集时,还支持配置多数据输入(最多10个),来实现组件同时对接多个数据流。 本章节以将两个静态数据集(多数据流1、多数据流2)中的数据汇合后,作为组件的数据来源为例,向您介绍如何创建并使用页面数据集。
s: seviceLoad, }, ]; }, 配置数据数据时,下图中的“静态数据”选项即为静态数据,支持直接在线编辑静态数据。 图3 静态数据 父主题: 自定义组件开发规范
雷达图 雷达图是指通过极坐标的展现形式,使用围合的区域,来表示数据在不同维度的具体表现。 在大屏设计页面,从“全部组件 > 图表”中,拖拽“雷达图”组件至画布空白区域,如图1。 图1 雷达图 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素
echarts组件自定义事件交互设置 echarts组件作为触发器的事件时,可以在自定义事件中设置。 自定义事件交互设置 在大屏设计页面,从Echarts图表中拖拽一个折线图堆叠组件到画布中。 图1 拖拽折线图堆叠组件到画布中 选中折线图堆叠组件,单击。 在自定义事件中,单击“新
配置项总览 本章节介绍AstroCanvas支持的组件配置项,您可以通过{widget}.editor.js文件中定义的type字段,来定义组件的类型和配置。 表1 配置项总览 类别 类型 说明 输入框 input 单行文本输入框 textarea 多行文本输入框 数字类型 input-number
排行榜 排行榜是文本组件的一种,用于根据一定的条件,描述数据的先后关系。 在大屏设计页面,从“全部组件 > 文本”中,拖拽“排行榜”组件至画布空白区域,如图1。 图1 排行榜 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图表、卡片背景、卡片边框)和图表元素构成。
上传自定义组件 将自定义组件上传到AstroCanvas中,并在页面中使用。 上传自定义组件 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在主菜单中,选择“我的资产”,进入我的资产页面。 在左侧导航栏中,选择“我的组件”,单击“添加组件”,进入添加组件页面。