echarts圖表在Tab頁中width: 100%失效致使的第一個Tab頁以後的Tab頁圖表不能正常顯示的問題

解決Tab切換echarts圖表不能正常顯示問題:css

    // 繪圖div父容器的寬度
    let w = $('.figure').width();
    $('#fig-t').css('width', w); // 獲取父容器的寬度直接賦值給圖表以達到寬度100%的效果
    $('#fig-f').css('width', w); // 獲取父容器的寬度直接賦值給圖表以達到寬度100%的效果
    $('#fig-e').css('width', w); // 獲取父容器的寬度直接賦值給圖表以達到寬度100%的效果
    fig_t = echarts.init(document.getElementById('fig-t'), 'white', {renderer: 'canvas'});
    fig_f = echarts.init(document.getElementById('fig-f'), 'white', {renderer: 'canvas'});
    fig_e = echarts.init(document.getElementById('fig-e'), 'white', {renderer: 'canvas'});

上面只是解決了Tab頁切換致使的圖表顯示問題,canvas

因爲是在圖表初始化的時候設置了容器寬度,圖表並不能隨窗口縮放自適應,下面是解決方法:echarts

window.onresize = function () {
    // 繪圖div父容器的寬度
    let w = $('.figure').width();
    $('#fig-t').css('width', w); // 獲取父容器的寬度直接賦值給圖表以達到寬度100%的效果
    $('#fig-f').css('width', w); // 獲取父容器的寬度直接賦值給圖表以達到寬度100%的效果
    $('#fig-e').css('width', w); // 獲取父容器的寬度直接賦值給圖表以達到寬度100%的效果
    if ((typeof fig_t) !== "undefined" && fig_t.dispose) {
        // ECharts隨窗口大小改變而自適應
        fig_t.resize();
    }
    if ((typeof fig_f) !== "undefined" && fig_f.dispose) {
        // ECharts隨窗口大小改變而自適應
        fig_f.resize();
    }
    if ((typeof fig_e) !== "undefined" && fig_e.dispose) {
        // ECharts隨窗口大小改變而自適應
        fig_e.resize();
    }
};
相關文章
相關標籤/搜索