---
title: 双轴-多折线图
order: 2
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 leftData = [
    {
      time: '2019-03',
      value: 350,
      type: 'UV',
    },
    {
      time: '2019-04',
      value: 900,
      type: 'UV',
    },
    {
      time: '2019-05',
      value: 300,
      type: 'UV',
    },
    {
      time: '2019-06',
      value: 450,
      type: 'UV',
    },
    {
      time: '2019-07',
      value: 470,
      type: 'UV',
    },
    {
      time: '2019-03',
      value: 220,
      type: 'PV',
    },
    {
      time: '2019-04',
      value: 300,
      type: 'PV',
    },
    {
      time: '2019-05',
      value: 250,
      type: 'PV',
    },
    {
      time: '2019-06',
      value: 220,
      type: 'PV',
    },
    {
      time: '2019-07',
      value: 362,
      type: 'PV',
    },
  ];
  const rightData = [
    {
      time: '2019-03',
      count: 800,
      name: '北京',
    },
    {
      time: '2019-04',
      count: 600,
      name: '北京',
    },
    {
      time: '2019-05',
      count: 400,
      name: '北京',
    },
    {
      time: '2019-06',
      count: 380,
      name: '北京',
    },
    {
      time: '2019-07',
      count: 220,
      name: '北京',
    },
    {
      time: '2019-03',
      count: 750,
      name: '上海',
    },
    {
      time: '2019-04',
      count: 650,
      name: '上海',
    },
    {
      time: '2019-05',
      count: 450,
      name: '上海',
    },
    {
      time: '2019-06',
      count: 400,
      name: '上海',
    },
    {
      time: '2019-07',
      count: 320,
      name: '上海',
    },
    {
      time: '2019-03',
      count: 900,
      name: '杭州',
    },
    {
      time: '2019-04',
      count: 600,
      name: '杭州',
    },
    {
      time: '2019-05',
      count: 450,
      name: '杭州',
    },
    {
      time: '2019-06',
      count: 300,
      name: '杭州',
    },
    {
      time: '2019-07',
      count: 200,
      name: '杭州',
    },
  ];

  /** 定义每个字段的别名 和 展示格式 */
  const meta = {
    date: {
      alias: '时间',
      formatter: (v) => `${v}`,
    },
    value: {
      formatter: (v) => {
        return `${v.toFixed(0)}人`;
      },
    },
    count: {
      formatter: (v) => {
        const d = v.toFixed(2);
        return `${d}`;
      },
    },
  };

  return (
    <>
      <div className="com-chartbox">
        <YwDualAxesChart
          className="line-chart"
          data={{
            left: leftData,
            right: rightData,
          }}
          xField="time"
          yField={['value', 'count']}
          meta={meta}
          geometryOptions={[
            {
              // 图形样式
              geometry: 'line',
              // 数据分组字段
              seriesField: 'type',
              // 图形样式配置
              lineStyle: {
                lineWidth: 2,
                lineDash: [2, 5],
              },
              // 平滑曲线
              smooth: true,
            },
            {
              geometry: 'line',
              seriesField: 'name',
              point: {},
            },
          ]}
        />
      </div>
    </>
  );
};

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