echart圖表切換tab不顯示的解決方法

解決方案是在切換時從新init 和setOption 圖表

代碼以下：本例是四個圖標切換，第一個是單獨的柱狀圖，其他3個是循環的折線圖

     <script>
     var foption1 = {
           title : {  
                text : '圖表標題',  
            }, 

            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 座標軸指示器，座標軸觸發有效
                    type : 'shadow'        // 默認爲直線，可選爲：'line' | 'shadow'
                }
            },
            grid: {},
             xAxis: {
               type:  'category', 
                data: ["8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","1","2","3","4","5","6","7"],
            },
            yAxis: { },
            series: [
            {
                name: '3月1日',
                type: 'bar',
                data: [11,13,15,17,19,22,11,13,15,17,19,22,11,13,15,17,19,22,19,22],
            },
            
            ]
        };

        var myChart1 = echarts.init(document.getElementById('barchart1'),theme); 
        myChart1.setOption(foption1);
        ObjectResize(myChart1.resize)
        function ObjectResize(fn){
       if(window.addEventListener)
       {
       window.addEventListener("resize",fn,false);
       }
       else
       {
       window.attachEvent("onresize",fn)
       }
       }
          
          
      var option2 = {
            title : {  
                text : '圖表標題',  
            }, 
            grid: {},
                
     tooltip : {  
                trigger : 'axis',  //沒有此觸發，則下面的樣式無效
            },              
            
             xAxis: {
               type:  'category', 
                data: ["8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","1","2","3","4","5","6","7"],
            },
            yAxis: { },
             series: [{
                name: '用氣量',
                type: 'line',
                //smooth:true,
                data: [65, 59, 80, 81, 56, 55, 40, 65, 59, 80, 81, 56, 65, 59, 80, 81, 56, 55, 40, 65, 59, 80, 81, 56],
            },
            
            ]       
        };
         for (var i=1; i<5; i++)
        {
           var myChart = echarts.init(document.getElementById('linechart'+i),theme);
           myChart.setOption(option2);
           ObjectResize(myChart.resize);
        
         }
    </script>

切換的js代碼以下：

function show(num){
    //debugger;
    var odiv=document.getElementById("chartTabTitle").getElementsByTagName("li");
    var ocentent=document.getElementById("chartTabCentent").getElementsByTagName("li");

    for(var i=0;i<odiv.length; i++){
    
       if(i==num){
        odiv[i].className="now"   
       ocentent[i].style.display="block";}
       
       else
       {
           
           odiv[i].className=""
           ocentent[i].style.display="none";}
    
    }
    
        //window['myChart' +num].setOption(window['option' +num]);
        var myChart1 = echarts.init(document.getElementById('barchart1'),theme); 
        myChart1.setOption(foption1);
        ObjectResize(myChart1.resize)
        var charti =echarts.init(document.getElementById('linechart'+num),theme);
        //charti.setOption(window['option' +num]);
        charti.setOption(option2);
        ObjectResize(charti.resize);
    
    
    }

 若有疑問請關注微信公衆號：前端之攻略，我會詳細解答，此公衆號我也會按期更新前端知識。