检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
使用AstroCanvas开发告警处理情况统计移动端页面 应用场景 通过AstroCanvas开发一个告警处理情况移动端页面，开发完成后，用户可通过移动端访问该页面，查看告警处理情况。移动端页面构想，如图1所示。 图1 移动端页面效果 图1中移动端页面，由下列组件拼装而成。 表1
自定义组件开发规范 代码结构介绍 组件配置项（Config配置） 组件内置API 组件数据接入 组件交互
初识开发页面 可视化开发页面 AstroCanvas一站式数据可视化开发页面，由可视化组件、图层、页面数据集、画布、功能按钮和主题六个区域组成，各区域功能介绍请参见表1。 图1 可视化开发页面 表1 可视化开发页面功能说明 序号 名称 说明 1 组件 在全部组件中，可以查看到各种
在配置中，设置时间选择器的类型、输入框和弹出框的字体颜色等。 图4 时间选择器配置 时间选择器的类型 选择器类型：支持时间范围和瞬时两种。 快捷时间：是否显示快捷时间，默认为“显示”。“选择器类型”设置为“时间范围”时，才显示该参数。 图5 显示快捷时间效果 值类型：支持实时和固定时间
标题：是否显示组件标题。设置为显示时，支持设置标题的字体、大小和颜色等。 配置 在配置中，设置组件的年月日、背景颜色和时间条颜色等。 图4 时间展示配置 年月日 显示：是否显示年月日。 字体：设置年月日字体、颜色和大小等。 时间 显示：是否显示时间。 字体：设置时间字体、颜色和大小等。 星期 显示：是否显示星期。
标题字体：设置标题的字体、颜色和大小等。 图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图4 时间轴图形 时间轴 时间轴方向：时间轴的方向，支持水平方向和垂直方向。 自动轮播：是否展示自动轮播效果。 间隔时间：间隔的时间。 停留时间：停留的时间。
文本编辑组件，用于展示标题，例如人员来访统计。 水平基本柱图 统计当前人员类型，如总公司员工、合作员工、访客人员、安防人员、保洁人员。 基本柱图 统计入园和出园人数。 区域图 统计昨日在园人数。 开发大屏页面 登录AstroCanvas服务控制台，单击“进入首页”，进入AstroCanvas界面。 选择大屏&PC端项
发布项目 项目开发完成后，可以直接在线预览，也可以一键打包从A环境发布、B环境安装，实现开发 > 测试 > 上线的快速部署，从而实现不同环境之间资产的快速迁移。发布项目，支持将项目中的数据集数据一并进行打包。 前提条件 发布项目前，请确保项目中的页面已发布。 发布项目 参考登录A
小、字体颜色和标题内容等。 配置 在配置中，设置组件的年月日、背景颜色和时间条颜色等。 图4 时间翻牌器配置 星期 显示：是否显示星期。 字体：设置星期字体、颜色和大小等。 年月日 显示：是否显示年月日。 字体：设置年月日字体、颜色和大小等。 时间 显示：是否显示时间。 字体：时间的字体、文字大小和文字颜色等。
${alarmstatus} } 测试API接口：用于测试该是否接口。单击“测试API接口”，“样例报文”中会显示输出结果。 转换器：用于对数据进行转换处理，选择3中创建的转换器。 数据预览：单击“数据预览”，可直观展示经过转换器处理后的样例报文。 步骤2 开发告警监控大屏页面 新建一个空白的大屏页面。
在创建页面对话框中，输入页面标题，单击“新建”。 系统自动进入业务大屏开发页面，您可以直接使用该大屏应用，也可以根据自身业务的需求进行二次开发。 单击页面上方的，保存页面。 单击页面上方的，预览应用页面。 如果页面预览效果和预期效果不一致，可再次返回开发页面进行调整。 单击页面上方的发布图标，进行页面发布设置。
购买扩容包增加页面数 页面扩容包仅适用于在购买基础版/专业版实例的基础上使用，不可单独购买和退订。扩容包的使用截止时间与主资源的截止时间保持一致。在使用AstroCanvas过程中，当页面数达到上限时，可通过购买页面扩容包来增加页面数。 页面扩容 参考购买AstroCanvas实
新建并开发自定义组件 操作场景 当系统预置的组件无法满足用户需求时，用户可自定义组件包进行上传，在页面中进行使用。在开发自定义组件前，请仔细阅读自定义组件开发规范章节内容，了解组件的开发规范。下面以开发网站中常用的柱状图（vue2+Echarts）组件为例，向您介绍如何开发自定义组件。
在工作空间目录下，选择对应的角色（如开发者），单击“新增成员”。 图1 单击新增成员 管理员：拥有大屏开发权限、数据中心开发权限和添加用户到管理员、开发者、数据分析师、数据工程师和访问者权限。 开发者：拥有大屏开发权限、数据中心开发权限。 数据分析师：拥有大屏开发权限、数据中心只读权限。
图3 查询过去三小时的数据 最小时间间隔：每个数据点之间最小的时间间隔，取值范围为[1, 40000000]。 查询配置：单击“新增查询”，可增加promQL查询，最多只支持添加8条，支持设置变量。 测试API接口：用于测试该接口，单击“测试API接口”，“样例报文”中会显示输出结果。
环境类型：承载应用程序服务的环境类型，支持开发环境、生产环境、沙箱环境和不依赖。 开发环境：开发者专门用于开发应用的环境，用户可根据需求自定开发配置各种逻辑模块化元素，从而创建各种应用。 沙箱环境：在应用正式发布上线前，需要在测试环境进行测试，包含数据配置。 生产环境：应用正式发布上线的真实环境。测试完成后，将
Prometheus数据源 普罗米修斯（Prometheus）是一个开源系统监控和告警工具包，主要用于收集和存储时间序列数据，并提供了强大的查询和告警功能。AstroCanvas支持对接Prometheus数据源，将普罗中的数据作为组件的数据展示。 新建Prometheus数据源
环境类型：承载应用程序服务的环境类型，支持开发环境、生产环境、沙箱环境和不依赖。 开发环境：开发者专门用于开发应用的环境，用户可根据需求自定开发配置各种逻辑模块化元素，从而创建各种应用。 沙箱环境：在应用正式发布上线前，需要在测试环境进行测试，包含数据配置。 生产环境：应用正式发布上线的真实环境。测试完成后，将
输入服务器机器码和名称，单击“确定”，生成测试Key。 图11 生成测试Key 其中，“服务器机器码”请配置为2中获取的内容，服务器名称请根据实际情况进行配置。 返回本地部署信息页面，单击服务器机器码后的，下载测试Key文件（runtime.key）。 图12 下载测试Key文件 将
隐藏组件 通过组件隐藏功能，可以隐藏多个已部署完成的组件，使得组件过多的可视化页面变得更加清晰，操作更加流程，从而提高可视化页面的开发效率。 组件隐藏后，在开发态和预览页面时，都会隐藏该组件。 隐藏组件 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在编辑页
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
