---
title: 多折线比例展示
order: 4
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 = [
    {
      liveDate: '2023-07-13',
      avgViewTime: 221,
      avgWatchNum: 4562,
      totalWatchNum: 82368,
      payAmt: 1539558,
      watchToDealRate: 0.0195,
    },
    {
      liveDate: '2023-07-14',
      avgViewTime: 301,
      avgWatchNum: 1562,
      totalWatchNum: 69368,
      payAmt: 2039558,
      watchToDealRate: 0.0195,
    },
    {
      liveDate: '2023-07-15',
      avgViewTime: 301,
      avgWatchNum: 1062,
      totalWatchNum: 9368,
      payAmt: 239558,
      watchToDealRate: 0.0295,
    },
    {
      liveDate: '2023-07-16',
      avgViewTime: 131,
      avgWatchNum: 962,
      totalWatchNum: 55368,
      payAmt: 1839558,
      watchToDealRate: 0.042,
    },
    {
      liveDate: '2023-07-17',
      avgViewTime: 421,
      avgWatchNum: 1562,
      totalWatchNum: 69368,
      payAmt: 2039558,
      watchToDealRate: 0.0195,
    },
    {
      liveDate: '2023-07-18',
      avgViewTime: 301,
      avgWatchNum: 1562,
      totalWatchNum: 69368,
      payAmt: 2039558,
      watchToDealRate: 0.0195,
    },
    {
      liveDate: '2023-07-19',
      avgViewTime: 211,
      avgWatchNum: 1562,
      totalWatchNum: 69368,
      payAmt: 2039558,
      watchToDealRate: 0.0195,
    },
    {
      liveDate: '2023-07-21',
      avgViewTime: 321,
      avgWatchNum: 1562,
      totalWatchNum: 69368,
      payAmt: 2039558,
      watchToDealRate: 0.0195,
    },
    {
      liveDate: '2023-07-22',
      avgViewTime: 401,
      avgWatchNum: 1562,
      totalWatchNum: 69368,
      payAmt: 1869558,
      watchToDealRate: 0.0195,
    },
    {
      liveDate: '2023-07-23',
      avgViewTime: 281,
      avgWatchNum: 1562,
      totalWatchNum: 69368,
      payAmt: 1569558,
      watchToDealRate: 0.0195,
    },
    {
      liveDate: '2023-07-26',
      avgViewTime: 89,
      avgWatchNum: 1140,
      payAmt: 3803290.44,
      totalWatchNum: 116982,
      watchToDealRate: 0.0383,
    },
  ];

  // Y轴字段映射
  const yFieldMap = {
    avgViewTime: {
      title: '平均观看时长',
      // formatter: (v) => `${(v / 60).toFixed(2)}分钟`,
      dataType: 'secToTime',
    },
    avgWatchNum: {
      title: '平均观看人数',
      formatter: (v) => `${v}`,
      dataType: 'int',
    },
    totalWatchNum: {
      title: '总观看人数',
      // formatter: (v) => `${v}`,
      dataType: 'int', // 更具类型自动转换。参考 formatData 函数
    },
    payAmt: {
      title: '支付金额',
      // formatter: (v) => `${v}`,
      dataType: 'yuan',
    },
    watchToDealRate: {
      title: '观看成交转化率',
      formatter: (v) => `${(v * 100).toFixed(2)}%`, // 存在formater优先使用formater. 不存在则使用dataType
      dataType: 'decimalToPercentSave2Decimal',
    },
  };

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

  return (
    <>
      <div style={{ marginBottom: '12px', fontSize: '13px', color: '#666' }}>
        用于多个指标数值差异大无法美观显示，使用该模式折线将会转换到到0-100%区间，平滑展示起伏的差异。在tooltip上会展示具体的数值。
      </div>
      <div className="com-chartbox">
        <YwLineChart
          className="line-chart"
          proportionMode={true}
          yFieldMap={yFieldMap}
          data={lineData}
          xField="liveDate"
          yField="value"
          seriesField="type"
          smooth={true}
          xFieldMeta={{
            alias: '日期',
            formatter: (v) => `${v}`,
          }}
        />
      </div>
    </>
  );
};

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