echarts多个折线图

Ext.define('app.report.systemreport.controller.HkTempVacuumController', {
    extend : 'Ext.app.ViewController',
    alias :'controller.HkTempVacuumController',
    requires : [ 'app.report.systemreport.controller.HkTempVacuumController'],
    doReset : function(){
        this.lookupReference('queryForm').getForm().reset();
    },
    doConfirm : function () {
        var me = this;
        var equipCode = Ext.getCmp('HkTempVacuumMng_form_equipCode').getValue();
        var parameter = Ext.getCmp('HkTempVacuumMng_form_parameter').getValue();
        var startTime = Ext.getCmp('HkTempVacuumMng_form_startTime').getValue();
        var endTime = Ext.getCmp('HkTempVacuumMng_form_endTime').getValue();
        
        if(Ext.isEmpty(equipCode)) {
            Tool.alert(Tool.str.msgConfirmTitle, "请选择设备编码!");
            return;
        }
        
        if(Ext.isEmpty(parameter)) {
            Tool.alert(Tool.str.msgConfirmTitle, "请选择参数!");
            return;
        }
        
        if(Ext.isEmpty(startTime) || Ext.isEmpty(endTime)) {
            Tool.alert(Tool.str.msgConfirmTitle, "请选择一个时间段!");
            return;
        }
        Ext.Ajax.request({
            url: 'main/equipmentAction/getHkTempVacuumCollect.mvc',
            method: 'post',
            params: {
                equipCode: equipCode,
                startTime: startTime,
                endTime: endTime,
            },
            success: function (response, options) {
                var o = Ext.decode(response.responseText);
                if (o.total == 0) {
                    Tool.alert(Tool.str.msgConfirmTitle, "数据为空!");
                } else {
                    me.doGraphic(o, parameter);
                }
            }
        });
    },
    doGraphic : function(o, parameter) {
        var records = o.rows;
        var timeData = [];
        var topControlTemArray = [];
        var lowerControlTemArray = [];
        var leftControlTemArray = [];
        var rightControlTemArray = [];
        var frontControlTemArray = [];
        var afterControlTemArray = [];
        var vacuumMeasValueArray = [];
        for ( var i = 0; i < records.length; i++) {
            timeData.push(records[i].time);
            topControlTemArray.push(records[i].topControlTem);
            lowerControlTemArray.push(records[i].lowerControlTem);
            leftControlTemArray.push(records[i].leftControlTem);
            rightControlTemArray.push(records[i].rightControlTem);
            frontControlTemArray.push(records[i].frontControlTem);
            afterControlTemArray.push(records[i].afterControlTem);
            vacuumMeasValueArray.push(records[i].vacuumMeasValue);
        }

        var seriesArr = [];
        var xAxisArr = [];
        var yAxisArr = [];
        var gridArr = [];
        var titleArr = [];
        
        var parameterArr = [];
        var paramterStr = parameter.toString();
        parameterArr = paramterStr.split(",");
        
        var indexNum = Math.floor(96/parameterArr.length);
        
        var shortNum = 4.5;
        
        for(var i = 0; i < parameterArr.length; i++) {
            if(parameterArr[i].indexOf("TopControlTem") != -1) {
                var serieObj = {type:'line',showSymbol:false,data:topControlTemArray,xAxisIndex:i,yAxisIndex:i};
                var xAxisObj = {data:timeData,gridIndex:i};
                var yAxisObj = {splitLine:{show:false},gridIndex:i};
                var topStr = '';
                if(i != 0) {
                    topStr = (1 + indexNum * i + shortNum) + '%';
                } else {
                    topStr = (1 + indexNum * i) + '%';
                }
                var bottomStr = '';
                if(i != parameterArr.length - 1) {
                    bottomStr = (3 + indexNum * (parameterArr.length -1 - i) + shortNum) + '%';
                } else {
                    bottomStr = (3 + indexNum * (parameterArr.length -1 - i)) + '%';
                }
                var gridObj = {top:topStr,bottom:bottomStr};
                var titleObj = {top:topStr,left:'center',text:'上控温测量值PV'};
                seriesArr.push(serieObj);
                xAxisArr.push(xAxisObj);
                yAxisArr.push(yAxisObj);
                gridArr.push(gridObj);
                titleArr.push(titleObj);
            }
            if(parameterArr[i].indexOf("LowerControlTem") != -1) {
                var serieObj = {type:'line',showSymbol:false,data:lowerControlTemArray,xAxisIndex:i,yAxisIndex:i};
                var xAxisObj = {data:timeData,gridIndex:i};
                var yAxisObj = {splitLine:{show:false},gridIndex:i};
                var topStr = '';
                if(i != 0) {
                    topStr = (1 + indexNum * i + shortNum) + '%';
                } else {
                    topStr = (1 + indexNum * i) + '%';
                }
                var bottomStr = '';
                if(i != parameterArr.length - 1) {
                    bottomStr = (3 + indexNum * (parameterArr.length -1 - i) + shortNum) + '%';
                } else {
                    bottomStr = (3 + indexNum * (parameterArr.length -1 - i)) + '%';
                }
                var gridObj = {top:topStr,bottom:bottomStr};
                var titleObj = {top:topStr,left:'center',text:'下控温测量值PV'};
                seriesArr.push(serieObj);
                xAxisArr.push(xAxisObj);
                yAxisArr.push(yAxisObj);
                gridArr.push(gridObj);
                titleArr.push(titleObj);
            }
            if(parameterArr[i].indexOf("LeftControlTem") != -1) {
                var serieObj = {type:'line',showSymbol:false,data:leftControlTemArray,xAxisIndex:i,yAxisIndex:i};
                var xAxisObj = {data:timeData,gridIndex:i};
                var yAxisObj = {splitLine:{show:false},gridIndex:i};
                var topStr = '';
                if(i != 0) {
                    topStr = (1 + indexNum * i + shortNum) + '%';
                } else {
                    topStr = (1 + indexNum * i) + '%';
                }
                var bottomStr = '';
                if(i != parameterArr.length - 1) {
                    bottomStr = (3 + indexNum * (parameterArr.length -1 - i) + shortNum) + '%';
                } else {
                    bottomStr = (3 + indexNum * (parameterArr.length -1 - i)) + '%';
                }
                var gridObj = {top:topStr,bottom:bottomStr};
                var titleObj = {top:topStr,left:'center',text:'左控温测量值PV'};
                seriesArr.push(serieObj);
                xAxisArr.push(xAxisObj);
                yAxisArr.push(yAxisObj);
                gridArr.push(gridObj);
                titleArr.push(titleObj);
            }
            if(parameterArr[i].indexOf("RightControlTem") != -1) {
                var serieObj = {type:'line',showSymbol:false,data:rightControlTemArray,xAxisIndex:i,yAxisIndex:i};
                var xAxisObj = {data:timeData,gridIndex:i};
                var yAxisObj = {splitLine:{show:false},gridIndex:i};
                var topStr = '';
                if(i != 0) {
                    topStr = (1 + indexNum * i + shortNum) + '%';
                } else {
                    topStr = (1 + indexNum * i) + '%';
                }
                var bottomStr = '';
                if(i != parameterArr.length - 1) {
                    bottomStr = (3 + indexNum * (parameterArr.length -1 - i) + shortNum) + '%';
                } else {
                    bottomStr = (3 + indexNum * (parameterArr.length -1 - i)) + '%';
                }
                var gridObj = {top:topStr,bottom:bottomStr};
                var titleObj = {top:topStr,left:'center',text:'右控温测量值PV'};
                seriesArr.push(serieObj);
                xAxisArr.push(xAxisObj);
                yAxisArr.push(yAxisObj);
                gridArr.push(gridObj);
                titleArr.push(titleObj);
            }
            if(parameterArr[i].indexOf("FrontControlTem") != -1) {
                var serieObj = {type:'line',showSymbol:false,data:frontControlTemArray,xAxisIndex:i,yAxisIndex:i};
                var xAxisObj = {data:timeData,gridIndex:i};
                var yAxisObj = {splitLine:{show:false},gridIndex:i};
                var topStr = '';
                if(i != 0) {
                    topStr = (1 + indexNum * i + shortNum) + '%';
                } else {
                    topStr = (1 + indexNum * i) + '%';
                }
                var bottomStr = '';
                if(i != parameterArr.length - 1) {
                    bottomStr = (3 + indexNum * (parameterArr.length -1 - i) + shortNum) + '%';
                } else {
                    bottomStr = (3 + indexNum * (parameterArr.length -1 - i)) + '%';
                }
                var gridObj = {top:topStr,bottom:bottomStr};
                var titleObj = {top:topStr,left:'center',text:'前控温测量值PV'};
                seriesArr.push(serieObj);
                xAxisArr.push(xAxisObj);
                yAxisArr.push(yAxisObj);
                gridArr.push(gridObj);
                titleArr.push(titleObj);
            }
            if(parameterArr[i].indexOf("AfterControlTem") != -1) {
                var serieObj = {type:'line',showSymbol:false,data:afterControlTemArray,xAxisIndex:i,yAxisIndex:i};
                var xAxisObj = {data:timeData,gridIndex:i};
                var yAxisObj = {splitLine:{show:false},gridIndex:i};
                var topStr = '';
                if(i != 0) {
                    topStr = (1 + indexNum * i + shortNum) + '%';
                } else {
                    topStr = (1 + indexNum * i) + '%';
                }
                var bottomStr = '';
                if(i != parameterArr.length - 1) {
                    bottomStr = (3 + indexNum * (parameterArr.length -1 - i) + shortNum) + '%';
                } else {
                    bottomStr = (3 + indexNum * (parameterArr.length -1 - i)) + '%';
                }
                var gridObj = {top:topStr,bottom:bottomStr};
                var titleObj = {top:topStr,left:'center',text:'后控温测量值PV'};
                seriesArr.push(serieObj);
                xAxisArr.push(xAxisObj);
                yAxisArr.push(yAxisObj);
                gridArr.push(gridObj);
                titleArr.push(titleObj);
            }
            if(parameterArr[i].indexOf("AcuumMeasValue") != -1) {
                var serieObj = {type:'line',showSymbol:false,data:vacuumMeasValueArray,xAxisIndex:i,yAxisIndex:i};
                var xAxisObj = {data:timeData,gridIndex:i};
                var yAxisObj = {splitLine:{show:false},gridIndex:i};
                var topStr = '';
                if(i != 0) {
                    topStr = (1 + indexNum * i + shortNum) + '%';
                } else {
                    topStr = (1 + indexNum * i) + '%';
                }
                var bottomStr = '';
                if(i != parameterArr.length - 1) {
                    bottomStr = (3 + indexNum * (parameterArr.length -1 - i) + shortNum) + '%';
                } else {
                    bottomStr = (3 + indexNum * (parameterArr.length -1 - i)) + '%';
                }
                var gridObj = {top:topStr,bottom:bottomStr};
                var titleObj = {top:topStr,left:'center',text:'真空度测量值PV'};
                seriesArr.push(serieObj);
                xAxisArr.push(xAxisObj);
                yAxisArr.push(yAxisObj);
                gridArr.push(gridObj);
                titleArr.push(titleObj);
            }
        }
        
        option = {
            tooltip: {
                trigger: 'axis'
            },
            title: titleArr,
            xAxis: xAxisArr,
            yAxis: yAxisArr,
            grid: gridArr,
            series: seriesArr
        };
        var myChart;
        if (myChart) {
            myChart.clear();
        } else {
            myChart = echarts.init(document.getElementById('HkTempVacuumMng_graphicPanel'));
            myChart.clear();
            myChart.setOption(option);
        }
    }    
});

原文地址:https://www.cnblogs.com/cdcr/p/9474488.html