Incubator-echarts: Echarts 图表放到bootstrap的tab-panel除过第一个其他的不加载

[myoneray]

Echarts 图表放到bootstrap的tab-panel除过第一个其他的不加载！

直接在在点击第二个tab时去重新加载也不显示．
请问大家时怎么解决的？

[suxuekun]

估计是宽度为0不能初始化吧，再切换标签之后再init
试试，我也是hidden的chart会报错，估计是一个原因
On Wednesday, September 9, 2015, Maizi [email protected] wrote:

Echarts 图表放到bootstrap的tab-panel除过第一个其他的不加载！

直接在在点击第二个tab时去重新加载也不显示．
请问大家时怎么解决的？

—
Reply to this email directly or view it on GitHub
https://github.com/ecomfe/echarts/issues/2010.

[stanleyxu2005]

切换标签的时候显式调用一次chart.resize()试试看。后台的bs-tabpane的大小是0，所以chart尺寸是0x0。

同时我也不太明白，为什么echart生成的chart不自己监听windows.resize。而是需要调用者自己处理。

[chenPengXu]

你得等tab显示了之后再去生成chart

[myoneray]

然而我還是不知道怎麼解決～～

[xfworld]

捕捉tab-panel加载事件，在加载完成后，在完成echarts的初始化 done....

[stanleyxu2005]

angular里面类似这样angular.element(window).on('resize', chart.resize);
jquery里面类似这样$(window).on('resize', chart.resize);
其他应该就不用加了。

[liminjun]

@stanleyxu2005 EChart提供了chart.resize()是对的。因为不是所有的场景，图表都要reszie进行缩放。而且缩放的逻辑是要用户自定义的。你直接监听resize的话，只要浏览器稍微变化了一下，EChart都会重绘，其实这个成本是很高的。

[stanleyxu2005]

@liminjun lz的场景感觉要。因为bootstrap是网格布局，不设置具体宽度，如果她的图的宽是100%。而隐藏后台未初始化的bootstrap的tab，初始尺寸是0x0，所以需要做一次resize。当然，如果一个chart是固定长宽的，那就不需要了，这个我同意。

[myoneray]

chart是固定长宽的．然而我只是加载不出第二个而已．．．

[chenPengXu]

都告诉你解决方法了。。。
bootstrap 的标签里有切换事件，等第二个tab显示后，你再去init chart. init后就不要再去init了。

[myoneray]

HTML 如下

    <div class="col-md-8 column">
      <div class="tabbable" id="tabs-766816"  style="overflow:hidden;height: 620px;"/>

       <ul class="nav nav-tabs">
       <!-- tab A-->
        <li class="active" id="A" ><a href="#panel-519578"data-toggle="tab">地理位置分布</a></li>
        <!-- tab B-->
        <li id="B" ><a href="#panel-184752" data-toggle="tab">消费能力</a></li>
        <!-- tab C-->
        <li id="C" ><a href="#panel-1992" data-toggle="tab">消费类别</a></li>
       </ul>

       <div class="tab-content">
      <!-- tab A content-->
        <div class="tab-pane  active" id="panel-519578">
         <div id="echartMap" style="height: 600px;"></div>
        </div>
      <!-- tab B content-->
        <div class="tab-pane active" id="panel-184752">
         <div id="echartPie" style="height: 600px;"></div>
        </div>
       <!-- tab C  content-->
        <div class="tab-pane active" id="panel-1992">
         <div id="echartConsumecate" style="height: 600px;"></div>
        </div>
       </div>
      </div>

JS 如下

$(function() {
    function getValue() {XXXXXX}
    $('#sendRequest').click(
          function() {
                        $.ajax({
                            async : false,
                            type : "POST",
                            data : getValue(),
                            dataType : "json",
                            url : "/query",
                            success : function(resData) {XXXXXX},
                            error : function(data) { console.log('ERROR');}
                        });

                        var echartMap = echarts.init(document.getElementById('echartMap'), 'macarons');
                        echartMapOption = {XXXXXXXXX};
                        echartMap.setOption(echartMapOption);

                        $('#B').click(function(){
                                     var echartPie = echarts.init(document.getElementById('echartPie'), 'macarons');
                                    echartPieOption = {XXXXXXX};
                                    echartPie.setOption(echartPieOption);
                        })

                             $('#C').click(function(){
                                     var echartConsumecateMap =echarts.init(document.getElementById('echartConsumecate'), 'macarons');
                                    echartPieConsumecateOption = {XXXXX};
                                     echartConsumecateMap.setOption(echartPieConsumecateOption);
                        })
                    });
});

[myoneray]

CODE 在上面　我是在点击的时候　加载的chart!

[chenPengXu]

画图的容器定义的宽高就是可以的，与是否显示没有关系

[hcyfreedom]

增加css：
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: block;
height: 0;
overflow-y: hidden;
}
.tab-content > .active,
.pill-content > .active {
height: auto;
}

另外，点击之后再init图表不可行。

[luoshushu]

在myChart设置固定宽高可以解决。