---
title: 百分比堆叠面积图
order: 3
docGenIncludes:
  - src/components/YwAreaChart/index.tsx
---

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

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

  const asyncFetch = () => {
    fetch('https://gw.alipayobjects.com/os/bmw-prod/67ef5751-b228-417c-810a-962f978af3e7.json')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => {
        console.log('fetch data failed', error);
      });
  };

  /** 定义每个字段的别名 和 展示格式 */
  const meta = {
    year: {
      alias: '时间',
      formatter: (v) => `${v}`,
    },
    value: {
      alias: '比例',
      formatter: (v) => {
        return `${v * 100}%`;
      },
      // Y轴 百分比 0-100%
      min: 0,
      max: 1,
    },
  };

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

  return (
    <>
      <div className="com-chartbox">
        <YwAreaChart
          className="line-chart"
          data={data}
          xField="year"
          yField="value"
          seriesField="country"
          meta={meta}
          originalProps={{
            // 是否百分比堆叠
            isPercent: true,
            xAxis: {
              // x轴刻度数量
              tickCount: 10,
            },
          }}
        />
      </div>
    </>
  );
};

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