---
title: 折线图
order: 1
docGenIncludes:
  - src/components/YwLineChart/index.tsx
---

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

const App = () => {
  const [lineData, setLineData] = useState([]);

  const asyncFetch = () => {
    fetch(
      'https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json'
    )
      .then((response) => response.json())
      .then((json) => {
        setLineData(json);
      })
      .catch((error) => {
        console.log('fetch data failed', error);
      });
  };

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

  return (
    <>
      <div className="com-chartbox">
        <YwLineChart
          className="line-chart"
          data={lineData}
          xField="Date"
          yField="scales"
          xFieldMeta={{
            alias: '日期',
            formatter: (v) => `${v.replace('-', '年')}`,
          }}
          yFieldMeta={{
            alias: '收入',
            formatter: (v) =>
              `${`${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`)}元`,
          }}
        />
      </div>
    </>
  );
};

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