---
title: 条形堆叠占比图
order: 13
---

## 图表类-条形堆叠占比图（条形图） BarStackChart

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

const { BarStackChart } = Chart;

const App = () => {
  return (
    <div data-theme="dark" className={`container ${STYLE_PREFIX}main-body`}>
      <BarStackChart
        title="条形堆叠占比图"
        className="chart"
        dataSource={[{
          label: '图例标签指标',
          value: '20%',
          rate: 20,
        }, {
          label: '图例标签指标',
          value: '30%',
          rate: 30,
        }, {
          label: '图例标签指标',
          value: '50%',
          rate: 50,
        }]}
        universalStyle={{ width: '450px' }}
        normOptions={{ widthRate: 40 }}
      />
    </div>
  );
}

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

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

.chart {
  background-color: #1f3b6d;
  padding: 20px;
}
````
