echart图表 宽高度自适应

之前在使用echart的时候就发现了echart是不支持图表高度自适应的。翻阅echarts文档，里面都有配置详细介绍，通过设置宽度百分比再使用 echart图表本身是提供了一个resize的函数可实现宽度自适应。 但是二十世纪新世界，只能宽度自适应那可是不行的呀

Follow me

设置渲染echart图表的div随着window的width和height变化而变化

// An highlighted block
var scatterechartDom=document.getElementById('scatterechart');
function resizeDom(dom) {//通过窗体高宽计算容器高宽，渲染echart图表的div的宽高度已达到自适应目的
	dom.style.width = (window.innerWidth-15)+'px';
	dom.style.height = (window.innerHeight-35)+'px';
 };

function echartCanvas(){
  var scatterechart= echarts.init(scatterechartDom);
	scatterechart.setOption({
		xAxis:{
			type:'value'
		},
		yAxis:{
			type:'value'
		},
		dataZoom:[
		 {
			type: 'slider',
			xAxisIndex: 0,
			start: 10,
			end: 60
		},
		{
			type: 'inside',
			xAxisIndex: 0,
			start: 10,
			end: 60
		},
		{
			type: 'slider',
			yAxisIndex: 0,
			start: 30,
			end: 80
		},
		{
			type: 'inside',
			yAxisIndex: 0,
			start: 30,
			end: 80
		}],
		series:[
		{
			type:'scatter',//这是散点图
			itemStyle:{
				opacity:0.8
			},
			symbolSize:function(val){
				return val[2]*40;
			},
		data:[["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
		}
		]
	})
	//当窗口发生变化时
	 window.addEventListener("resize", () => {
		 resizeDom(scatterechartDom); //重置div宽高度
		 scatterechart.resize();//重绘echart图表
	 });
}

使页面一加载echart图表就自适应屏幕大小

window.onload=function(){
	resizeWorldMapContainer(scatterechartDom);
	echartCanvas();
}

到这来就完成啦~
tips： div一开始无需设置固定的宽高度