echarts多图控制

var x=[],_x=[],_series=[],_i=0,leftGrid=[[{
		        left: "60px",right: "4%",height: '80%',top:116,
		    }],[{
		        left: "60px",right: "4%",height: '35%',top:116,
		    }, {
		        left: "60px",right: "4%",top: '60%',height: '35%'
		    }],[{
		        left: "60px",right: "4%",height: '20%',top:116,
		    }, {
		        left: "60px",right: "4%",top: '45%',height: '20%'
		    }, {
		        left: "60px",right: "4%",top: '75%',height: '20%'
		    }],[{
		        left: "60px",right: "4%",height: '13%'
		    }, {
		        left: "60px",right: "4%",top: '32%',height: '13%'
		    }, {
		        left: "60px",right: "4%",top: '53%',height: '13%'
		    }, {
		        left: "60px",right: "4%",top: '75%',height: '13%'
		    }]],yAxis=[],leftdataZoom=[[
              	{show: true,realtime: true},{type: 'inside',realtime:true}
	                ],[
						{show: true,realtime: true,xAxisIndex: [0, 1]},{type: 'inside',realtime: true,xAxisIndex: [0, 1]}
	                ],[   
	                    {show: true,realtime: true,xAxisIndex: [0,1]},{type: 'inside',realtime: true,xAxisIndex: [0,1,2]},{type: 'inside',realtime: true,xAxisIndex: [0,1,2]},
            	],[
					{show: true,realtime: true,xAxisIndex: [0,1]},{type: 'inside',realtime: true,xAxisIndex: [0,1,2]},{type: 'inside',realtime: true,xAxisIndex: [0,1,2,3]},{type: 'inside',realtime: true,xAxisIndex: [0,1,2,3]}
               ]],newlegend=[[
                              {type:"scroll",icon:'line',data:[""], top: '10%', x: 'center'}
               ],[
                  {type:"scroll",icon:'line',data:[""], top: '10%', x: 'center'},
                  {type:"scroll",icon:'line',data:[""], top: '55%', x: 'center'}
                  ],[
				  {type:"scroll",icon:'line',data:[""], top: '10%', x: 'center'},
                  {type:"scroll",icon:'line',data:[""], top: '40%', x: 'center'},
                  {type:"scroll",icon:'line',data:[""], top: '70%', x: 'center'}
                  ]];
			var bardata = data.column;
	    	var legends = {};
	    	for(var i=0;i<bardata.length;i++){
	    		var xdata = [],legend_=[];
	    		for(var j in bardata[i].data){
	    			var ydata=[];
	    			for(var name in bardata[i].data[j]){
	    				if(j=="Ua"){
	    					xdata.push(name);//x轴数组
	    				}
	    				ydata.push(bardata[i].data[j][name][1]);//y轴数组
	    			}
	    			var legendname = j=="Ua"?"A相("+bardata[i].name+")":j=="Ub"?"B相("+bardata[i].name+")":"C相("+bardata[i].name+")";
	    			legend_.push(legendname);
	    			_series.push({
	    				type:"bar",
	    				name:legendname,
	    				showSymbol: false,
	    				data:ydata,
	    				xAxisIndex:i,
	    				yAxisIndex: i
	    			})
	    			
	    		}
	    		legends[i] = legend_;//以组形式存
	    		for(var g=0;g<newlegend[i].length;g++){//遍历有几个布局
    				newlegend[i][g].data = legends[g];//为布局里的data赋值
    			} 
	    		newlegends=newlegend[i];//取第几个布局
	    		_x.push({
	    			data:xdata,
	    			name:"谐波次数",
	    			nameGap:5,
	    			gridIndex:i
	    		})
	    		yAxis.push({
					type : "value",
					scale : true,
					/*axisLabel:{
						formatter: function (value){
							return value+"V"
						}
					},*/
					name:"V",
					gridIndex:i
				});
	    		_i=i;
	    	}
	    	fillecharts({
  		  		id:"boxcharts",
  		  		x:_x,
  		  		legend:newlegends,
  		  		yAxis:yAxis,
  		  		series:_series,
  		  		grid:leftGrid[_i]
  		  	});
		}
	})
}
function fillecharts(obj){
    if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose();
    }
	myChart = echarts.init(document.getElementById(obj.id));
	var option = {
		tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            animation: false
	        }
	    },
		color:["#51bffd","#8eec7f","#d78e51","#c92840","#50bfff","#f7ba2a","#7B68EE","#13ce66","#8B4513","#8492a6","#fc8675","#008080","#0000FF","#FFFF00","#FF0000","#FFEFD5","#F08080"],
		title: {
            text:'电压谐波频谱',
            left:'center',
            top:10,
            itemGap:16,   //主副标题之间的间距
            textStyle:{
                color:'#666',
                /*fontStyle:'normal',
                fontWeight:'bold',*/
                //字体大小
        　　　　		fontSize:20
            },
            subtext:mintitle,
		    subtextStyle:{
		        color:'#9f999f',
		        fontWeight:'bold',
		　　　　       fontSize:12
		    }
        },
		xAxis: obj.x,
	    yAxis:obj.yAxis, 
	    legend:obj.legend,
	    grid: obj.grid,
	    series: obj.series
	};
	if(echartsArr.indexOf(myChart)==-1){//不存在
		echartsArr.push(myChart);
	}
	myChart.setOption(option,true);
	window.addEventListener("resize",function(){
		myChart.resize();
	});
}

