最近接手了一个react项目，里面需要用到折线图，看到图表的感觉不难。但是仔细一看引入的是 Ant Design Charts。然后去看了一下文档，发现好多地方的属性与echart区别很大，甚至用法都不一样了。最终结合文档，对属性一 一 试用了解，完成了任务。现给与记录，以便后来再使用方便。

实现目标( UI 给图 )                                                                             

现有折线图（ant 基础折线图）

提供数据格式如下：

1.首先安装包，导入引用直接看文档。传送门：快速上手 | Ant Design Charts

2.找到基础的折现配置，直接放入代码。data数据需要自己提供，数据格式参照上图。

3.最终config实现配置代码如下。注意：如果是ts就要在config后面加上类型为any

  const config: any = {
    height: 240,   // 画布高度
// padding:画布周围空白，如果字体过长过大，都要填充大一点，auto在苹果设备上可能会出现x轴坐标文字显示不完整
    padding: [40, 0, 40, 60], 
// data 数据源  xField的值取data中某个字段，表示x轴显示的文字。 yField同理 y轴的文字
    data: data
    xField: 'year',  
    yField: 'value',
// seriesField 这个是多条曲线的关键，如果数值有多种，就会出现多条曲线
    seriesField: 'category',
// tooltip 自定义触摸到曲线后显示数据弹窗的样式，不配就显示默认的
    tooltip: {
      customContent: (title: any, items: any): any => (
        <div style={{ padding: '12px 14px', fontSize: '12px', width: '180px', height: '68px' }}>
          {items && items.length === 2 && (
            <>
              <p className={styles.firstTg}>
                <span className={styles.yellowTip} />
                <span className={styles.scoendTg}>充值</span>
                {items[0] && items[0].data.amount}
              </p>
              <p className={styles.firstTg}>
                <span className={styles.greenTip} />
                <span className={styles.scoendTg}>消费</span>
                {items[1] && items[1].data.amount}
              </p>
            </>
          )}
          {items
            && items.length < 2
            && ((items && items[0] && items[0].name === '充值总额' && (
              <p className={styles.firstTg}>
                <span className={styles.yellowTip} />
                <span className={styles.scoendTg}>充值</span>
                {items[0] && items[0].data.amount}
              </p>
            ))
              || (items && items[0] && items[0].name === '消费总额' && (
                <p className={styles.firstTg}>
                  <span className={styles.greenTip} />
                  <span className={styles.scoendTg}>消费</span>
                  {items[0] && items[0].data.amount}
                </p>
              )))}
        </div>
      ),
    },
// 设置y轴的样式
    yAxis: {
      min: 0,
      max: 100,  // min 和 max 设置Y轴最大值和最小值，然后自动分配
      line: { style: { stroke: '#0A122E' }}// 配上这条数据才会显示y轴 stroke等同css color
       // label 配置y轴文字的样式
      label: {
        // formatter 对y轴文字进一步处理
        formatter: (v: any) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
        style: {
          stroke: '#0A122E',
          fontSize: 12,
          fontWeight: 300,
          fontFamily: 'Apercu',
        },
      },
       // grid 配置水平线的样式 下面配置为虚线如果要为实线，不用配置
      grid: {
        line: {
          style: {
            stroke: 'rgb(150,160,171)',
            lineDash: [4, 5],
          },
        },
      },
    },
    xAxis: {
      line: { style: { stroke: '#0A122E' } },
      label: {
        style: {
          stroke: '#0A122E',
          fontSize: 12,
          fontWeight: 300,
          fontFamily: 'Apercu',
        },
      },
    },
    //renderer 画布渲染配置，canvas 或 svg
    renderer: 'svg',
    // 是否为平滑曲线
    smooth: true,
    // 配置显示的2条曲线线条颜色，如果多条，继续添加，注意与右上角的图例颜色要对应
    color: ['#E09B27', '#38A636'],
    // 配置显示图例，就是上面那个可以点击的曲线
    legend: {
      //  图例相对于画布的位置
      position: 'top-right',
      // 每个图例的样式 
      items: [
        {
          name: '充值总额',
          marker: {
             // 是否为方块
            symbol: 'square',
            style: {
               // 填充颜色，注意要与线条颜色对应。
              fill: '#E09B27',
            },
          },
        },
        {
          name: '消费总额',
          marker: {
            symbol: 'square',
            style: {
              fill: '#38A636',
            },          
          },
        },
      ],
    },
  };

4。最终<Line {...config} />放入你想要放的位置。     

  <Line {...config} />