径向条形图 / 仪表图(RadialBar / Circular Gauge)

## 什么是径向条形图/圆形仪表图？
径向条形图或圆形仪表图是在极坐标系（而不是笛卡尔平面）上绘制的典型条形图。它以百分比表示圆形数字刻度上的值，较长的条表示较大的值。

使用 ApexCharts 径向条形图，您可以用多种格式表示数据，例如：多个径向条形图、带图像的径向条形图，甚至半圆形仪表形式。

## 径向条形图有什么用？
径向条形图或圆形仪表图主要用于单个单元数据以指示进度/活动。当您想通过使用圆形条形来可视化类别之间的比较时，它们也非常有价值。

## 如何制作径向条形图？
在本节中，我们将向您展示如何制作径向条形图、如何设置自定义颜色、如何更改 `startAngle` 和 `endAngle`，并将演示如何轻松显示数据标签。

请记住，这些图表的值必须以百分比表示（介于 0 和 100 之间）。您仍然可以在标签中显示原始值，但系列中显示的数据必须始终以百分比形式显示。

## 基本圆图
我们将从一个非常简单的 RadialBar / Circle Chart 开始，然后逐渐更改一些选项。

上面的示例显示了一个没有额外自定义的基本圆图。接下来，我们将对轨道/镂空背景和颜色进行一些自定义

- 改变笔画的线头
- 更改内部空心尺寸
- 自定义数据标签的字体大小和颜色

接下来，我们进行更多更改以使其更具视觉吸引力。

## 自定义颜色
我们将进行以下更改以自定义轨道/空心背景颜色

- 为镂空添加背景颜色
- 添加一个微妙的 dropShadow 来跟踪
- 用渐变颜色填充路径

接下来，我们通过更改 2 个属性将此 Circle Chart 转换为 Radial Gauge – `startAngle` & `endAngle`

## 自定义角度
- 更改 `plotOptions.radialBar` 的 `startAngle` 和 `endAngle`
- 更改 `plotOptions.radialBar.track` 的 `startAngle` 和 `endAngle`
- 更改轨道颜色的空心背景色

## 数据标签
下面的代码显示了当用户将鼠标悬停在每个条形图上时如何在每个系列的图表内圈中显示数据标签。

还有一个可选total属性，它显示系列数组的所有值的相加。您可以将自定义格式化程序应用于 `plotOptions.dataLabels.radialBar.total.formatter` 函数以修改输出。

```javascript
  plotOptions: {
    radialBar: {
      dataLabels: {
        name: {
          show: true,
        },
        value: {
          show: true,
          fontSize: '14px',
          formatter: function (val) {
            return val + '%'
          }
        },
        total: {
          show: true,
          label: 'Total'
        }
      }
    }
  }
```

查看dataLabels的所有选项，请查看 [radialBar](http://www.bixiaguangnian.com/manual/apexcharts/324.html#dataLabels: "radialBar") 配置