Echarts 不能百分比顯示或顯示有問題

1，設折線圖寬為100%（如：容器div的class=“RiBarBot”寬為880px），剛初始化時隱藏折線圖（或后期刷新、隱藏與顯示折線圖時），當點擊顯示折線圖時，獲取到的寬只有100px，並不是.RiBarBot{width:100%;}如下圖：

 

 

 

解決方案：

①：適應個別情況。

/*css不使用*/
.RiBarBot{display:none}   // 采用position定位

//初始化時：
$(".RiBarBot").hide();$(".RiBarBot").hide();

//用js控制  ：
// 單擊顯示時：
$(".RiBarBot").css("opacity","1");
// 單擊隱藏時：
$(".RiBarBot").css("opacity","0");

②：分辨率（以1360和1920為例）改變時寬度和高度都獲取不全，使用媒體查詢

@media screen and (min-width: 1300px) {    
    .RiBarBot{
        width:880px;
        height: 500px;
    }
}
@media screen and (min-width: 1900px) {    
    .RiBarBot{
        width:1200px;
        height: 776px;
    }
}  
/* 
或
正常分辨率時：
*/
.RiMapBot{
    width: 880px;
    height: 46rem;
}
/*大屏顯示時：*/
@media screen and (min-width: 1900px) {    
    .RiBarBot{
        width:1200px;              
    }
}  

2.設地圖寬為100%（如：容器div的class=“RiMapBot”寬為880px）

.RiMapBot{　　 width: 100%; height: 46rem; } 

在1360的分辨率上等同於.RiMapBot{　　 width: 880px; height:552px; } 

問題：初始化時，1360分辨率顯示正常。但在1920的分辨率上，寬度獲取正常，echarts地圖獲取高度還是552px，但父容器寬高獲取正常。
原因：將setRem();的調用放到其他函數下面，造成地圖先加載或改變分辨率寬高。
解決方案：

$(document).ready(function(){
    //  setRem();的調用放到最上方
    setRem();
    $(window).resize(function(){
        setRem();
    });
    // 以下是其他初始化函數的調用
    
});

另解決方案可采用媒體查詢。