---
title: 堆叠柱状图
order: 3
docGenIncludes:
  - src/components/YwColumnChart/index.tsx
---

```jsx
import React, { Component, useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment';
import { YwColumnChart } from '@ywfe/yw-charts';

const App = () => {
  const [data, setData] = useState([]);

  const asyncFetch = () => {
    fetch(
      'https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json'
    )
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => {
        console.log('fetch data failed', error);
      });
  };

  /** 定义每个字段的别名 和 展示格式 */
  const meta = {
    year: {
      alias: '年份',
      formatter: (v) => {
        return `${v}年`;
      },
    },
  };

  const originalPropsConfig = {
    // 柱状图最小最大宽度 单位 px
    // minColumnWidth: 20,
    // maxColumnWidth: 20,
    // 柱状图宽度比例
    columnWidthRatio: 0.5,
    // 是否堆叠显示
    isStack: true,
    // 堆叠后的文字显示配置
    label: {
      // 配置 label 数据标签位置
      position: 'top',
      // 'top', 'bottom', 'middle'
      // 可配置附加的布局方法
      layout: [
        // 柱形图数据标签位置自动调整. 开启自动调整 position 设置无效
        {
          type: 'interval-adjust-position',
        },
        // 数据标签防遮挡
        {
          type: 'interval-hide-overlap',
        },
        // 数据标签文颜色自动调整
        {
          type: 'adjust-color',
        },
      ],
    },
    // 不显示柱状图上数据标签
    label: null,
  };

  useEffect(() => {
    asyncFetch();
  }, []);

  return (
    <>
      <div className="com-chartbox">
        <YwColumnChart
          className="line-chart"
          data={data}
          xField="year"
          yField="value"
          seriesField="type"
          meta={meta}
          originalProps={originalPropsConfig}
        />
      </div>
    </>
  );
};

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