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

## 基础环形图

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

export default () => (
  <div style={{ background: '#000' }}>
    <Charts.RingChart
      height={500}
      option={{
        legend: {
          show: true,
          textStyle: {
            fontFamily: 'DINAlternate-Bold',
            fontWeight: 'normal',
            rich: { a: { fontSize: 14 } },
            color: '#fff',
          },
          orient: 'vertical',
          padding: 24,
          itemGap: 12,
          top: 'middle',
          left: '40%',
          icon: 'circle',
        },
        series: [
          {
            radius: ['60%', '75%'],
            data: [
              { name: '新增实有人口', value: 38 },
              { name: '疑似实有人口离开', value: 38 },
              { name: '管控人员出行异常', value: 33 },
              { name: '疑似非法经营', value: 62 },
              // { value: 335, name: '直接访问' },
              // { value: 310, name: '邮件营销' },
            ],
            label: { formatter: '{b|总次数}\n{a|171}{b|}' },
            center: ['19%'],
          },
        ],
        color: {
          '0': 'rgba(44, 180, 249, 1)',
          '1': 'rgba(53, 215, 236, 1)',
          '2': 'rgba(255, 153, 0, 1)',
          '3': 'rgba(208, 230, 255, 1)',
          '4': 'rgba(250, 101, 103, 1)',
          '5': 'rgba(208, 230, 255, 1)',
        },
        animation: true,
        animationEasing: 'cubicInOut',
        animationDuration: 1000,
        animationDurationUpdate: 300,
        tooltip: {
          show: true,
          hideDelay: 100,
          textStyle: {
            fontFamily: 'Microsoft Yahei',
            fontWeight: 'normal',
            fontSize: 12,
            color: '#fff',
          },
        },
      }}
    />
  </div>
);
```

## API

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

### size

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