---
order: 10
group:
  title: 文本
  order: 40
---

## 环形进度条

表示任务进度，数字和进度条联动

```tsx
import React from 'react';
import * as Charts from 'edata-charts';
const props = {
  option: {
    charts: {
      bgColor: 'rgba(55, 63, 75, 1)',
      radius: 10,
      borderRadius: 5,
      borderColor: 'white',
      borderWidth: 4,
    },
    series: [
      {
        itemStyle: {
          color: 'red',
          color1: 'rgb(10, 115, 255)',
          color2: 'rgb(10, 115, 255)',
          colorLinear: false,
        },
        radius: {
          0: 0.5,
          1: 0.7,
        },
      },
      {
        itemStyle: {
          color: 'rgba(255, 255, 255, 1)',
          color1: 'rgb(10, 115, 2)',
          color2: 'rgb(10, 115, 255)',
          colorLinear: true,
        },
      },
    ],
  },
};

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

## API

| 参数       | 说明           | 类型   |
| ---------- | -------------- | ------ |
| size       | 容器的宽高     | object |
| count      | 数值           | number |
| totalCount | 总数           | number |
| textStyle  | 文字样式       | object |
| outerBg    | 进度条外框背景 | string |
| innerBg    | 进度条内框背景 | string |

### size

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

### textStyle

| 参数       | 说明     | 类型   |
| ---------- | -------- | ------ |
| fontSize   | 字体大小 | number |
| fontFamily | 字体     | string |
| color      | 字体颜色 | string |
| fontWeight | 字体粗细 | string |