react+antv g2折线图定时器刷新数据

使用changeData 实时更新数据
需求：定时刷新接口，获取最新数据，并且渲染到 g2折线图中，每次只展示最新的20个数据。
那么我就直接上代码啦（主要代码）！
父组件中：

state={
	lineData :[]
}
 componentDidMount() {
    this.initData()
 }
 initData = () => {
        const { lineData } = this.state;
        let url = `${dataUrl}/storage/xxx`;
        //写一个自己的方法调用接口（这里我用的自己项目中的，具体就不写出来了，只要能拿到结果就行）
        axiosFn.commonGe(url).then(res => {
            if (res.data.status === 200) {
                const { writeRate, readRate } = res.data.data
                let sumNum = (readRate + writeRate).toFixed(2)
                let write = {
                    time: moment(new Date()).format("HH:mm:ss"),
                    type: '写',
                    number: writeRate
                }
                let read = {
                    time: moment(new Date()).format("HH:mm:ss"),
                    type: '读',
                    number: readRate
                }
                let sum = {
                    time: moment(new Date()).format("HH:mm:ss"),
                    type: '总',
                    number: Number(sumNum)
                }
                let data = [...lineData, write, read, sum];
                //每个分类超过20条数据就取最新的20条数据
                let new_lineData = data.length > 60 ? data.slice(-60) : data;
                this.setState({
                    lineData: new_lineData,
                    writeAndRead: {
                        writeRate,
                        readRate
                    },
                },()=>{
                    setTimeout(() => {
                        this.initData();
                    }, 1000 * 1)//1秒调用一次接口（也要刷新折线图）
                })
               
           
            } else {
                this.setState({
                    lineData: [],
                    writeAndRead: {
                        writeRate: 0,
                        readRate: 0
                    }
                })
            }
        })
    }

同时，引用子组件，并且传值

<LineChart  data={this.state.lineData} />

子组件（LineChart组件）

import React, { Component } from 'react'
import { Chart } from '@antv/g2';

export class LineChart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chart: null
        };
    }
    componentDidMount() {
        const { data } = this.props;
        let chart = new Chart({
            container: 'throughputLine',
            autoFit: true,
            height: 270,
            padding: [10, 50, 30, 80]
        });
        chart.data(data);
        chart.scale({
            number: {
                nice: true,
            },

        });
        chart.legend(false);
        chart.tooltip({
            showCrosshairs: true,
            shared: true,
        });

        chart.axis('number', {
            label: {
                formatter: (val) => {
                    return val + 'MBps';
                },
            },

        });
        chart
            .line()
            .position('time*number')
            .color('type', (val) => {
                let color = '#2D72D0'
                if (val === '写') {
                    color = '#E5B72E'
                } else if (val === '总') {
                    color = '#62B33E'
                }
                return color;
            })
            .shape('smooth');

        chart
            .point()
            .position('time*number')
            .color('type', (val) => {
                let color = '#2D72D0'
                if (val === '写') {
                    color = '#E5B72E'
                } else if (val === '总') {
                    color = '#62B33E'
                }
                return color;
            })

            .shape('circle');
        chart.render();
        this.setState({
            chart: chart
        })
    }
    componentWillReceiveProps(nextProps){
        const { data } = nextProps;
        const { chart } = this.state;
        chart !== null && chart.changeData(data);
    }

    render() {
        return (
            <div id='throughputLine'></div>
        )
    }
}
export default LineChart

效果如图：每秒添加一个数据，刷新一次，并且很丝滑~~