BootsrapタブとEchart

Question

は、2番目のタブにEchartsを表示する際に問題があります。チャートは、最初のタブではなく、それは、ディスプレイ

       <ul class="nav nav-tabs" style="margin-bottom: 15px;"> 
            <li class="active"> 
             <a href="#campaign" data-toggle="tab">Campaigns</a> 
            </li> 
            <li> 
             <a href="#subscribers" data-toggle="tab">Subscribers</a> 
            </li> 
          </ul> 
          <div id="myTabContent" class="tab-content"> 
           <div class="tab-pane fade active in" id="campaign"> 
            <div id="pieChart" style="height:500px;border:1px solid #ccc;padding:10px;"></div> 

           </div> 
           <div class="tab-pane fade" id="subscribers"> 
            <div id="barChart" style="height:500px;border:1px solid #ccc;padding:10px;"></div> 
           </div> 
          </div> 

が、その後これを解決することは何CUDチャート

var myChart = echarts.init(document.getElementById('pieChart')); 
myChart.setTheme({color:['#6CC66C','#418BCA','#ff6600']}); 
pieChartOption = option = { 
    title : { 
     text: 'Campaign Analysis', 
     subtext: 'Jackpot', 
     x:'center' 
    }, 
    tooltip : { 
     trigger: 'item', 
     formatter: "{a} <br/>{b} : {c} ({d}%)" 
    }, 
    legend: { 
     orient : 'vertical', 
     x : 'left', 
     data:['Sent','Pending','Not Delivered'] 
    }, 
    toolbox: { 
     show : true, 
     feature : { 
      mark : {show: true}, 
      dataView : {show: true, readOnly: false}, 
      magicType : { 
       show: true, 
       type: ['pie', 'funnel'], 
       option: { 
        funnel: { 
         x: '25%', 
         width: '50%', 
         funnelAlign: 'left', 
         max: 1548 
        } 
       } 
      }, 
      restore : {show: true}, 
      saveAsImage : {show: true} 
     } 
    }, 
    calculable : true, 
    series : [ 
     { 
      name:'Access Source', 
      type:'pie', 
      radius : '55%', 
      center: ['50%', '60%'], 
      data:[ 
       {value:{{ $no}}, name:'Sent'}, 
       {value:135, name:'Pending'}, 
       {value:155, name:'Not Delivered'} 
      ] 
     } 
    ] 
}; 
myChart.setOption(pieChartOption); 



/*#########################   BARCHART   ##################################*/ 

var myBarChart = echarts.init(document.getElementById('barChart')); 

var barChartOption = { 
    title: { 
    text: '某地区蒸发量和降水量', 
    subtext: '纯属虚构' 
    }, 
    tooltip: { 
    trigger: 'axis' 
    }, 
    legend: { 
    data: ['2014', '2015'] 
    }, 
    toolbox: { 
    show: true, 
    feature: { 
     mark: { 
     show: true 
     }, 
     dataView: { 
     show: true, 
     readOnly: false 
     }, 
     magicType: { 
     show: true, 
     type: ['line', 'bar'] 
     }, 
     restore: { 
     show: true 
     }, 
     saveAsImage: { 
     show: true 
     } 
    } 
    }, 
    calculable: true, 
    xAxis: [{ 
    type: 'category', 
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] 
    }], 
    yAxis: [{ 
    type: 'value' 
    }], 
    series: [{ 
    name: '2014', 
    type: 'bar', 
    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], 
    }, { 
    name: '2015', 
    type: 'bar', 
    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], 
    }] 
}; 

myBarChart.setOption(barChartOption); 
/*#########################   BARCHART   ##################################*/ 

$(function() { 
     $("#tabs").tabs({ 
     select: function(event, ui) { 
      console.log('Calling chart.invalidateSize()'); 
      chart.invalidateSize(); 
     } 
     }); 

を表示するJSをhereis does'nt 2番目のタブへのナビゲーションに表示されます？

}); 

Answer 1

答えが少し遅れているとあなたが解決策を見つけた場合、私はわからないが、これまでの解像度はecharts setOptionとブートストラップのTABイベントの組み合わせになります。..助けてください。

Like-ブートストラップタブが示されているように上記のコードは、すぐechartsにsetOptionコールバックを使用してチャートmychartをリロードします

$('#myTabItem').on('shown.bs.tab', function (e) { 
     myChart.setOption(options); 
}) 

。ブートストラップタブイベントの詳細については、hereをご覧ください。