1. 程式人生 > >Echart4 多個tab頁切換不顯示

Echart4 多個tab頁切換不顯示

問題描述:在使用Echart3的時候只要在切換tab的時候,重新初始化和setOption圖表就會顯示,但是Echart4的時候這樣操作圖表並不顯示,無意間resize視窗,這時圖表就顯示了。

解決方法:切換視窗的時候除了執行重新初始化和setOption之外,再對圖表進行resize()操作。

主要程式碼如下:

    $(".tab button").click(function() {
        var index = $(this).index();
        $(this).addClass("active").siblings().removeClass("active");
        tabpanes.eq(index).addClass("active").siblings().removeClass("active");

        if (index == 0) {
            var myChart1 = echarts.init(document.getElementById('lineChart'), theme);
            myChart1.setOption(option);
            myChart1.resize();
            ObjectResize(myChart1.resize);
        }
        if (index == 1) {
            var myChart2 = echarts.init(document.getElementById('polar'), theme);
            myChart2.setOption(option1);
            myChart2.resize();
            ObjectResize(myChart2.resize);
        }
    })