条形图(Bar Chart)

### 什么是条形图？
条形图（也称为条形图）是最常见的图表类型之一，用于显示几类数据和不同值的变化之间的比较。条形图使用不同长度的矩形条水平或垂直定向，这些矩形条的长度与它们可视化的值成比例。您可以显示长数据标签，因为水平矩形有足够的空间容纳文本信息。

条形图有多种类型，包括基本水平条形图、堆积条形图、反转条形图等。

### 数据格式
条形图的数据格式与其他 XY 图表相同。您需要series在图表选项的数组中提供数据。有关如何构建的更多信息，请 `series` 参见[使用数据](http://www.bixiaguangnian.com/manual/apexcharts/232.html "使用数据")页面。

### 如何制作条形图
在接下来的部分中，将通过配置和选项来绘制不同类型的条形图，将帮助您学习如何在水平条形图上添加标记，如何显示堆叠在一起的条形图，并将向您展示一些条形图示例。

### 基本水平条形图
要创建基本的 JavaScript 条形图，最重要的属性是 `chart.type` 和 `plotOptions.bar.horizontal`，如下所述

```javascript
options = {
  chart: {
    type: 'bar'
  },
  plotOptions: {
    bar: {
      horizontal: true
    }
  },
  series: [{
    data: [{
      x: 'category A',
      y: 10
    }, {
      x: 'category B',
      y: 18
    }, {
      x: 'category C',
      y: 13
    }]
  }]
}
```

### 添加标记
水平条形图上的标记可用于比较，或者有助于提供与特定数据点相关的附加信息。

> 注意：标记不适用于堆叠图表

```javascript
{
  x: 'Category A',
  y: 54,
  goals: [
    {
      name: 'Expected',
      value: 52,
      strokeColor: '#775DD0'
    }
  ]
}
```

### 什么是堆积条形图以及如何绘制？
堆积条形图或堆叠条形图是一种条形图，用于将较大的类别分解为子段或子值，并比较它们以查看哪个子类别或子值在整体中占有较大的部分。

堆叠条形图有 2 种变体。

#### 普通堆叠条形图
条形图根据它们的值相互堆叠。

```javascript
chart: {
  stacked: true
}
```

#### 100% 堆叠条形图
条形图根据它们在各组中的百分比或权重相互堆叠。

```javascript
chart: {
  stacked: true,
  stackType: "100%"
}
```

### 更改特定数据点的颜色
通常，我们需要从其余数据中区分或突出显示某个数据点。在这种情况下，我们可以在构建系列时为该数据点注入颜色。下面是一个例子

```javascript
series: [{
  data: [{
    {
      x: 'Category A',
      y: 6653
    }, {
      x: 'Category B',
      y: 8133,
      fillColor: '#EB8C87',
      strokeColor: '#C23829'
    }, {
      x: 'Category C',
      y: 7132
    }
  }]  
}]
```

### 何时使用条形图？
由于条形图和图表非常容易解释，因此它们非常适合通过图表可视化比较数据。而且，它们非常适合 对于销售管理、库存管理或库存图表等场景，一些最常见的用例包括：

- 当您想要显示某个项目的价值随时间变化的趋势或变化时。
- 比较一个或多个数据系列的数据值时。
- 如果您必须检查分组在子类别中的多个数据点。

### 反转图表
反向条形图是从右到左而不是从左到右的镜像图表。以下配置将制作镜像图。

```javascript
yaxis: {
  reversed: true
}
```