ECharts 实时折线

EChart 实时折线

这个地方真不知道写点啥.

js笔记：

var idData = [];
var myChart ;
function showRealTime(ec, list_devData) {
    var vData = [];
    var valData = [];
    var dataH = 0;
    var dateL = 0;
    var Series = [];
    for (var index = 0; index < list_devData.length; index++) {
        var obj = list_devData[index];
        vData.push(obj.dataName);
        idData.push(obj.dataId);
        valData.push(obj.dataValue);
        if (index > 1) {
            dataH = dataH - list_devData[index - 1].dataH > 0 ? dataH : list_devData[index - 1].dataH;
            dateL = dateL - list_devData[index - 1].dateL > 0 ? dataL  : list_devData[index - 1].dateL;
        } else {
            dataH = list_devData[index].dataH;
            dataL = list_devData[index].dataL;
        }
        var serie = new Object();
        serie.name = obj.dataName;
        serie.type = 'line';
        serie.data = (function() {
            var res = [];
            var len = 10;
            while (len--) {
                res.push(obj.dataValue);
            }
            return res;
        })();
        Series.push(serie);
    }

    myChart = ec.init(document.getElementById('main_chart_socket'));
    var option = {
        title : {
            text : '动态数据'
        },
        tooltip : {
            trigger : 'axis'
        },
        legend : {
            data : vData
        },
        toolbox : {
            show : true,
            feature : {
                /*mark : {
                    show : true
                },
                dataView : {
                    show : true,
                    readOnly : false
                },
                magicType : {
                    show : true,
                    type : ['line']
                },
                restore : {
                    show : false
                },*/
                saveAsImage : {
                    show : true
                }
            }
        },
        dataZoom : {
            show : false,
            start : 0,
            end : 100
        },
        xAxis : [{
                    type : 'category',
                    boundaryGap : true,
                    data : (function() {
                        var now = new Date();
                        var res = [];
                        var len = 10;
                        while (len--) {
                            res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
                            now = new Date(now - 2000);
                        }
                        return res;
                    })()
                }],
        yAxis : [{
                    type : 'value',
                    scale : true,
                    name : '温度',
                    boundaryGap : [0.2, 0.2]
                }],
        series : Series
    };
    myChart.setOption(option, true);
    /*eval('parent.$("#iframeToDeviceGroup")[0].contentWindow.main_chart_socket= option'); 这个可以存储数据到windowd对象百试不爽*/
}
function refreshshowRealTime(dateId, dateValue) {
    var Sindex = 0;
    for (var index = 0; index < idData.length; index++) {
        if(idData[index] == dateId){
            dateId = index;
        }
    }
    myChart.addData([[Sindex,dateValue, false, false]]);
}

搞开发的不容易…前后通吃也不容易啊…
哈哈哈哈…..