Deal with the problem of incomplete display of eckarts pictures when clicking the tab

Background

Chart is often used to display data in projects. As a domestic developer, we prefer to use Echarts chart. In general, we display a chart on the page. But recently, in a project, we need to click the switch tab to display Echarts chart. Of course, this can also be done. Then we can use asynchronous loading In my current project, it is very troublesome to use this asynchronous loading method, so I can only choose to display the data of two tab tabs when loading the page. The first Echarts chart of the tab tab is displayed normally, and the second page is displayed abnormally when I click to switch the tab page. After various searches, I get the solution Solution: you need to resize the second chart, because style = "display: none" in the second chart has no width and height by default. The chart before processing and the chart after processing are shown below.

Before processing
After treatment

Now that we have found a way to deal with it, the next step is how to implement it.

HTML code

<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; "></a>
        </li>
        <li>
            <a class="echartsSub"><span><img src="__IMG__/jingzhi1.png" /></span>Net worth trend</a>
        </li>
    </ul>
</div>

js code

<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));
        // Initialize chart manually
        chart.resize();
    });
})
</script>

Of course, you need to introduce the Echarts plug-in at the beginning.

Summary:

  1. When loading the page, load the data of the two charts in the tab tab.
  2. When clicking toggle, you will get second charts ID to be displayed, then initialize the second charts, and finally call the resize() method.

Posted on Mon, 04 May 2020 19:52:35 -0700 by garethdown