饼图 / 圆环图(Pie / Donut)

## 什么是饼图/圆环图？
饼图和圆环图是有用的可视化工具，可用于以百分比、比率的形式表达数据和信息。饼图在处理少量数据时最有效。它是通过将所有需要的数据聚类成一个圆形框架来构建的，其中数据以切片的形式描述。在 ApexCharts 中，饼图/圆环图切片可以通过图案/渐变/图像制作，以增加视觉吸引力。

除非另有说明，否则下面描述的所有选项和配置都适用于饼图和圆环图。

## 数据格式
饼图/圆环图 series 的数据格式是一维数值数组，如下所述。值的名称必须在labels数组中单独提供。

```javascript
  options = {
    series: [44, 55, 13, 33],
    labels: ['Apple', 'Mango', 'Orange', 'Watermelon']
  }
```

> 以上语法如果用于核心 `apexcharts` 库。如果你使用的是 Vue/React，你需要在 `chartOptions` 中传递标签

```javascript
  series: [44, 55, 41, 17, 15],
  chartOptions: {
    labels: ['Apple', 'Mango', 'Orange', 'Watermelon']
  }
```

## 圆环图
圆环图类似于饼图，其中图表的中心留空。可以通过修改单个属性将饼图转换为圆环图。

```javascript
  options = {
    chart: {
      type: 'donut'
    }
  }
```

## 自定义数据标签
饼图/圆环图中的数据标签是显示在切片中的百分比值。

![](/uploads/images/20221226/bdb2bf97d316347bd2f3a1c0abbc168e.png)

这些数据标签的配置必须按以下方式完成。

```javascript
  options = {
    dataLabels: {
      enabled: true,
      formatter: function (val) {
        return val + "%"
      },
      dropShadow: {
        ...
      }
    }
  }
```

可以在此处访问 [dataLabels 的完整文档](http://www.bixiaguangnian.com/manual/apexcharts/305.html "dataLabels 的完整文档")

## 改变饼图的大小
如果饼图的默认大小计算对您来说效果不佳，您可以通过一些选项来控制饼图/圆环图的大小。

### 1. 设置饼图的缩放比例
这类似于 CSS `transform: scale()` 属性，您可以在其中通过提供数值来调整饼图/圆环图的大小，它会根据您提供的值增加或减少大小。

```javascript
  options = {
    plotOptions: {
      pie: {
        customScale: 0.8
      }
    }
  }
```

### 2. 设置固定尺寸
您还可以为馅饼/圆环图设置固定大小。请注意，您在那里设置的尺寸不会响应，并且无论其周围的可用宽度如何都会固定。

```javascript
  options = {
    plotOptions: {
      pie: {
        size: 200
      }
    }
  }
```

## 改变圆环图的大小
内部圆环图半径可以用 `plotOptions.pie.donut.size` 属性控制。该值必须是一个百分比值，它将根据您提供的百分比增加/减少圆环图内的间距。

```javascript
  options = {
    plotOptions: {
      pie: {
        donut: {
          size: '65%'
        }
      }
    }
  }
```

## 圆环图标签
除了数据标签（切片内的百分比）之外，您还可以在用户将鼠标悬停在切片上时显示圆环图标签。

![](/uploads/images/20221226/f60436f7a4700e84541fded12c594ab1.png)

圆环图标签配置必须按如下方式完成。

```javascript
  options = {
    plotOptions: {
      pie: {
        donut: {
          labels: {
            show: true,
            name: {
              ...
            },
            value: {
              ...
            }
          }
        }
      }
    }
  }
```

可以在此处访问[圆环图标签的完整配置](http://www.bixiaguangnian.com/manual/apexcharts/321.html#labels: "圆环图标签的完整配置")

## 禁用切片扩展
当您单击饼图/甜甜圈切片时，它会根据选择扩大其大小。

![](/uploads/images/20221227/64f9212660eb01e2df1625c7f120f2ab.png)

您可以通过设置关闭此默认行为

```javascript
  options = {
    plotOptions: {
      pie: {
        expandOnClick: false
      }
    }
  }
```