# 基本柱图
基本柱图组件用于实现柱状图的图表统计。
在高级页面设计器中，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127697.png)，从"图表 \> 柱状图"中，拖拽"基本柱图"组件到画布中，如[图1]所示。
图1基本柱图   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933048372.png "点击放大")
#### 属性
在属性中，设置基本柱图组件的位置、边框、背景等。
图2属性   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888980.png "点击放大")
- 基础
  - 组件标题：设置组件的标题。
  
  - 组件名称：设置组件的名称。
   
- 位置
  - 距离左端：组件到页面左侧的距离，单位为px。
  
  - 距离顶端：组件到页面顶部的距离，单位为px。
  
  - 宽度：组件的宽度，单位为px。
  
  - 高度：组件的高度，单位为px。
  
  - 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是"1"，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为"0"。
  
  - 自适应高度：组件的高度是否随宽度改变。
   
- 边框：设置组件的边框样式，如全边框或角边框。
- 背景
  - 样式：设置背景的样式，如普通、居中、拉伸等。
  
  - 图片链接：背景图片URL。
  
  - 颜色：设置背景的颜色。
   
 
#### 高级设置
选中基本柱图组件，单击鼠标右键选择"高级设置"，可对柱状图进行多种配置。
图3基本柱图效果图   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127701.png "点击放大")
- 参考配色模板：系统默认提供两种可选柱图模板，单击即可切换样式。
  - 默认：按照数据进行排序展示。
  
  - 蓝色渐变不排序。
  
  
  可选择某一模板重置，也可通过设置各配置项得到想要的效果。
  
- 数据系列：对每个数据系列（柱状条颜色、柱状条宽度、柱条边框圆角、数值显示）进行一系列配置。单击"+"，可添加数据系列。如何设置数据系列，请参见[如何设置数据系列]。
  - 通用柱状图颜色：选项为"单色"或"渐变色"，选择颜色可改变柱状条的颜色。
  
  - 定制柱条颜色：自定义柱状条颜色。
  
  - 柱形图宽度：柱状条宽度，默认为20px。
  
  - 柱条边框圆角：柱状条边框圆角设置，取值为"0"时为直角，"100"为圆角。
  
  - 数值显示：柱状条旁是否显示数值，开启后还可设置数值显示位置和数值颜色。
   
- 数据统一配置：对数据进一步配置，例如是否光圈标记、数据是否进行排序、是否切换柱条显示为阶梯瀑布、是否柱条效果为横向显示（默认纵向显示）。具体配置效果，可以单击配置项查看组件样式变化。
  - 光圈标记：单条数据系列时才会显示该参数，表示是否进行光圈标记。开启后，柱状条上方会显示光圈和数值。
  
  - 数据排序：单条数据系列时才会显示该参数，表示是否对柱状条数据进行排序展示。
  
  - 阶梯瀑布显示：单条数据系列且打开数据排序时才会显示该参数，表示是否对柱状条数据进行阶梯瀑布显示。瀑布图常用于经营情况分析，解释从一个数字到另一个数字的变化过程。比如评估公司利润、比较产品收益、突出显示项目的预算变更、分析一段时间内的库存或销售情况 、显示一段时间内产品价值变化等。
    图4阶梯瀑布效果   
    ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287493.png "点击放大") 
  
  - 横向柱条效果：是否开启横向柱条展示效果。
  
  - 堆叠显示（多数据系列效果）：多条数据系列时才会显示该参数，是否对多条数据系列数据进行堆叠显示。
   
- X轴：X轴配置。
  - 坐标轴名称设置：包括名称文本内容、文本颜色、文字大小、名称与轴线间距及名称旋转设置。
  
  - 轴线设置：包括是否显示轴线、是否显示刻度、是否对轴数据进行反转、轴线颜色及轴文本颜色设置。
  
  - 网格线：是否显示轴网格线、轴网格线的类型和颜色设置。
  
  - 柱外间距：是否显示柱外间距。
  
  - 柱间距：是否显示柱内间距（当有多数据系列才可设置柱内间距，多数据系列的柱子之间的间距）。
  
  - 标签展示：字数过多是否换行及字数过多是否省略。X轴标签取值来源于数据模型中"dataX"字段取值。
  
  - 刻度标签间隔：刻度标签是否间隔展示，关闭后显示所有标签。
  
  - 刻度标签旋转的角度：刻度标签旋转角度设置。
   
- Y轴：Y轴配置。
  - 坐标轴名称设置：包括名称文本内容、文本颜色、文字大小、名称与轴线间距及名称旋转设置。
  
  - 坐标轴最小间隔大小：坐标轴最小间隔大小，例如间隔500，则Y轴就是0、500、1000、1500依次间隔500进行分隔。
  
  - 轴线设置：包括是否显示轴线、是否显示刻度、是否对轴数据进行反转、轴线颜色及轴文本颜色设置。
  
  - 柱形阴影：是否显示柱形阴影、阴影颜色及是否显示数据。
  
  - 网格线：是否显示轴网格线、轴网格线的类型和颜色设置。
  
  - 轴最大值：轴最大阈值设置。
  
  - 刻度标签旋转的角度：刻度标签旋转角度设置。
   
- 标题：设置组件的标题，支持设置标题的文本内容、文本位置、背景色、文本颜色、文本大小。
- 图例：设置图例，支持设置图例小图标、图例左侧边距、图例上侧边距。图例文字内容来源于，数据模型"dataValue"中"title"取值。
- 公共配置/显示总量：打开后，会显示数据总量。
- 图表背景：设置图表的背景，可设置背景的颜色、四边圆角（取值为"0"时为直角，"100"为圆角）。
 #### 如何设置数据系列
1. 选择基本柱图组件，单击鼠标右键选择"高级设置"。
2. 展开数据系列配置，单击旁边的"+"，添加数据系列。 
   图5配置数据系列   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933048376.png "点击放大")
   
   
3. 在右侧"数据"页签，配置该数据系列的数据。 
   例如，在使用系统预置的静态数据基础上，添加如下加粗代码，配置新增数据系列的数据。也可以使用"动态数据"调用后台接口URL返回如下结构模型数据。
   ```
   {
   "resCode": "0",
   "resMsg": "成功",
   "result": [{
   "order": {
   "dataX": [
   "保洁",
   "安管",
   "工程",
   "绿化",
   "消杀",
   "特约"
   ],
   "dataValue": [{
   "title": "工单总数",
   "value": [
   411,
   965,
   427,
   630,
   85,
   800
   ]
   },
   {
   "title": "费用",
   "value": [
   500,
   1065,
   327,
   730,
   185,
   1000
   ]
   }
   ]
   }
   }]
   }
   ```
   
   
4. 配置添加的数据系列柱状条颜色、柱状条宽度、柱条边框圆角、数值是否显示，柱状图上显示的数值对应上述静态数据中的数值。
5. 设置完成后，单击"确定"。
 
#### 数据
在数据中，设置组件的数据来源。更多介绍，请参见[如何调用后台接口](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0192.html)。
图6设置组件数据   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287505.png "点击放大")
#### 事件
在事件中，可查看组件可配置的事件列表。更多关于事件的介绍，请参见[初识事件-动作](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0167.html)。
图7设置事件   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888996.png "点击放大")