Recharts（一）动态资源显示图

需求

组件

在找寻了echarts/antv等图标库之后发现没有自己想要的，后面经过问其他人找到了这个组件Recharts：API文档

效果

因为是写博客，所以我就额外做了一个简单版的，主要是思路，这是最终的效果图

回归代码

import React, { useState, useEffect } from 'react';
import {
  AreaChart, Area, XAxis, YAxis, CartesianGrid,
} from 'recharts';
import { cloneDeep } from 'lodash';
import { Button } from 'antd';

// 一定要61个 不然不能填充满
function initData() {
  const data = []
  for (let i = 0; i <= 60; i++) {
    const item = {
      x: i,
      y: 0
    }
    data.push(item)
  }
  return data;
}

const CartChart: React.FC<any> = (props => {

  const initdata = initData()
  const [data, setData] = useState<any>(initdata)

  let setIntervalData: any = null;
  useEffect(() => {
    setIntervalData = setInterval(() => {
      changeData()
    }, 1000)
    return (() => {
      clearInterval(setIntervalData)
    })
  }, [])

  const changeData = () => {

    const value = (Math.random() * 100).toFixed(2);
    const item = {
      x: 0,
      y: value
    }
    // 往后添加
    data.push(item);
    data.shift();

    const newData: any[] = [];
    data.forEach((item: any, index: number) => {
      newData.push({ x: index, y: item.y })
    })
    setData(cloneDeep(newData))

  }

  return (
    <div>
      <Button type="primary" onClick={() => { changeData() }}>新增数据</Button>
      <AreaChart
        width={500}
        height={400}
        data={data}
        margin={{
          top: 10, right: 30, left: 0, bottom: 0,
        }}
      >
        <CartesianGrid stroke={'#8884d8'} />
        <XAxis
          dataKey="x"
          interval={0}
          domain={[0, 60]}
          ticks={[0, 10, 20, 30, 40, 50, 60]}
          stroke="rgba(0,0,0,0)" />

        <YAxis
          interval={0}
          stroke="rgba(0,0,0,0)"
          domain={[0, 100]}
          ticks={[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]}
        />
        <Area
          type="monotone"
          dataKey="y"
          stroke="#8884d8"
          fill="#8884d8"
          isAnimationActive={false} />
      </AreaChart>
    </div>

  )
})

export default CartChart;

这里最主要的就是数据一定要满（示例是61个），不然会报错！！

封装组件

这里我就暂时不写了，主要就是颜色，坐标系的封装，比如数据不用定死等等