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

## 自定义环形图

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

export default () => (
  <div style={{}}>
    <Charts.SCRingChart height={500} />
  </div>
);
```

```tsx
import React from 'react';
import * as Charts from 'edata-charts';
const props = {
  data: [
    { value: 335, name: '直接访问' },
    { value: 310, name: '邮件营销' },
    { value: 335, name: '直接访问1' },
  ],
  theme: {
    /**
     * 文本颜色
     */
    textColor: '#ddd',
    /**
     * 组件主色
     */
    primaryColor: '#50E113',
    secondColor: '#FDAFFF',
    thirdColor: '#DDD',
    colorList: ['#50E113', '#FDAFFF', '#DDD'],
  },
  backgroundColor: 'red',
};
export default () => (
  <div>
    <Charts.SCRingChart height={500} {...props} />
  </div>
);
```

## API

| 参数            | 说明                                                                                        | 类型   |
| --------------- | ------------------------------------------------------------------------------------------- | ------ |
| size            | 容器的宽高                                                                                  | object |
| option          | 图表配置项，具体配置请参照[echarts 配置项 ](https://www.echartsjs.com/zh/option.html#title) | object |
| backgroundColor | 饼之间的间隔颜色                                                                            | array  |
| theme           | 主题                                                                                        | obj    |

### size

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