@linkdesign/screen/demo/Chart_BarChart/usage.md

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

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

## 基础用法

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

import '@alifd/next/index.css';
import '../../src/index.less';
import '../demo.css';

const { _cssPrefix } = config;


const barChart = (direction) => (
  <BarChart
    title="条形占比统计图"
    direction={direction}
    universalStyle={{ width: '450px', height: '266px' }}
    dataSource={[{
      label: '1.条形统计图对比项',
      value: '80%',
      rate: 80,
    }, {
      label: '2.条形统计图对比项',
      value: '70%',
      rate: 70,
    }, {
      label: '3.条形统计图对比项',
      value: '60%',
      rate: 60,
    }, {
      label: '4.条形统计图对比项',
      value: '50%',
      rate: 50,
    }, {
      label: '5.条形统计图对比项',
      value: '40%',
      rate: 40,
    }]}
  />
);


class App extends Component {
  render() {
    return (
      <DemoWrapper id="demo-Chart">
          <div className="bar-chart-hoz">
            {barChart('hoz')}
          </div>
          <div className="bar-chart-ver">
            {barChart('ver')}
          </div>
      </DemoWrapper>
    );
  }
}

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