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

 若有疑问请关注微信公众号：前端之攻略，我会详细解答，此公众号我也会按期更新前端知识。