부트 스트랩 탭 (TAB)을 해결 플러그 스위치 echarts 문제를 표시 할

1 참조 첨부 : https://blog.csdn.net/qq_24313955/article/details/78363981

문제 설명 : 통합 부트 스트랩 탭 echarts에서 기본 탭은 첫 번째로드가 제대로 차트를 echarts 선택,하지만 당신은 다른 탭 echarts 차트를 렌더링 할 수있는 또 다른 옵션으로 전환합니다. (여기에 아직 적응 문제를 고려하지 않음).

형식이 사용하고 자신의 스티커가 미래의 사용을 용이하게 할 수 있도록 기준이 동일하지 않기 때문에.

2 페이지 정의의 상단에 JS 파일 JS 배열입니다. var에 차트 = 새 Array ();

내 집은 $를 기반으로하기 때문에 (함수 () {.....}).

호를 처리하기위한 방법을 이용하여, 아래와 같이이어서 ..... 내부의 총수.

chart5 = ec.init (document.getElementById를 ( 'chart5')); 
barChart2 (데이터 2, chart5, "XXXX");

특정 여기에 표시되지.

할 수있다, 3, 다음, 당신은 방법, 바닥 플러스 charts.push (차트)로 전화하십시오.

chart.setOption (memoryOption, TRUE); 
charts.push (차트);

4, 그리고 코드를 추가하는 JS 최후 문서는 다음과 같습니다.

// 탭을 전환 해결, 기본이 아닌 히스토그램 테이블은 문제가 표시되지 않습니다 
($를 함수 () {
     // 에 추가할지 여부 // 인쇄 표시;을 console.log (차트) 
    .resize) $ (창 ( 함수 () {
         를 들어 ( VAR의 I = 0; I는 charts.length를 <; I는 ++ ) { 
            차트 [I] .resize (); 
        } 
    }); 
    
    // 데이터 토글 = "알약이나 데이터 토글 ="상기 다양한 탭에 따라 사용되는 탭 " 선택. 나는 데이터 "탭을."A-전환을 = 사용하고 
    // 문제가 창을로드 한 후 다시 렌더링 표시되지 않습니다 탭 스위칭을 해결한다. 
    $ ( 'A [데이터-전환 = "탭"]') 표시됨에 있습니다. ( ' .bs.tab ', 기능 (E) {
          ( VAR의 I = 0; I <가 charts.length를, I는 ++ ) {
            차트 [I] .resize (); 
        } 
    }); 
    
})

그리고, 당신은, 당신이 스위치 탭을 클릭하면 보고서가 제대로 표시 할 수 있습니다 볼 수 있습니다.

추천

출처www.cnblogs.com/henuyuxiang/p/11609230.html