---
title: 双轴-折线图
order: 1
docGenIncludes:
  - src/components/YwDualAxesChart/index.tsx
---

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

const App = () => {
  const data = {
    left: [
      {
        date: '2023-06-06',
        fans: 347402,
      },
      {
        date: '2023-06-07',
        fans: 0,
      },
      {
        date: '2023-06-08',
        fans: 0,
      },
      {
        date: '2023-06-09',
        fans: 0,
      },
      {
        date: '2023-06-10',
        fans: 295204,
      },
      {
        date: '2023-06-11',
        fans: 0,
      },
      {
        date: '2023-06-12',
        fans: 0,
      },
      {
        date: '2023-06-13',
        fans: 0,
      },
      {
        date: '2023-06-14',
        fans: 0,
      },
      {
        date: '2023-06-15',
        fans: 0,
      },
      {
        date: '2023-06-16',
        fans: 0,
      },
      {
        date: '2023-06-17',
        fans: 149380,
      },
      {
        date: '2023-06-18',
        fans: -100,
      },
      {
        date: '2023-06-19',
        fans: 0,
      },
      {
        date: '2023-06-20',
        fans: 0,
      },
      {
        date: '2023-06-21',
        fans: 0,
      },
      {
        date: '2023-06-22',
        fans: 0,
      },
      {
        date: '2023-06-23',
        fans: 0,
      },
      {
        date: '2023-06-24',
        fans: 0,
      },
      {
        date: '2023-06-25',
        fans: 0,
      },
      {
        date: '2023-06-26',
        fans: 0,
      },
      {
        date: '2023-06-27',
        fans: 0,
      },
      {
        date: '2023-06-28',
        fans: 0,
      },
      {
        date: '2023-06-29',
        fans: 0,
      },
      {
        date: '2023-06-30',
        fans: 0,
      },
    ],
    right: [
      {
        date: '2023-06-06',
        unitPrice: 122.684992,
      },
      {
        date: '2023-06-07',
        unitPrice: 0,
      },
      {
        date: '2023-06-08',
        unitPrice: 0,
      },
      {
        date: '2023-06-09',
        unitPrice: 0,
      },
      {
        date: '2023-06-10',
        unitPrice: 195.5004,
      },
      {
        date: '2023-06-11',
        unitPrice: 0,
      },
      {
        date: '2023-06-12',
        unitPrice: 0,
      },
      {
        date: '2023-06-13',
        unitPrice: 0,
      },
      {
        date: '2023-06-14',
        unitPrice: 0,
      },
      {
        date: '2023-06-15',
        unitPrice: 0,
      },
      {
        date: '2023-06-16',
        unitPrice: 0,
      },
      {
        date: '2023-06-17',
        unitPrice: 143.268365,
      },
      {
        date: '2023-06-18',
        unitPrice: 0,
      },
      {
        date: '2023-06-19',
        unitPrice: 0,
      },
      {
        date: '2023-06-20',
        unitPrice: 0,
      },
      {
        date: '2023-06-21',
        unitPrice: 0,
      },
      {
        date: '2023-06-22',
        unitPrice: 0,
      },
      {
        date: '2023-06-23',
        unitPrice: 0,
      },
      {
        date: '2023-06-24',
        unitPrice: 0,
      },
      {
        date: '2023-06-25',
        unitPrice: 0,
      },
      {
        date: '2023-06-26',
        unitPrice: 0,
      },
      {
        date: '2023-06-27',
        unitPrice: 0,
      },
      {
        date: '2023-06-28',
        unitPrice: 0,
      },
      {
        date: '2023-06-29',
        unitPrice: 0,
      },
      {
        date: '2023-06-30',
        unitPrice: 0,
      },
    ],
  };

  /** 定义每个字段的别名 和 展示格式 */
  const meta = {
    date: {
      alias: '时间',
      formatter: (v) => `${v}`,
    },
    fans: {
      alias: '粉丝增量',
      formatter: (v) => {
        return `${`${v.toFixed(0)}`.replace(
          /\d{1,3}(?=(\d{3})+$)/g,
          (s) => `${s},`
        )}`;
      },
    },
    unitPrice: {
      alias: '笔单价',
      formatter: (v) => {
        const d = v.toFixed(2);
        return `${d}`;
      },
    },
  };

  return (
    <>
      <div className="com-chartbox">
        <YwDualAxesChart
          className="line-chart"
          data={data}
          xField="date"
          yField={['fans', 'unitPrice']}
          meta={meta}
        />
      </div>
    </>
  );
};

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