@linkdesign/screen
Version:
屏组件库,但使用场景又不局限于屏。主要用于BI、大盘和屏
93 lines (65 loc) • 2.14 kB
Markdown
# 环状占比统计图 RingChart
## 使用场景
环状占比统计图
- 默认显示百分占比
- 也可自定义内容显示
## 预览

## 演示
<!--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
- [ ] ......