echarts 实时数据展示

echarts 实时数据展示

由于 是嵌套数组，写着写着脑子很痛，就不愿思考，细节也无法完全把控，估计脑子在自我保护

写的时候一定得先想清楚数据结构是什么，我虽然想了，但是只想了一个大概就开写了，犯了大错。

一定要想清 那些是需要遍历 那些只需要遍历一次。先把外层模板搭建好，里面的就可以push进去。

 function Myecharts() {
          //由于最外层是不会变化的，第一遍获取数据就只需要把外层模板搭建好。
        getajax(function (data) {
            realTime.push(data)
            for (var i = 0; i < realTime.length; i++) {
                xAxis.push(realTime[i]['time'])
                for (var j = 0; j < openName.length; j++) {
                    series.push({
                        name: openName[j],
                        stack: "总量",
                        type: "line",
                        data: [realTime[i][openName[j]]]
                    })
                }
            }

        });
    
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('RealTimeCurve'));
        // 指定图表的配置项和数据
        var option = {
            legend: {
                data: openName,
                icon: 'circle',
                bottom: '0%',
                itemWidth: 20,
                itemHeight: 20,
                itemGap: 60
            },
            grid: {
                left: '3%',
                top:"5%",
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxis
            },
            yAxis: {
                type: 'value'
            },
            series: series
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        //每多少时间获取接口
        setInterval(function () {
            getajax(function (data) {
                var MyData = data

                //遍历获取到的值，找到对应的值push进去
                Object.keys(MyData).forEach(function (key) {
                    if (key == 'time') {
                        xAxis.push(MyData[key])
                    }
                })
                //里面数组数据push
                for (var i = 0; i < series.length; i++) {
                    Object.keys(MyData).forEach(function (key) {
                        if (series[i].name == key) {
                            console.log(key)
                            series[i].data.push(MyData[key])
                        }
                    });
                }
                console.log(xAxis, series, "111")
                myChart.setOption(option);

            });
        },20000);
    }