---
order: 7
navTitle: 条形占比图
---
# 仪表板组件-条形占比图

条形占比图以条形的分段长度来表示各部分数据的占比情况，与[饼图](./pie-chart.md)类似，数据可以是百分比或者数值。比如以百分比展示不同大区的销售数量占比：

![基本条形占比图示例](./images/2020-08-13-11-21-03.png)

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

## 条形占比图制作{#make}

条形占比图的**指标**上至少取1个度量，如销售数量等；取一个维度到[颜色](../../design/data/data-style/color.md)进行分组，如大区等，条形占比图中要绘制的数值大小不能含有负值。

**操作步骤：**

![条形占比图制作](./images/horizbar.gif)

1. 双击或拖入度量【销售数量】到**指标**
2. 拖入维度【大区】到指标系列下的颜色
3. 点击**颜色**，选择其他色板，可以切换条形占比图不同柱形的颜色
4. 设置标签为占比：点击**属性栏**>**数据**>**销售数量**>[快速分析](../../design/data/data-analysis/README.md)，选择百分比

通过上述操作即可实现各大区的销量占比，以及使用了不同的颜色标记各大区。

## 属性介绍{#attribute}

### 外部标签{#external-label}

**外部标签和标签区分**

![外部标签和标签区分](./images/2020-08-14-11-44-06.png)

- [标签](../../design/data/data-style/label.md)可以设置显示与隐藏两种状态。隐藏状态标签直接被隐藏不显示，显示时可以设置位置、角度和样式。

- **外部标签**也可以设置显示和隐藏两种状态。当隐藏状态时，外部标签直接被隐藏不显示。当显示状态时，可以对以下属性进行设置来改变外部标签的样式和显示位置：

  ![外部标签显示](./images/horizbar_wbbq.png)

  - **显示内容**：设置外部标签的显示内容为指标系列下的颜色、标签或提示中对应的数据，如果指标系列下只有颜色标记有数据，切换为提示标签内容不会改变
  - **外部标签位置**：可以设置外部标签在条形占比图的底部或者顶部显示，默认为底部
  - **内部标签到外部显示**：将条形占比图内部标签的内容替换外部标签并显示
  - **标签错位显示**：将外部标签显示位置错位，比如当标签比较密集时，可以使用错位的方式
  - **隐藏外部标签线**：隐藏外部标签与条形占比图之间的连接线
  - **标签文字颜色同色块**：将外部标签文字的颜色与条形占比图各区块的颜色保持一致，勾选后，在字体处修改外部标签的颜色对标签文字不起作用，此条件优先级更高
  - **标签线颜色同色块**：将外部标签线的颜色与条形占比图各区块的颜色保持一致，勾选后，在字体处修改外部标签的颜色对标签线不起作用，此条件优先级更高
  - **外部标签文字和线的设置**：可以设置外部标签的文字样式，其中线的颜色同文字颜色。当不勾选**标签文字颜色同色块**和**标签线颜色同色块**时有效。

### 条形样式{#conditional-style}

可以通过修改**条形样式**来改变不同占比的柱形形状。可以选择的形状有**柱形**、**五边形**、**圆弧形**，默认为**柱形**。

![条件样式](./images/horizbar_tjys.png)

不同形状的效果展示：

柱形效果图：
![柱形](./images/2020-08-13-11-21-03.png)

五边形效果图：
![五边形示例](./images/2020-08-13-11-24-33.png)

圆弧形效果图：
![圆弧形示例](./images/2020-08-13-11-26-20.png)

在选择五边形时，会出现一个**锐度**，可以对锐度数值进行调整来改变五边形右侧角的尖锐程度，当锐度为0时，角没有锐度，会呈现为柱形；当锐度值越大时，角越尖锐，但是当锐度取到一定值时会不再发生改变，这取决于图形的大小程度。

![锐度](./images/2020-08-14-12-36-52.png)

### 宽度{#width}

可以通过设置**宽度**来设置条形占比图柱子的宽度。

![宽度](./images/2020-08-14-10-34-05.png)

### 圆角{#round}

可以设置条形占比图的柱子为**圆角**，只有条形形状为柱形时生效。

**仅限外角**：勾选仅限外角，则只使条形占比图最左右的四角呈现**圆角**；不勾选，则每一个占比柱形形状都会呈现**圆角**。两者对比如下：

勾选仅限外角效果：
![勾选仅限外角](./images/horizbar_jxwj.png)

不勾选仅限外角效果：
![不勾选仅限外角](./images/horizbar_bjxwj.png)