最近在開發中遇到了一個問題，在一個頁面要繪製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!研究了一下還是不知道原因在哪裡。