echatrs可视化图在隐藏后显示不出来或是宽度出现问题

    最近在做一个可视化的项目，用了百度的ECharts.js作为可视化的视图框架，echarts的实例很多，基本能满足项目的需求，而且文档也相对完整、清晰，是个很不错的前端可视化框架。

我们的项目是使用bootstrap+echatrs完成的，前阵子在做可视化页面时这样一个问题。就是echarts图在第一次加载时没有问题，之后标签页切换隐藏，再显示就看不见了。

这是图形初始化完毕，没有任何问题。

之后我点了第二个标签，第一页图形隐藏，第二页显示，依旧没有任何问题。

然后我们再点回第一个便签页。

 咦？我的图形呢？

开始我判断可能是选项卡可能有问题，后来也没找到选项卡的问题，然后就放着了。

昨天我又遇到一个问题。我想通过一个下拉框控制框内显示的图形。于是我正常的写两个图形在同一个框内，然后隐藏一个，等下来选择后再切换到另外一个，很简单的需求。

 于是开始是这样的。

很好，很完美。然后我点击下拉框，切换到目的IP，然后。。。。

咦？哪里出错了？又是一脸懵逼。。。。。。。

我依旧是找了很久切换的问题，依旧没找到。

结果今天又遇到一个问题。过程是从一个图形点击跳转到另外一个图形，第二个图形是隐藏的echarts图。结果是这样的。。

 怎么这么小，宽度为什么没有自适应？看看源码。。。

 

 怎么是100px?没有设置过啊？

其实这时候我才突然意识到这三个问题实际都是一个问题造成的。就是echarts图形在隐藏变为显示后，无法获取clientWidth造成的。而最后一个是 parseInt(stl.width, 10)) 将 100%;转为100，所以计算出的图表宽度为100px。

也就是图形在显示时不知道宽度是多少，然后就变成了宽度为0，不显示。或是宽度出现问题。知道了问题的根源那我就想办法给他一个宽度就行了。然后就这样

var container = document.getElementById('concurrenceChart');
var resizeContainer = function () {
    container.style.width = window.innerWidth+'px';
    container.style.height = window.innerHeight+'px';
};
resizeContainer();
            
var myChart = echarts.init(container);

之后问题就解决了。

还有一种方法可以解决这个问题，就是在切换之后再调用一下char.resize()方法，重新设置一下再生成图形。

/*切换*/
$("#sourceOrgoal").change(function(){
    console.log($(this).val());
    var val = $(this).val();
    if(val ==="goal"){
    $("#statistics_gIP").show();
    $("#statistics_DIP").hide();
    GTrafficChart.resize();//关键步骤
    GTrafficChart.setOption(GTrafficOption,true);
    }else{
        $("#statistics_gIP").hide();
    $("#statistics_DIP").show();
    }
});

当然，这可能还有更好的解决的方法，欢迎留言交流。如果对问题还有更深层次的理解，欢迎留言探讨！！