UNPKG

@linkdesign/screen

Version:

屏组件库,但使用场景又不局限于屏。主要用于BI、大盘和屏

93 lines (65 loc) 2.14 kB
# 环状占比统计图 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 - [ ] ......