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

## 基础用法

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

const { _cssPrefix } = config;

class App extends Component {
  render() {
    return (
      <DemoWrapper id="demo-Chart" className="ring-chart-wrapper">
        <RingStackChart
            title="标题"
            universalStyle={{  height: '240px' }}
            options={{
              legend: {
                textStyle: {
                  color: '#fff',
                  textBorderWidth: 0,
                }
              },
              series: [{
                label: {
                  color: '#fff',
                  textBorderWidth: 0,
                },
              }]
            }}
            dataSource={
              [
                {value: 1, name: '类别1'},
                {value: 2, name: '类别2'},
                {value: 6, name: '类别3'},
                {value: 2, name: '类别4'},
                {value: 8, name: '类别5'},
                {value: 2, name: '类别6'},
              ]
            }
        />
      </DemoWrapper>
    );
  }
}

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