native-echarts dynamic resource graphical real-time monitoring and sample code

native-echarts dynamic resource graphical real-time monitoring and sample code

1, to optimize the component integration

• native-echarts Integration: https://blog.csdn.net/weixin_44187730/article/details/86489233
• react-native-orientation integration: https://blog.csdn.net/weixin_44187730/article/details/86691850

2, the sample code

import React, {Component} from 'react';
import Echarts from 'native-echarts';
import Orientation from "react-native-orientation";

export default class EchartsDynamicChart extends Component {

    constructor(props) {
        super(...arguments);

        this.state = {
            qpsData: [],
            xData: [],
        };

        this._getDateToHS = this._getDateToHS.bind(this);
    }

    //返回mm:ss时间
    _getDateToHS = (date = new Date()) => {
        let mon = date.getMinutes();
        let sen = date.getSeconds();
        return (mon < 10 ? ('0' + mon) : mon) + ":" + (sen < 10 ? ('0' + sen) : sen);
    };

    //生命周期函数、render渲染之前调用
    componentWillMount() {
        //锁定为横屏展示
        Orientation.lockToLandscape();
    }

    //生命周期函数、render渲染完成启用回调
    componentDidMount() {
        setInterval(() => {
            const {qpsData, xData} = this.state;
            this.setState({
                qpsData: qpsData.length === 10 ? qpsData.splice(1, 10).concat(Math.ceil(Math.random() * 1000)) : qpsData.concat(Math.ceil(Math.random() * 1000)),
                xData: xData.length === 10 ? xData.splice(1, 10).concat(this._getDateToHS()) : xData.concat(this._getDateToHS())
            });
        }, 1000);
    }
    render() {
        //本示例只设置了基本参数、需要更多参数请官网查看
        const option = {
            title: {
                text: 'QPS流量监控',
                textStyle: {
                    fontSize: 15,
                    color: '#3385ff'
                }
            },
            tooltip: {
                trigger: 'axis',
                show: false
            },
            legend: {
                data: ['QPS流量监控']
            },
            grid: {
                x: 40,
                y: 30,
                x2: 10,
                y2: 35,
                borderWidth: 1,
                borderColor: "#066aff"
            },
            toolbox: {
                show: true,
                showTitle: true
            },
            xAxis: [{
                boundaryGap: true,
                type: 'category',
                splitLine: {
                    show: true
                },
                axisLabel: {
                    interval: 0,
                    rotate: 40,
                },
                data: this.state.xData
            }],
            yAxis: [{
                min: 0,
                max: 1000
            }],
            color: ['#0c76ff'],
            series: [
                {
                    name: 'QPS流量监控',
                    type: 'line',
                    data: this.state.qpsData,
                    label: {
                        normal: {
                            show: true
                        }
                    }
                }]
        };

        return (
            <Echarts option={option} height={300}/>
        );
    }
}

3, the effect of FIG.