echarts图表浏览器窗口缩放，图表自适应

今天在整一个首页的时候，发现浏览器缩小之后。echarts图表还是原来大小。直接占据了其他内容的位置。作为一个合格的开发者。这是绝对不能容忍的事情。
虽然不是专业前端。可是还是忍受不了。就百度去找为什么不会自适应。

** 造成不能自适应的原因： **
echarts的图表实例事实上并没有主动的去绑定resize()事件，就是说显示区域大小发生改变内部并不知道，当你需要去做一些自适应的效果的时候，需要使用方主动的去绑定这个事件达到自适应的效果，常见如window.onresize = myChart.resize。

示例：

//统计图容器
<div id="chart_2" class="echart t_btn7" style="width: 100%; height: 430px"></div>

//js代码
var chart_2 = echarts.init(document.getElementById('chart_2'));


option2 = {
    title: {
        text: '设备总运行情况',
        subtext: '',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        bottom: 10,
        left: 'center',
        data: []
    },
    series: [
        {
            name: '设备运行情况',
            type: 'pie',
            selectedMode: 'single',
            radius: ['35%', '55%'],

            label: {
                position: 'inner'
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1,name: '正常设备数量',itemStyle:{color:'#66FF99'}},
                {value: 8, name: '维护中设备数量',itemStyle:{color:'#FF9966'}},
                {value: 9, name: '异常设备数量',itemStyle:{color:'#FF0033'}}
            ]
        }
    ]
};
	//动态获取窗口尺寸以便重置图表尺寸，用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
	window.onresize = chart_2.resize;

	// 使用刚指定的配置项和数据显示图表。
	chart_2.setOption(option2);
	

如果是页面中有多个图表的话：

	window.onresize = function(){
    chart_1.resize();
    chart_2.resize();    //若有多个图表变动，可多写
	}