2017_11_24 echarts之屏幕自適應、div充滿整個屏幕

爲了調整echarts的div容器佔據整個屏幕,需要將div和body屬性設置成百分比形式,即如下代碼:


可以在head頭中添加style,或者創建.css文件引入

<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}


#main {
width: 100%;
min-height: 100%;
}
</style>



爲了適應不同瀏覽器以及不同的移動設備,需要將生成的echarts圖表進行自適應調整,在不改變任何原代碼的基礎上,添加如下代碼:


var worldMapContainer = document.getElementById('main');
//用於使chart自適應高度和寬度,通過窗體高寬計算容器高寬
var resizeWorldMapContainer = function() {
worldMapContainer.style.width = window.innerWidth + 'px';
worldMapContainer.style.height = window.innerHeight + 'px';
};
//設置容器高寬
resizeWorldMapContainer();
// 基於準備好的dom,初始化echarts實例
var myChart = echarts.init(worldMapContainer);




在myChart.setOption(option);下添加

//用於使chart自適應高度和寬度
window.onresize = function() {
//重置容器高寬
resizeWorldMapContainer();
myChart.resize();
};


發佈了37 篇原創文章 · 獲贊 21 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章