效果图：

 

2、固定三图

function fileEchart(obj){
	if (line != null && line != "" && line != undefined) {
		line.dispose();
    }
	line = echarts.init(document.getElementById("echarts_"));
	var option = {
	    title: [
        {
	        text: obj.number+'次谐波含有率曲线',
	        left:'center',
	        top: 2, 
	        itemGap:10,   //主副标题之间的间距
	        textStyle:{
	            color:'#666',
	            //字体大小
	    　　　　		fontSize:20
	        },
	        subtext: '时间范围: '+obj.time,
	        subtextStyle:{
		        color:'#9f999f',
		        fontWeight:'bold',
		　　　　       fontSize:12
		    },
	    	x: 'center'
	    }, {
	    	top: '7%',
	        left: '7%',
	        text: '电压含有率@低压电房'+obj.name,
        	textStyle:{
	    　　　　		fontSize:16
	        }
	    }, {
	        top: '35%',
	        left: '7%',
	        text: '电流含有率@低压电房'+obj.name,
	    	textStyle:{
	    　　　　		fontSize:16
	        }
	    },{
	    	top: '64%',
	        left: '7%',
	        text: '电流含有量@低压电房'+obj.name,
        	textStyle:{
	    　　　　		fontSize:16
	        }
	    }],
	    grid: [{
	    	top:'10%',
	    	left: '5%',
	        right: '3%',
	        bottom: '68%'
	    }, {
	        top: '38%',
	        left: '5%',
	        right: '3%',
	        bottom: '38%'
	    },{
	    	top: '68%',
	    	left: '5%',
	        right: '3%',
	    }],
	    legend: {
	        data: ['A相','B相','C相'],
	        left:'left',
	        top:10,
	        left:'20%',
	        icon:'line',
	        color:['#BECDFF','#CC6633','#f7ba2a']
	    },
	    tooltip: {
	        trigger: 'axis'
	    },
	    xAxis: [{
	        data: obj.x,
	        gridIndex: 0,
	        axisLabel: {
                show:false,
            }
	    }, {
	        data: obj.x,
	        gridIndex: 1,
	        axisLabel: {
                show:false,
            }
	    },{
	    	data: obj.x,
	    	gridIndex: 2,
	    	axisLabel: {
                rotate:25
            }
	    }],
	    yAxis: [{
	    	type: 'value',
	    	name: '%',
	        splitLine: {show: false},
	        gridIndex: 0,
	    }, {
	    	type: 'value',
	    	name: '%',
	        splitLine: {show: false},
	        gridIndex: 1,
	    },{
	    	type: 'value',
	    	name: 'A',
	    	splitLine: {show: false},
	        gridIndex: 2,
	    }],
	    series: [{
	        type: 'line',
	        name: 'A相',
	        color: '#BECDFF',
	        showSymbol: false,
	        data: obj.rateList_V[0],
	        xAxisIndex: 0,
	        yAxisIndex: 0
	    },{
	        type: 'line',
	        name: 'B相',
	        color: '#CC6633',
	        showSymbol: false,
	        data: obj.rateList_V[1],
	        xAxisIndex: 0,
	        yAxisIndex: 0
	    },{
	        type: 'line',
	        name: 'C相',
	        color: '#f7ba2a',
	        showSymbol: false,
	        data: obj.rateList_V[2],
	        xAxisIndex: 0,
	        yAxisIndex: 0
	    },{
	        type: 'line',
	        name: 'A相',
	        color: '#BECDFF',
	        showSymbol: false,
	        data: obj.rateList_A[0],
	        xAxisIndex: 1,
	        yAxisIndex: 1
	    },{
	        type: 'line',
	        name: 'B相',
	        color: '#CC6633',
	        showSymbol: false,
	        data: obj.rateList_A[1],
	        xAxisIndex: 1,
	        yAxisIndex: 1
	    },{
	        type: 'line',
	        name: 'C相',
	        color: '#f7ba2a',
	        showSymbol: false,
	        data: obj.rateList_A[2],
	        xAxisIndex: 1,
	        yAxisIndex: 1
	    },{
	        type: 'line',
	        name: 'A相',
	        color: '#BECDFF',
	        showSymbol: false,
	        data: obj.amountList_A[0],
	        xAxisIndex: 2,
	        yAxisIndex: 2
	    },{
	        type: 'line',
	        name: 'B相',
	        color: '#CC6633',
	        showSymbol: false,
	        data: obj.amountList_A[1],
	        xAxisIndex: 2,
	        yAxisIndex: 2
	    },{
	        type: 'line',
	        name: 'C相',
	        color: '#f7ba2a',
	        showSymbol: false,
	        data: obj.amountList_A[2],
	        xAxisIndex: 2,
	        yAxisIndex: 2
	    }]
	};
	line.setOption(option,true);
	window.addEventListener("resize",function(){
		line.resize();
	});
}

效果图：