解决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!研究了一下还是不知道原因在哪里。