背景介绍
项目中经常会用到使用图表来展示数据的方式，作为国内的开发者，我们会优先选择使用Echarts图表，一般情况下我们都是在页面上展示一个图表；但是最近在项目中遇到一个需要点击切换tab标签来显示Echarts图表，当然了这样也是能做的，那我们可以采用异步加载的方式来进行显示，但是呢，在我目前的项目中采用这种异步加载的方式特别麻烦，所以只能选择采用在加载页面的时候，就将2个tab标签页的数据都显示出来，tab标签页的第一个Echarts图表显示正常，点击切换tab页面时第二个页面显示不正常，各种搜索之后得到解决办法：需要将第二个图表resize操作，因为第二个图表中style=“display：none的”，默认是没有宽度和高度的，下面先展示处理前的图表和处理后的图表。
处理前
处理后
既然找到了处理的办法，那接下来就是如何实现它。
HTML代码
<div class="tabJs">
<div class="Tab_Cont">
<div class="cur">
<div id="index_main01" style="width:96%; height: 5.3rem;margin: 0 auto;"></div>
</div>
<div>
<div id="index_main0100" style="width:96%; height: 5.3rem;margin: 0 auto;"></div>
</div>
</div>
<ul class="echartsUl">
<li class="active">
<a class="echartsSub" style="color: #519ee8;"><span><img src="__IMG__/zengzhanglu.png" /></span>净值增长率</a>
</li>
<li>
<a class="echartsSub"><span><img src="__IMG__/jingzhi1.png" /></span>净值走势</a>
</li>
</ul>
</div>
js代码
<script>
$(function() {
$(".tabJs .echartsUl li").click(function(){
var this_index = $(this).index();
var this_tabjs = $(this).parents(".tabJs");
this_tabjs.find(".echartsUl li").removeClass("active");
$(this).addClass("active");
this_tabjs.find(".Tab_Cont >div").removeClass("cur");
this_tabjs.find(".Tab_Cont >div").eq(this_index).addClass("cur");
var optId = this_tabjs.find(".Tab_Cont >div").eq(this_index).find('div').attr("id");
var chart = echarts.init(document.getElementById(optId));
// 手动初始化图表
chart.resize();
});
})
</script>
当然需要在开始的地方引入Echarts插件。
总结：
- 加载页面时将tab标签中2个图表的数据都加载过来。
- 点击切换时，将第二个要展示的图表ID获得，然后初始化第二个图表，最后调用它的resize()方法。
