# 上传自定义组件
将自定义组件上传到华为云Astro大屏应用中，并在页面中使用。
#### 上传自定义组件
1. 参考[登录华为云Astro大屏应用界面](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6008.html)中操作，登录华为云Astro大屏应用界面。
2. 在主菜单中，选择"我的资产"，进入我的资产页面。
3. 在左侧导航栏中，选择"我的组件"，单击"添加组件"，进入添加组件页面。
4. 单击![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123932448.png)，选择[新建并开发自定义组件](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6138.html)中自定义的组件包BarGraph.zip，填写基本信息，单击"保存"。
   
   图1上传自定义组件BarGraph   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123026832.png "点击放大")
   表1上传自定义组件参数说明 
   | 参数   | 说明                                                                                                                                                                                                                                                                                                                                                                                                                                         |
   |:---|:---|
   | 组件名字 | 组件名称，系统会根据组件包名称自动填充。 示例：BarGraph                                                                                                                                                                                                                                                                                                                                                                     |
   | 操作类型 | 当前操作的类型，如新增、更新等。                                                                                                                                                                                                                                                                                                                                                                                                                           |
   | 组件ID | 资产ID，前缀不可编辑，上传组件包后会自动填写。                                                                                                                                                                                                                                                                                                                                                                                                                   |
   | 目录名称 | 组件的存放目录，本示例选择"其它"。                                                                                                                                                                                                                                                                                                                                                                                                                         |
   | 场景   | 该组件包应用的场景，可根据业务需求选择"大屏\&PC端"或"移动端"。                                                                                                                                                                                                                                                                                                                                                                                                        |
   | 版本说明 | 该组件的描述信息。设置后，内容将会在组件详情页的"概况"页签下进行展示。                                                                                                                                                                                                                                                                                                                                                                                                       |
   | 操作   | - 单击操作列中的![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158725085.png)，可上传组件图标。  - 单击操作列中的![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123933384.png)，可删除上传的组件包。   |
      
   上传成功后，返回我的组件页面，可查看到已上传的组件。
   图2查看已上传的BarGraph组件   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158306629.png "点击放大")
   
   
5. 在大屏页面中使用自定义组件。 
   1. 参考[使用空白画布新建页面](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6014.html)中操作，新建一个大屏页面。
   
   2. 在大屏页面的"全部组件 \> 其它"中，找到BarGraph组件，拖入到画布中。
      图3拖拽BarGraph组件到画布中   
      ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123026892.png "点击放大") 
   
   3. 在画布中选中TabsWidget组件，单击组件上方的![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002148213325.png)。
   
   4. 在作为触发器中，单击"+ 交互事件"，选择"点击系列"。
   
   5. 在响应动作中，单击"+ 响应动作"，选择"赋值全局变量"。
   
   6. 在动作详情中，单击"赋值到变量"后的![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123938298.png)，选择"新建全局变量"。
      图4选择新建全局变量   
      ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158425029.png "点击放大") 
   
   7. "变量"设置为"seriesName"，"变量说明"设置为"系列名称"，单击"保存"。
      图5新建全局变量seriesName   
      ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158425057.png "点击放大") 
   
   8. 返回组件交互页面，"赋值到变量"选择[5.g]中新建的变量， 单击"确定"。
      图6选择seriesName变量   
      ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158425005.png "点击放大") 
   
   9. 新增响应动作"页面跳转"，设置跳转页面。
      图7添加页面跳转响应动作   
      ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158306553.png "点击放大")
      将页面参数设置为全局变量seriesName后，在目标地址的URL中会显示[图7]中的参数名seriesName，且其取值会根据全局变量seriesName的取值改变而改变。
      图8设置全局变量后效果   
      ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158306569.png "点击放大") 
   
   10. 单击"确定"后，单击"完成"，返回开发页面。
   
   11. 单击页面上方的![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184952.png)，保存页面。
   
   12. 保存成功后单击![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158306557.png)，参考[发布页面](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6037.html)中操作，发布页面。
   
   13. 打开发布的页面网址，查看最终设置效果。
       图9查看最终设置效果   
       ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158425025.gif "点击放大")