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

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

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

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

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

而后咱们再点回第一个便签页。

 

 咦？个人图形呢？

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

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

 因而开始是这样的。

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

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

 

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

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

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

 

 

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

其实这时候我才忽然意识到这三个问题实际都是一个问题形成的。就是echarts图形在隐藏变为显示后，没法获取clientWidth形成的。而最后一个是 parseInt(stl.width, 10)) 将width: 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();
    }
});

 

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