---
order: 2
navTitle: 条形图
---
# 仪表板组件-条形图

条形图与柱形图类似，都是使用宽度相同柱子的长短来表示数据的多少，柱形图的柱子为纵向放置，条形图的柱子为横向放置。用于2个或2个以上的数值对比，如使用条形图展示各大区的销售数量对比、展示各款式的零售总额对比等：

![条形图](./images/2020-07-24-18-15-19.png)

示例地址: [条形图](https://demo.succbi.com/v5/bi/bar)

## 使用条形图组件{#start}

条形图的**x轴**上至少取1个度量，如销售数量，利润金额；**Y轴**上至少取1个维度，如省份，大区名称等。

**操作步骤**

![条形图制作](./images/2020-07-24-18-15-19.gif)

1. 双击或拖入度量【销售数量】到**X轴**。
2. 双击或拖入维度【大区】到**Y轴**。
3. 点击大区右侧的下拉按钮，选择**排序**，选择**指定字段**，点击**添加**，按照【销售数量】>【降序】进行排序。
4. 在**属性栏**>**样式**>**系列**下可设置柱子的**宽度**，范围为1~100%。

通过上述4个步骤即可快速实现展示各大区的销售数量，且按销售数量降序显示。

## 属性介绍{#properties}

### 滚动{#scroll}

条形图支持滚动条，可以设置滚动条显示方式、当前页展示数据量、是否循环滚动等，在**样式**>**组件**>**滚动**设置图形的滚动选项，可参考[滚动](./column-chart.md#scroll)。

### 填充与背景{#background}

条形图可以通过**填充**和**背景**分别控制条形图柱子填充方式以及柱子背景填充方式，在**样式**>**系列**中设置，可参考[填充与背景](./column-chart.md#background)。

## 更多效果{#scenarios}

可以通过自定义条形图的取数和样式来实现不同效果的条形图。

|  [多系列堆积条形图](#multiple)  | [向左朝向条形图](#left)| [柱子颜色各异](#difference)| [自动轮播](#rotation)|
| -------- | -------- |-------- |-------- |
|![多系列堆积条形图](./images/djtxt.png)|![向左朝向条形图](./images/xzcxtxt.png)| ![柱子颜色各异](./images/zzysgy.png)|![滚动条形图](./images/2024-04-19-18-15-19.gif)|

### 多系列堆积条形图{#multiple}

多系列条形图可以展示不同的指标，堆积条形图可以展示维项的分布并反映出该指标的总和。组合在一起可以实现多系列堆积条形图，如同所示展示的各大区不同价格档次的折后总额分布和各大区的零售总额情况：

![多系列堆积条形图示例](./images/2020-07-24-18-14-13.png)

**实现方式**

1. 拖入2个度量【折后总额】、【零售总额】到**X轴**
2. 拖入一个维度【价格档次】到**Y轴**系列值下【折后总额】的**颜色**

通过以上2个步骤，即可实现按价格档次维度展示各大区的折后总额和各大区零售总额情况。

![颜色设置](./images/2020-07-24-18-16-44.png)

### 向左朝向条形图{#left}

条形图的朝向默认是朝右，可以设置坐标轴的显示位置来改变条形图的朝向。

![向左朝向条形图](./images/2020-07-24-18-11-49.png)

**实现方式**

1. 在**属性栏**>**样式**>**坐标轴**>**显示位置**，可以选择条形图坐标轴的朝向，**居左**或**居右**显示

![向左](./images/2020-07-24-18-08-58.png)

### 柱子颜色各异{#difference}

条形图内同一系列内的柱子颜色是相同的，我们可以使用颜色来实现同一系列的柱子颜色各异。

|按照色阶进行颜色标记| 按照色板值进行颜色标记|
| :---------:| :--------: |
|![连续](./images/zzyslx.png) |![离散](./images/zzysgy.png) |

**实现方式**

将度量【票房】拖到**x轴**系列值下的[颜色](../../design/data/data-style/color.md)，右键**颜色**，选择**色阶**或**色板**。

![柱子颜色各异](./images/2020-07-23-23-01-29.png)

### 自动轮播{#rotation}

当条形图的Y轴标签内容较多，无法在屏幕上全部显示时，可以设置[滚动](#scroll)实现自动轮播的效果。

![滚动条形图](./images/2024-04-19-18-15-19.gif)

**实现方式**

![自动轮播](./images/2024-04-18-18-15-19.gif)

1. 双击或拖入度量【销售数量】到**X轴**。
2. 双击或拖入维度【销售日期】到**Y轴**。
3. 在**样式**>**组件**>**滚动**中设置滚动条**显示**或者**自动**，设置**展示数据量**为**固定值**`10`。
4. 勾选**循环滚动**，根据实际需求设置滚动模式和滚动间隔。