---
title: 百分比柱状图
order: 4
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 = [
    {
      country: '中国',
      year: '1750',
      value: 502,
    },
    {
      country: '中国',
      year: '1800',
      value: 635,
    },
    {
      country: '中国',
      year: '1850',
      value: 809,
    },
    {
      country: '中国',
      year: '1900',
      value: 947,
    },
    {
      country: '中国',
      year: '1950',
      value: 1402,
    },
    {
      country: '中国',
      year: '1999',
      value: 3634,
    },
    {
      country: '中国',
      year: '2050',
      value: 5268,
    },
    {
      country: '美国',
      year: '1750',
      value: 106,
    },
    {
      country: '美国',
      year: '1800',
      value: 107,
    },
    {
      country: '美国',
      year: '1850',
      value: 111,
    },
    {
      country: '美国',
      year: '1900',
      value: 133,
    },
    {
      country: '美国',
      year: '1950',
      value: 221,
    },
    {
      country: '美国',
      year: '1999',
      value: 767,
    },
    {
      country: '美国',
      year: '2050',
      value: 1766,
    },
    {
      country: '英国',
      year: '1750',
      value: 163,
    },
    {
      country: '英国',
      year: '1800',
      value: 203,
    },
    {
      country: '英国',
      year: '1850',
      value: 276,
    },
    {
      country: '英国',
      year: '1900',
      value: 408,
    },
    {
      country: '英国',
      year: '1950',
      value: 547,
    },
    {
      country: '英国',
      year: '1999',
      value: 729,
    },
    {
      country: '英国',
      year: '2050',
      value: 628,
    },
    {
      country: '法国',
      year: '1750',
      value: 502,
    },
    {
      country: '法国',
      year: '1800',
      value: 635,
    },
    {
      country: '法国',
      year: '1850',
      value: 809,
    },
    {
      country: '法国',
      year: '1900',
      value: 502,
    },
    {
      country: '法国',
      year: '1950',
      value: 635,
    },
    {
      country: '法国',
      year: '1999',
      value: 809,
    },
    {
      country: '法国',
      year: '2050',
      value: 809,
    },
    {
      country: '德国',
      year: '1750',
      value: 67,
    },
    {
      country: '德国',
      year: '1800',
      value: 127,
    },
    {
      country: '德国',
      year: '1850',
      value: 157,
    },
    {
      country: '德国',
      year: '1900',
      value: 227,
    },
    {
      country: '德国',
      year: '1950',
      value: 1402,
    },
    {
      country: '德国',
      year: '1999',
      value: 3634,
    },
    {
      country: '德国',
      year: '2050',
      value: 5268,
    },
    {
      country: '日本',
      year: '1750',
      value: 27,
    },
    {
      country: '日本',
      year: '1800',
      value: 57,
    },
    {
      country: '日本',
      year: '1850',
      value: 127,
    },
    {
      country: '日本',
      year: '1900',
      value: 47,
    },
    {
      country: '日本',
      year: '1950',
      value: 402,
    },
    {
      country: '日本',
      year: '1999',
      value: 634,
    },
    {
      country: '日本',
      year: '2050',
      value: 2268,
    },
  ];

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

  const originalPropsConfig = {
    // 柱状图宽度比例
    columnWidthRatio: 0.3,
    // 是否百分比
    isPercent: true,
    // 是否堆叠
    isStack: true,
  };

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

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

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