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

## 科技风 - 饼图

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

const props = {
  size: { width: 640, height: 340 },
  option: { legend: { show: true } },
  data: {
    xData: ['2小时以下', '2-6小时', '6-12小时', '12-24小时', '24及以上'],
    yData: [[13, 8, 7, 21, 38]],
  },
};

export default () => (
  <div
    style={{
      background: '#181B1D',
      width: '100%',
      height: '100%',
    }}
  >
    <Charts.SCPieChart {...props} />
  </div>
);
```

## API

| 参数   | 说明                                                                                        | 类型   |
| ------ | ------------------------------------------------------------------------------------------- | ------ |
| size   | 容器的宽高                                                                                  | object |
| option | 图表配置项，具体配置请参照[echarts 配置项 ](https://www.echartsjs.com/zh/option.html#title) | object |

### size

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