tab切换echarts无法正常显示

2018-1-26 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

tab切换时候,第一个图正常显示,第二个及之后的图无法正常显示。 
问题是这样的,用了两个tab切换,每个tab里面加载一个echarts图表,div的大小是百分比设置的,结果第一个echarts可以正常显示出来,第二个echarts被严重压缩了。 
查看了一下网页布局,发现div是有大小的,但是里面加载的echarts宽高都是0,这可能就是echarts显示过小的原因。 
有以下三个解决办法:

  1. 将div的宽高设置成固定值,比如style=”width:500px;height:500px”,这时候echarts有了明确的大小时候就可以正常显示出来了。(不过这个方法还是不好,固定值的高宽无法自适应网页大小啊
  2. 在点击第二个tab的时候获取父div的宽和高,将具体的宽和高赋值给echarts,如何在这个方法里面初始化echarts,而不要再加载网页的时候就初始化。 
    具体的代码如下:
<ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#chart1" data-toggle="tab">tab1</a> </li> <li> <a href="#chart2" data-toggle="tab" onclick="javascript:chartresize()">tab2</a> </li> <div class="tab-content"> <div class="tab-pane fade in active" id="chart1" style="width=100%;height=100%"></div> <div class="tab-pane fade" id="chart2"></div> </div> </ul> 
	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

chartresize()方法如下:

function chartresize(){ console.log("chartresize"); var temp = new initchart();
    temp.resize();
}
	
  • 1
  • 2
  • 3
  • 4
  • 5

初始化echarts的方法如下:

var initchart = function(){ var chart2 = echarts.init(document.getElementById('chart2')); var chart2_option={
        series: [
            {
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                data:[
                    {value:10, name: 'pie1'},
                    {value:20, name: 'pie2'},
                    {value:10, name: 'pie3'},
                ]
            }
        ]
    }
    chart2.setOption(chart2_option);
    $(function(){ window.onresize = function(){ chart2.resize();
        }
    }) this.resize = function size(){ var chart2div=document.getElementById('chart2'); var tabcontent = document.getElementById('tab-content');
        width=tabcontent.offsetWidth;
        height=tabcontent.offsetHeight;
        chart2div.style.width=width+'px';
        chart2div.style.height=height+'px';
        chart2.resize(width,height);
    }
}
	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

这样每次在点击第二个tab的时候就会重新加载下chart2了,就不会出现chart过小的问题。 
3、设置tab切换时候加载时间 
代码如下:

$("a[data-toogle='tab']").on("shown.bs.tab",function(e){ var activeTab=$(e.target)[0].hash; if(activeTab == "#tab1"){
        window.onresize();
    } if(activeTab == "#tab2"){
        window.onresize();
    }
}
	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

echarts的初始化跟正常的方式一样,不过记得将tab-content中的echarts高宽设为100%。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: tab切换echarts无法正常显示


Powered by emlog 京ICP备12006971号-1 sitemap