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

## 自定义渐变迷你环形图

六个标签

```tsx
import React from 'react';
import * as Charts from 'edata-charts';
const props = {
  size: { width: 370 },
  data: [
    { sum: 100, data: { value: 40, name: '标签1' } },
    { sum: 100, data: { value: 45, name: '标签2' } },
    { sum: 100, data: { value: 60, name: '标签3' } },
    { sum: 100, data: { value: 70, name: '标签4' } },
    { sum: 100, data: { value: 80, name: '标签5' } },
    { sum: 100, data: { value: 90, name: '标签6' } },
  ],
  theme: {
    /**
     * 文本颜色
     */
    textColor: '#ddd',
    /**
     * 组件主色
     */
    primaryColor: '#50E113',
    secondColor: '#FDAFFF',
    thirdColor: '#DDD',
    colorList: ['#50E113', '#FDAFFF', '#DDD'],
  },
  backgroundColor: 'red',
};
export default () => <Charts.SCMiniRingChart height={500} {...props} />;
```

四个标签

```tsx
import React from 'react';
import * as Charts from 'edata-charts';
const props = {
  size: { width: 370 },
  data: [
    { sum: 100, data: { value: 40, name: '标签1' } },
    { sum: 100, data: { value: 45, name: '标签2' } },
    { sum: 100, data: { value: 60, name: '标签3' } },
    { sum: 100, data: { value: 80, name: '标签4' } },
  ],
  backgroundColor: 'red',
};
export default () => <Charts.SCMiniRingChart height={500} {...props} />;
```

## API

| 参数            | 说明                       | 类型   |
| --------------- | -------------------------- | ------ |
| size            | 容器的宽高                 | object |
| data            | 数据源（最好 6 个或 4 个） | object |
| backgroundColor | 饼渐变初始的颜色           | array  |

### size

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

### list

| 参数 | 说明     | 类型           |
| ---- | -------- | -------------- |
| sum  | 总数值   | number\|string |
| data | 具体数据 | object         |

#### data

| 参数  | 说明     | 类型           |
| ----- | -------- | -------------- |
| value | 统计数值 | number\|string |
| name  | 标签名   | string         |