echarts多图控制

迈不过友情╰ 2022-04-13 04:10 138阅读 0赞

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();
    	});
    }

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70][]

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();
    	});
    }

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70]: /images/20220413/85bd1856695e4c05af38ecdd62f6c2d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 1]: /images/20220413/82f93bede2b541cc834391d1a95e6234.png

发表评论取消回复

表情：

评论列表（有 0 条评论，138人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts：10-7-5:雷达图+多雷达图

1-基础雷达图 option = { title: { text: '雷达图' }, tool

深碍√TFBOYSˉ_/ 2022年12月12日 13:54/ 0 赞/ 255 阅读

相关 echarts dataZoom动态控制

//方法一：x轴数据>20条显示滚动条，否则不显示 dataZoom: [{

叁歲伎倆/ 2022年11月16日 10:57/ 0 赞/ 433 阅读

相关 echarts-组合图

![这里写图片描述][SouthEast] <!DOCTYPE html> <html lang="en"> <head> <meta

布满荆棘的人生/ 2022年06月08日 09:46/ 0 赞/ 283 阅读

相关 echarts-环形图

![这里写图片描述][SouthEast] <!DOCTYPE html> <html lang="en"> <head> <meta

我不是女神ヾ/ 2022年06月08日 09:41/ 0 赞/ 283 阅读

相关 echarts环状图

依赖：见echarts柱状图 [http://blog.csdn.net/zk\_1325572803/article/details/78041389][http_blo

冷不防/ 2022年06月08日 08:42/ 0 赞/ 288 阅读

相关 echarts多图控制

var x=[],_x=[],_series=[],_i=0,leftGrid=[[{ left: "60px",right: "4%",h

迈不过友情╰/ 2022年04月13日 04:10/ 0 赞/ 139 阅读

相关 echarts 雷达图

var evalateStaTableOption = { title: { // text: '基础雷达图'

浅浅的花香味﹌/ 2022年01月06日 00:45/ 0 赞/ 392 阅读

相关 Echarts3实例环形多标注图

前言在实现环形图的时候，label属性只能设置在内部和外部，不能实现同时存在的，这时，需要同Echarts的`graphic`属性作为label标签进行替代和填

冷不防/ 2021年09月17日 10:04/ 0 赞/ 438 阅读

相关 Echarts3实例多环形气泡图

前言通过设置多个环形图的半径和位置组合实现气泡图。实现效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpd

忘是亡心i/ 2021年09月17日 10:00/ 0 赞/ 1191 阅读

相关 echarts 雷达图

1、配置数据 (1)配置各个边角极限值 var dataMax=[{name:'名称',max:最大值}] (2)配置展示

骑猪看日落/ 2021年07月24日 19:32/ 0 赞/ 840 阅读