# 初识开发页面
#### 可视化开发页面
华为云Astro大屏应用一站式数据可视化开发页面，由可视化组件、图层、页面数据集、画布、功能按钮和主题六个区域组成，各区域功能介绍请参见[表1]。
图1可视化开发页面   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158307025.png "点击放大")
 表1可视化开发页面功能说明 
| 序号 | 名称  | 说明                                                                                                                                                                                     |
|:---|:---|:---|
| 1  | 组件  | 在全部组件中，可以查看到各种类型的组件（包括预置组件和自定义组件），将组件拖拽到画布中进行配置，完成可视化应用项目的开发。更多关于组件的介绍，请参见[组件介绍](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6048.html)。                     |
| 2  | 图层  | 在图层列表中，可以查看到画布中各个组件的图层位置，也可以根据可视化应用需要，手动调整每个组件图层的上下位置关系。更多关于图层的介绍，请参见[图层管理](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6045.html)。                          |
| 3  | 工具栏 | 工具栏位于编辑器页面的最上方，通过工具栏提供的功能，可以完成保存页面、页面设置、全局变量设置、预览页面以及发布制作好的可视化应用等。                                                                                                                     |
| 4  | 画布  | 页面开发操作区域，即画布区域，完成对页面具体布局、组件放置等操作。您可自由拖拽组件到画布区域，大小、位置可通过鼠标手动调节，也可设置组件属性精确控制。组件可层叠，既可以通过鼠标控制上移、下移、置顶、置底等层级操作，也可以通过设置组件属性精确设置层级。在画布区域中按住Ctrl键可选择多个组件，拖动其中的某个组件，其他组件也随着改变位置，支持按鼠标左键框选多个组件。 |
| 5  | 主题  | 主题可以一键改变装饰卡片元素、图表配色和字体颜色等视觉效果。单击"取消当前主题卡片装饰"，可清除已设置的主题颜色，恢复到经典原始。                                                                                                                      |
| 6  | 数据  | 页面数据集的创建入口。华为云Astro大屏应用中的组件，支持对接页面级的数据集，以保证数据的复用。页面级数据集主要是为了支持多个组件对接同一个数据源的情况，可以减少重复的请求跟重复的配置。                                                                                         |
   
#### 页面设置
华为云Astro大屏应用可视化开发页面，支持配置页面屏幕大小、适应方式、背景颜色或背景图片等，更多介绍请参见[如何进行设置页面](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6178.html)。
图2页面设置   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123027292.png)
#### 全局变量设置
华为云Astro大屏应用支持设置页面级的全局变量，通过页面组件间的交互，可给全局变量赋值，详情请参见[全局变量](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6172.html)。
![](https://support.huaweicloud.com/usermanual-astrocanvas/public_sys-resources/note_3.0-zh-cn.png)
全局变量中的作用次数，用于统计该全局变量被使用了多少次。单击作用次数下的具体次数，可查看该全局变量的作用域。
图3设置全局变量   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158425425.png "点击放大")
图4查看全局变量作用的域   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123027268.png "点击放大")
#### 页面开发流程
在华为云Astro大屏应用可视化开发页面，通过拖拽组件、设置页面布局、对接业务数据等，即可构建华为云Astro大屏应用大屏\&PC端/移动端页面，具体流程如[图5]所示。
图5页面开发流程   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123027280.png)
1. 页面设置 配置页面屏幕大小、适应方式、背景颜色或背景图片。更多介绍，请参见[如何进行设置页面](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6178.html)。
   
2. 构思布局 根据大屏高保真设计或构思，划分基本布局，并拖拽对应的组件到画布中。如何添加组件到画布中，请参见[组件管理](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6125.html)。
   
3. 组件设置 为组件对接业务数据、根据大屏互动形式设置交互动作、根据UI设计设置组件的样式、颜色等。支持预览页面、查看整体效果，按需调整，优化布局细节。
   - 各组件功能介绍，请参见[组件介绍](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6048.html)。
   
   - 组件数据源设置，请参见[数据接入](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6143.html)。
   
   - 如何设置组件交互动作，请参见[交互设置](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6140.html)。
    
4. 保存发布页面 保存开发好的页面，并发布。更多介绍，请参见[页面管理](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6035.html)。