解决ECharts Can‘t get dom width or height!无法初始化图表的问题

最近在开发中遇到了一个问题，在一个页面要绘制4张图表，4个tab切换查看，如下图

代码写完后查看效果时发现一个问题，只有第一个图表绘制成功了，并且能自适应改变宽高，后面三个都是空白，查看报错信息，如下图

猜测原因可能是执行init()方法时报错，无法获取到div的宽高才导致绘制失败。

---

解决办法: ------只需关注虚线中间的关键代码

function drawMainChart(){
		//初始化变量
		var names = [];
		var actualPay = []
		var allCome = [];
		var shouldPay = [];
		var profit = [];
		var pay = [];
		if(arr.length>0){
			for(var key in arr[0]){
				names.push(key);
			}
			names.sort(function compare(v1,v2){
				return  v1.split("-")[0]==v2.split("-")[0]?v1.split("-")[1]-v2.split("-")[1]:v1.split("-")[0]>v2.split("-")[0];
			});
			var name;
			for(var j=0;j<names.length;j++){    
				name = arr[0][names[j]];
				if(name){
					actualPay.push(Math.round(name.xfsr));
					allCome.push(Math.round(name.xfbk+name.xfsr));
					shouldPay.push(Math.round(name.shouldPay));
					profit.push(Math.round(name.xfbk+name.xfsr-name.pay));
					pay.push(Math.round(name.pay));
				}else{
					actualPay.push(0);allCome.push(0);profit.push(0);pay.push(0);shouldPay.push(0);
				}
	        } 
		}
		--------------------------------------------------------------------------------
		var mainContainer = document.getElementById('main');
		//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
		var resizeMainContainer = function () {
			mainContainer.style.width = window.innerWidth+'px';
			mainContainer.style.height = window.innerHeight*0.8+'px';
		};
		//设置div容器高宽
		resizeMainContainer();
		// 初始化图表
		var mainChart = echarts.init(mainContainer);
		$(window).on('resize',function(){//
			//屏幕大小自适应，重置容器高宽
		    resizeMainContainer();
		    mainChart.resize();
		});
		--------------------------------------------------------------------------------
		var option = {
			tooltip: {
				show:true,
		        trigger: 'axis'
		    },
		     toolbox: {
		        feature: {
		            dataView: {show: true, readOnly: true,title:'数据视图'},
		            magicType: {show: true, type: ['line', 'bar']},
		            saveAsImage: {show: true}//保存为图片
		        }
		    },
			title: {
	            text: ''
	        },
	        legend: {
	            data:['总业绩','应收总额','实收报名费','总成本','总利润','业绩增长比']
	        },
	        //x坐标
	        xAxis: [
	        	{
	   				type: 'category', //坐标轴类型
	   				name: '月份',
	   				axisLabel:{
	        			show:true
	        		},
	                data:  names //更换成动态数据，最近6个月
				}
	        ],
	        //y坐标
	        yAxis: {
	            type: 'value',
	            name: '金额',
	            min: 0,
	            axisLabel: {
	                formatter: '$ {value}'
	            }
	        },
			series: [{
	                name: '总业绩',
	                type: 'bar',
	                data: allCome //更换成动态数据
	          	},
		        {
		            name:'应收总额',
		            type:'bar',
		            data:shouldPay //更换成动态数据
		        },
		        {
		            name:'实收报名费',
		            type:'bar',
		            data:actualPay //更换成动态数据
		        },
		        {
		            name:'总成本',
		            type:'bar',
		            data:pay //更换成动态数据
		        },
		        {
		            name:'总利润',
		            type:'bar',
		            data:profit //更换成动态数据
		        },
		        {
		            name:'业绩增长比',
		            type:'line',
		            data:allCome //更换成动态数据
		        }
		    ],
		    color:['#f68484',  '#75b9e6', 'rgb(135, 184, 127)','#ae91e1', '#f6ac61', '#c4ccd3'],
		}
		mainChart.setOption(option);
	}

• var resizeMainContainer = function () {
  mainContainer.style.width = window.innerWidth+‘px’;
  mainContainer.style.height = window.innerHeight*0.8+‘px’;
  };
• $(window).on(‘resize’,function(){//
  //屏幕大小自适应，重置容器高宽
  resizeMainContainer();
  mainChart.resize();
  });

通过上面两个方法实现了手动的给容器div赋予宽高，能成功的绘制图表了。

但是还是有Warning ：Can’t get dom width or height!研究了一下还是不知道原因在哪里。