原文:https://blog.csdn.net/liuminyi1987/article/details/79653737 

问题如下:在tab切换的时候发现第二个tab页面的图表显示不全,缩到了一起。

 

添加window自适应方法不管用,如下:

 mychart.setOption(option);
 $(window).resize(function() { //重置容器高宽 mychart.resize(); });
各种搜索这个问题,找到了方法。

 

先借鉴大牛解释出现这个问题的原因:

查了一下echarts源码,发现了这个
Painter.prototype._getWidth = function() {
        var root = this.root;
        var stl = root.currentStyle || document.defaultView.getComputedStyle(root);
        return ((root.clientWidth || parseInt(stl.width, 10)) - parseInt(stl.paddingLeft, 10) - parseInt(stl.paddingRight, 10)).toFixed(0) - 0;
    };
echarts绘制图表计算宽度的时候,由于第二个tab的属性display: none;所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将width: 100%;转为100,所以计算出的图表宽度为100px。
我实际按F12看的时候也看到上面图的宽度是100px。
基于以上原因,参考大牛的解决方法,是要给这个图固定宽度。下面贴部分代码:

$(document).ready(function(){ 
    $("#map").css('width',$("#chart").width()); //给图设置固定宽度,div chart是第一个tab页面上面的某个图,宽度布局与map一致                   
    require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/map'
            ],
       function (ec) {  
               
          var myChart = ec.init(document.getElementById('map'));

PS:根据实际需要选取其他div宽度进行设置。
    还可同时设置宽度、高度
var width = $("参考图ID").width();
var height = $("参考图ID").height();
$("#目标图ID").css("width", width).css("height", height);
--------------------- 


 

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