处理点击tab标签时Echarts图片显示不全的问题

背景介绍

项目中经常会用到使用图表来展示数据的方式，作为国内的开发者，我们会优先选择使用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插件。

总结：

1. 加载页面时将tab标签中2个图表的数据都加载过来。
2. 点击切换时，将第二个要展示的图表ID获得，然后初始化第二个图表，最后调用它的resize()方法。