# 环状占比统计图 RingChart

## 使用场景

环状占比统计图

- 默认显示百分占比
- 也可自定义内容显示



## 预览

![环状占比统计图 RingChart](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/111014/1580796304284-3bf69bd0-52ec-490c-8d03-0771aa499812.png)   



## 演示

<!--before-content-->

## 基础用法

```js
import { Chart, config } from '@linkdesign/screen';

const { RingChart } = Chart;
const { _cssPrefix } = config;

const text = (
  <span className={`${_cssPrefix}main-indicator-data`}>7800</span>
);

class App extends React.Component {
  render() {
    return (
      <div className="ring-chart-wrapper">
        <RingChart
          universalStyle={{ width: 240 }}
          title="处置率"
          rate={78}
        />

        <RingChart
          universalStyle={{ width: 240 }}
          title="处置事件"
          rate={78}
          text={text}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />);
```

<!--after-content-->



### API

| 参数名                    | 说明         | 必填 | 类型                                                 | 默认值 | 备注 |
| ------------------------- | ------------ | ---- | ---------------------------------------------------- | ------ | ---- |
| className                         | 类名         | N    | String                                  | -                                                    |              |
| title | 图表标题 | N | ReactNode | - | |
| [universalStyle](#universalStyle) | 通用样式     | N    | Object                                  | -                                                    |              |
| titleOptions | 标题配置 | N | ITitle | {align: 'left'} |  |
| rate | 占比 | Y | Number | - |  |
| text | 自定义显示内容 | N | ReactNode | - |  |

#### universalStyle

```typescript
// 通用样式
universalStyle?: {
  width?: string | number;
  height?: string | number;
  position?: {
    x: string | number;
    y: string | number;
  };
  rotation?: number;
  opacity?: number;
  backgroundColor?: string;
};
```


## TODO List

- [ ] ......