雷达图(Radar)

## 什么是雷达图？
雷达图，也称为蜘蛛图或网络图，相当于极坐标中的平行坐标图。它是一个网状图，用于表示不同数值参数的相对影响。这些值绘制在从一个点向外辐射的刻度上，然后相互连接。

## 数据格式
雷达图的数据格式与其他基于轴的图表（线/条）上使用的相同。以下示例显示了雷达系列可接受的数据格式。数据点的标签必须在labels数组中单独提供。

```javascript
options = {
  series: [
    {
      name: "Radar Series 1",
      data: [45, 52, 38, 24, 33, 10]
    },
    {
      name: "Radar Series 2",
      data: [26, 21, 20, 6, 8, 15]
    }
  ],
  labels: ['April', 'May', 'June', 'July', 'August', 'September']
}
```
## 填满
您可以填充雷达内部的区域以及对填充区域应用不透明度。

![](/uploads/images/20221227/805c329649a8826fa803c40a1f29f878.png)

```javascript
options = {
  fill: {
    opacity: 0.5,
    colors: []
  }
}
```

`fill` 可以在以下位置找到完整的文档 [options.fill](http://www.bixiaguangnian.com/manual/apexcharts/306.html "options.fill")

## 描边/边框
用于绘制雷达的线可以通过以下方式自定义。

![](/uploads/images/20221227/4cd3b218554bf2bb2c46d85af803fa57.png)

```javascript
options = {
  stroke: {
    show: true,
    width: 2,
    colors: [],
    dashArray: 0
  }
}
```

`stroke` 可以在以下位置找到完整的文档 [options.stroke](http://www.bixiaguangnian.com/manual/apexcharts/328.html "options.stroke")

## 标记
标记是出现在数据点上的圆圈，当用户将鼠标悬停在数据点上时，这些圆圈有助于显示工具提示。

![](/uploads/images/20221227/ed7396df1bbccec290b5bc3ac8f609bb.png)

可以通过以下方式自定义标记。

```javascript
options = {
  markers: {
    size: 5,
    hover: {
      size: 10
    }
  }
}
```

`markers` 可以在以下位置找到完整的文档 [options.markers](http://www.bixiaguangnian.com/manual/apexcharts/311.html "options.markers")

## 自定义多边形
雷达图的多边形线是等角辐条，称为半径，看起来像蜘蛛网。

![](/uploads/images/20221227/f7448a3169f7ed84f4fa06caf1ab623e.png)

这个多边形的样式可以通过 `plotOptions.radar.polygons` 下面的属性来控制。

```javascript
options = {
  plotOptions: {
    radar: {
      polygons: {
        strokeColor: '#e8e8e8',
        fill: {
            colors: ['#f8f8f8', '#fff']
        }
      }
    }
  }
}
```

## 自定义 Y 轴标签
雷达图竖线上出现的标签可以通过配置中的[yaxis](http://www.bixiaguangnian.com/manual/apexcharts/334.html "yaxis")属性控制。

![](/uploads/images/20221227/a21f6ab3f6ed4efc65b1d5088fad1a73.png)

## 自定义 X 轴标签
雷达图外出现的标签可以通过设置启用/禁用 `xaxis.labels.show`。请注意，并非 xaxis 的所有属性都适用于雷达图，因为该图表与其他 XY 图表相比略有不同。只有下面列出的键适用于雷达图的 xaxis。

![](/uploads/images/20221227/7b4c175bae1336bd2619e2c353383c0d.png)

```javascript
xaxis: {
categories: ['April', 'May', 'June', 'July', 'August', 'September'],
labels: {
  show: true,
  style: {
    colors: ["#a8a8a8"]
    fontSize: "11px"
    fontFamily: 'Arial'
  }
}
}
```

## 自定义数据标签
出现在雷达图数据点上的标签称为数据[标签](http://www.bixiaguangnian.com/manual/apexcharts/305.html "标签")。

![](/uploads/images/20221227/7f584c8f23b80ecf3cea93ade995b8d9.png)

可以通过以下方式自定义数据标签

```javascript
dataLabels: {
  enabled: true,
  background: {
    enabled: true,
    borderRadius:2,
  }
}
```