---
title: 组件示例
order: 2
---

## 基础用法

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { DemoWrapper, RingChart, config } from '@linkdesign/screen';

const { _cssPrefix } = config;

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

class App extends Component {
  render() {
    return (
      <DemoWrapper id="demo-Chart" className="ring-chart-wrapper">
        <RingChart
          universalStyle={{ width: 240 }}
          title="处置率"
          percent={78}
        />

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

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