tab 전환 echarts가 제대로 표시되지 않음

tab을 전환할 때 첫 번째 그림은 정상적으로 표시되고 두 번째 그림과 그 다음 그림은 정상적으로 표시되지 않습니다.문제는 이렇다. 두 개의 탭으로 전환하고 각각의 탭에 echarts 도표를 불러오는데div의 크기는 백분율로 설정되어 있다. 그 결과 첫 번째 echarts는 정상적으로 나타날 수 있고 두 번째 echarts는 심각하게 압축되었다.웹 페이지 레이아웃을 살펴보니div는 크기가 있지만 안에 불러온 echarts의 폭은 모두 0입니다. 이것은 echarts가 너무 작게 보이는 이유일 수 있습니다.다음과 같은 세 가지 해결 방법이 있습니다.

div의 폭을 고정값으로 설정합니다. 예를 들어 스타일="width:500px;Height:500px", 이때 echarts가 명확한 크기가 생겼을 때 정상적으로 나타날 수 있다.(그런데 이 방법은 아직 좋지 않아요. 고정치의 높이와 폭이 웹 페이지 크기에 맞지 않아요.)

두 번째 테이블을 눌렀을 때 부div의 넓이와 높이를 얻고 구체적인 넓이와 높은 값을 echarts에 부여합니다. 이 방법에서 echarts를 초기화하고 웹 페이지를 불러오지 않을 때 초기화하는 방법입니다.구체적인 코드는 다음과 같다:

<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#chart1" data-toggle="tab">tab1a>
    li>
    <li>
        <a href="#chart2" data-toggle="tab" onclick="javascript:chartresize()">tab2a>
    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>

chartresize() 메서드는 다음과 같습니다.

function chartresize(){
    console.log("chartresize");
    var temp = new initchart();
    temp.resize();
}

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);
    }
}

이렇게 하면 두 번째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();
    }
}

echarts의 초기화는 정상적인 방식과 같지만,tab-content의 echarts의 높이를 100%로 설정하는 것을 기억하십시오.