检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
包进行上传，在页面中进行使用。在开发自定义组件前，请仔细阅读自定义组件开发规范章节内容，了解组件的开发规范。下面以开发网站中常用的柱状图（vue2+Echarts）组件为例，向您介绍如何开发自定义组件。 本节使用的示例组件开发过程中使用了前端开发框架Vue及Echarts，请提前了解。
使用华为云Astro大屏应用开发告警处理情况统计移动端页面 应用场景 通过华为云Astro大屏应用开发一个告警处理情况移动端页面，开发完成后，用户可通过移动端访问该页面，查看告警处理情况。移动端页面构想，如图1所示。 图1 移动端页面效果 图1中移动端页面，由下列组件拼装而成。 表1
使用空白画布新建页面 从零开始，通过拖拽组件、设置页面布局、数据源等，构建华为云Astro大屏应用大屏页面&PC端页面。创建移动端页面操作和大屏&PC端页面相同，本章节以创建大屏&PC端页面为例进行介绍。 新建空白页面 参考登录华为云Astro大屏应用界面中操作，登录华为云Astro大屏应用界面。
华为云Astro大屏应用使用流程 华为云Astro大屏应用（Huawei Cloud Astro Canvas）是华为云针对可视化大屏场景的低码平台，可以帮助企业轻松实现数据的可视化开发。在使用华为云Astro大屏应用前，建议您先学习本章节内容，了解华为云Astro大屏应用的使用流程。 购买华为云Astro大屏应用实例
的Library，则Widget不能正常运行。如果页面要使用前端框架或组件库，例如流行的Vue、Bootstrap、ElementUI等，需要将其制作成Library资产，然后上传到环境中使用。 华为云Astro大屏应用中的Widget分为以下两种： 系统预置Widget 系统预
setCookie("key","value") getI18n 一般用于在初始化阶段返回一个Vue18n的实例，配合Vue和VueI18n使用。使用方式参考如下： /* * 该Vue18n实例可以在new一个Vue实例时赋值为i18n参数。 */ HttpUtils.getI18n({
参考登录华为云Astro大屏应用界面中操作，登录华为云Astro大屏应用界面。 在项目列表中，单击已创建项目的名称，进入对应的项目页面。 在项目页面，单击“新建页面”。 在新建页面的预置模板、未上线模板或自定义模板中，单击对应的模板。 例如，单击预置模板中的“问题分析”。 在模板预览页面，单击“使用此模板”。
使用华为云Astro大屏应用预置模板搭建交通管理大屏 场景说明 交通管理大屏用于监控城市的交通状态，如进出城车辆、路况信息和交通指数等，效果如图1所示。本入门以使用华为云Astro大屏应用中预置模板构建一个交通管理大屏为例，向您介绍如何在华为云Astro大屏应用中快速构建可视化页面。
IAM用户创建后，请使用IAM用户登录华为云Astro大屏应用。登录后会提示图2中所示信息，此时您需要按照本章节操作，为IAM用户进行授权。授权后，IAM用户才可正常登录华为云Astro大屏应用进行可视化应用的开发。 图2 没有该服务访问权限 给IAM用户添加开发者权限 使用华为账号，登
参考登录华为云Astro大屏应用界面中操作，登录华为云Astro大屏应用界面。 在项目列表中，单击已创建项目的名称，进入对应的项目页面。 在项目中，单击，选择本地的页面模板文件，单击“打开”。 图1 添加本地页面模板文件 在创建页面对话框中，输入页面标题，单击“新建”。 系统自动进入业务大屏开发页面
如何使用高级表格的后台分页功能 后台分页必须和全局变量一起配合使用。要实现后台分页，需要在组件预览时，将数据中的total字段，添加到数据总数中。 后台分页 参考登录华为云Astro大屏应用界面中操作，登录AstroCanvas界面。 新建一个大屏页面，从“全部组件 > 文本”中，拖拽“高级表格”组件至画布空白区域。
age-zh的多语言信息，统一注册到独立的i18nVue实例中，供组件获取桩数据、获取默认配置、初始化组件统一使用。 建议实现。 initReaderVm render中抽取的独立逻辑，初始化运行态组件VM实例。在实例中获取数据并实现组件的核心渲染。 建议实现。 register
选择所需的数据类型。 在全局变量配置下方，单击“+”，选择转换器，添加2创建的转换器。 图5 添加转换器 在组件预览中，将表格中的字段，拖拽到对应的配置中。 图6 拖拽字段到对应配置中 单击“保存”，完成组件数据源的配置。 保存页面，预览效果。 图7 查看后台排序效果 父主题： 组件管理
我的库 在我的库中，管理系统预置的和用户自定义的库，如添加库、查看库历史版本等。系统预置的库，只能执行查看详情、查看历史版本和下载操作。本章节的操作，均以自定义库为例。 新建自定义库 以某组件中需要使用Vue（系统预置库）以及MintUI（自定义库）为例，介绍如何上传自定义库并如何在组件中使用库。
资源设置中，您可以管理页面中使用到的库。 资源设置 参考登录华为云Astro大屏应用界面中操作，登录华为云Astro大屏应用界面。 在华为云Astro大屏应用界面的项目列表中，单击已创建的项目，进入项目。 在主菜单中，选择“项目设置”，进入项目设置页面。 参考设置项目锁中操作，获取项目锁。
选择所需的数据类型。 在全局变量配置下方，单击“+”，选择转换器，添加2创建的转换器。 图5 添加转换器 在组件预览中，将表格中的字段，拖拽到对应的配置中。 图6 从表格字段中拖拽字段到对应配置中 单击“保存”，完成组件数据源的配置。 保存页面，预览效果。 图7 查看后台筛选效果 父主题： 组件管理
描述信息。 authorName: ：组件的作者信息。 width：在绝对布局高级页面中，添加该组件时的默认宽度，单位为“px”，不填写默认为“200px”。 height：在绝对布局高级页面中，添加该组件时的默认高度，单位为“px”，不填写默认为“200px”。 i18n：指定
”，单击“发送”。 盘古助手会根据您的提问，筛选出当前数据源测试数据中符合您要求的数据。 图3 查看数据筛选结果 数据统计 参考新建转换器中操作，新建一个转换器。 在“测试数据”中，选择所需的数据源。 在页面中单击，进入盘古助手。 在盘古助手中，单击“快捷指令”，选择“数据统计”。
无入参，使用方式参考如下： var widgetBasePath = thisObj.getWidgetBasePath(); getMessages 一般用于在初始化阶段，获取该组件国际化配置文件中定义的国际化文件内容，推荐配置vue和vueI18n使用，无入参，使用方式参考如下：
件的事件列表中展现。 registerAction 用来注册动作，只有通过此API注册后的事件才会在组件的动作列表中展现。 inReader 判断当前页面状态是开发态或预览态。 registerWidget 必须在{widget}.editor.js中注册组件，使用方式参考如下：
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
