---
order: 6
group:
  title: 图表
  order: 1
---

## 基础雷达图

## 点

```tsx
import React from 'react';
import * as Charts from 'edata-charts';

const props = {
  theme: {
    /**
     * 文本颜色
     */
    textColor: '#ddd',
    /**
     * 组件主色
     */
    primaryColor: '#50E113',
    secondColor: '#FDAFFF',
    thirdColor: '#DDD',
    colorList: ['#50E113', '#FDAFFF', '#DDD'],
  },
  legend: ['参数1', '参数2'],
  data: [
    {
      name: '标签-',
      max: 24000,
      value: {
        参数1: 4000,
        参数2: 6000,
      },
      axisLabel: { show: true },
    },
    {
      name: '标签二',
      max: 24000,
      value: {
        参数1: 5000,
        参数2: 7000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签三',
      max: 24000,
      value: {
        参数1: 7000,
        参数2: 8000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签四',
      max: 24000,
      value: {
        参数1: 4000,
        参数2: 6000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签五',
      max: 24000,
      value: {
        参数1: 14000,
        参数2: 16000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签六',
      max: 24000,
      value: {
        参数1: 10000,
        参数2: 15000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签七',
      max: 24000,
      value: {
        参数1: 8000,
        参数2: 6000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签八',
      max: 24000,
      value: {
        参数1: 9000,
        参数2: 1000,
      },
      axisLabel: { show: false },
    },
  ],
};

export default () => <Charts.SCRadarChart {...props} />;
```

## 面

```tsx
import React from 'react';
import * as Charts from 'edata-charts';

const props = {
  opacity: 0.5,
  theme: {
    /**
     * 文本颜色
     */
    textColor: '#ddd',
    /**
     * 组件主色
     */
    primaryColor: '#50E113',
    secondColor: '#FDAFFF',
    thirdColor: '#DDD',
    colorList: ['#50E113', '#FDAFFF', '#DDD'],
  },
  legend: ['参数1', '参数2'],
  data: [
    {
      name: '标签-',
      max: 24000,
      value: {
        参数1: 4000,
        参数2: 6000,
      },
      axisLabel: { show: true },
    },
    {
      name: '标签二',
      max: 24000,
      value: {
        参数1: 5000,
        参数2: 7000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签三',
      max: 24000,
      value: {
        参数1: 7000,
        参数2: 8000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签四',
      max: 24000,
      value: {
        参数1: 4000,
        参数2: 6000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签五',
      max: 24000,
      value: {
        参数1: 14000,
        参数2: 16000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签六',
      max: 24000,
      value: {
        参数1: 10000,
        参数2: 15000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签七',
      max: 24000,
      value: {
        参数1: 8000,
        参数2: 6000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签八',
      max: 24000,
      value: {
        参数1: 9000,
        参数2: 1000,
      },
      axisLabel: { show: false },
    },
  ],
};

export default () => <Charts.SCRadarChart {...props} />;
```

## 圆形雷达图点

```tsx
import React from 'react';
import * as Charts from 'edata-charts';

const props = {
  theme: {
    /**
     * 文本颜色
     */
    textColor: '#ddd',
    /**
     * 组件主色
     */
    primaryColor: '#50E113',
    secondColor: '#FDAFFF',
    thirdColor: '#DDD',
    colorList: ['#50E113', '#FDAFFF', '#DDD'],
  },
  shape: 'circle',
  legend: ['参数1', '参数2'],
  data: [
    {
      name: '标签-',
      max: 24000,
      value: {
        参数1: 4000,
        参数2: 6000,
      },
      axisLabel: { show: true },
    },
    {
      name: '标签二',
      max: 24000,
      value: {
        参数1: 5000,
        参数2: 7000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签三',
      max: 24000,
      value: {
        参数1: 7000,
        参数2: 8000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签四',
      max: 24000,
      value: {
        参数1: 4000,
        参数2: 6000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签五',
      max: 24000,
      value: {
        参数1: 14000,
        参数2: 16000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签六',
      max: 24000,
      value: {
        参数1: 10000,
        参数2: 15000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签七',
      max: 24000,
      value: {
        参数1: 8000,
        参数2: 6000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签八',
      max: 24000,
      value: {
        参数1: 9000,
        参数2: 1000,
      },
      axisLabel: { show: false },
    },
  ],
};

export default () => <Charts.SCRadarChart {...props} />;
```

## 圆形雷达图面

```tsx
import React from 'react';
import * as Charts from 'edata-charts';

const props = {
  opacity: 0.5,
  shape: 'circle',
  theme: {
    /**
     * 文本颜色
     */
    textColor: '#ddd',
    /**
     * 组件主色
     */
    primaryColor: '#50E113',
    secondColor: '#FDAFFF',
    thirdColor: '#DDD',
    colorList: ['#50E113', '#FDAFFF', '#DDD'],
  },
  legend: ['参数1', '参数2'],
  data: [
    {
      name: '标签-',
      max: 24000,
      value: {
        参数1: 4000,
        参数2: 6000,
      },
      axisLabel: { show: true },
    },
    {
      name: '标签二',
      max: 24000,
      value: {
        参数1: 5000,
        参数2: 7000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签三',
      max: 24000,
      value: {
        参数1: 7000,
        参数2: 8000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签四',
      max: 24000,
      value: {
        参数1: 4000,
        参数2: 6000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签五',
      max: 24000,
      value: {
        参数1: 14000,
        参数2: 16000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签六',
      max: 24000,
      value: {
        参数1: 10000,
        参数2: 15000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签七',
      max: 24000,
      value: {
        参数1: 8000,
        参数2: 6000,
      },
      axisLabel: { show: false },
    },
    {
      name: '标签八',
      max: 24000,
      value: {
        参数1: 9000,
        参数2: 1000,
      },
      axisLabel: { show: false },
    },
  ],
};

export default () => <Charts.SCRadarChart {...props} />;
```

## API

| 参数      | 说明                                    | 类型   |
| --------- | --------------------------------------- | ------ |
| opacity   | 雷达面积透明度 0 无面积 范围（0-1）     | object |
| shape     | 雷达形状 默认 polygon 多边形 shape 圆形 | string |
| textStyle | 雷达标签样式                            | object |
| legend    | 参数数组                                | array  |
| data      | 数据源                                  | array  |

### size

| 参数   | 说明 | 类型           |
| ------ | ---- | -------------- |
| width  | 宽度 | number\|string |
| height | 高度 | number\|string |

### data

| 参数           | 说明   | 类型           |
| -------------- | ------ | -------------- |
| name           | 标签名 | string         |
| max            | 最大值 | number\|string |
| value          | 数值   | object         |
| axisLabel.show | 刻度   | boolean        |

#### value

| 参数        | 说明         | 类型           |
| ----------- | ------------ | -------------- |
| legend 一致 | 自定义参数名 | number\|string |