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

## 基础用法

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

const { _cssPrefix } = config;

class App extends Component {
  render() {
    return (
      <DemoWrapper id="demo-Chart">
        <BarStackChart
          title="条形堆叠占比图"
          total={1000}
          universalStyle={{ width: '450px' }}
          normOptions={{ widthRate: 40 }}
          dataSource={[{
            label: '图例标签指标',
            value: '20%',
            rate: 20,
          }, {
            label: '图例标签指标',
            value: '30%',
            rate: 30,
          }, {
            label: '图例标签指标',
            value: '50%',
            rate: 50,
          }]}
        />
      </DemoWrapper>
    );
  }
}

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