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();
};