---
title: 条形占比统计图
order: 12
---

## 图表类-条形占比统计图（条形图） BarChart

````jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Chart, STYLE_PREFIX } from '@linkdesign/screen';

const { BarChart } = Chart;

const barChart = (direction) => (
  <BarChart
    title="条形占比统计图"
    dataSource={[{
      label: '1.条形统计图对比项',
      value: '80%',
      rate: 80,
    }, {
      label: '2.条形统计图对比项',
      value: '80%',
      rate: 80,
    }, {
      label: '3.条形统计图对比项',
      value: '80%',
      rate: 80,
    }]}
    direction={direction}
    universalStyle={{ width: '450px' }}
    titleOptions={{
      textStyle: {
        marginBottom: 8, // 调整标题与内容的间距
      },
    }}
  />
);

const App = () => {
  return (
    <div data-theme="dark" className={`container ${STYLE_PREFIX}main-body`}>
      <div className="bar-chart-hoz">
        {barChart('hoz')}
      </div>
      <div className="bar-chart-ver">
        {barChart('ver')}
      </div>
    </div>
  );
}

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

````css
.container {
  position: relative;
  display: flex;
}

.bar-chart-hoz,
.bar-chart-ver {
  background-color: #1f3b6d;
  padding: 20px;
}

.bar-chart-ver {
  margin-left: 50px;
}
````
