echarts 随屏幕大小改变大小chart.resize()

在同一页面中存在多个图表，chart.resize();其中之一不起作用。

Echarts同一页面多个图表自适应浏览器窗口大小——window.onresize

当前做的一个项目中，频繁使用到百度团队的Echarts，发在一个页面同时出现多个图表时，只有最后一个图表触发了window.onresize事件，查询官方文档后得到解决。

方法如下：

1 2 3 4 5 6 7 8

hwChart.setOption(option_hw); swChart.setOption(option_sw); setTimeout( function  (){      window.onresize =  function  () {          hwChart.resize();          swChart.resize();      } },200)

示例：

html

<div id="mainchart" style="width: 100%;height:360px;"></div>
<div id="active" style="width: 100%;height:415px;"></div>

script

<script>
    		function mainchart(){
	    		// 基于准备好的dom，初始化echarts实例
		        var resourceChart = echarts.init(document.getElementById('mainchart'),'macarons'); //macarons主题
		        var activeChart = echarts.init(document.getElementById('active'),'macarons');
		        // 指定图表的配置项和数据
	    		option = {
				    title: {
				        text: '用户在线率/资源占用率',
				        textStyle:{
		                    color:'#333',
		                    fontStyle:'normal',
		                    fontWeight:"600",
		                    fontFamily:"microsoft yahei",
		                    fontSize:16
		                }
				    },
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    legend: {
				    	x: 'right', 
				        data:['用户在线率','磁盘','内存']
				    },
				    grid: {
				    	x: '40px', 
				    	y: '50px', 
				    	width: '95%'
				    },
				    xAxis: [
				        {
				        	type: 'category',
					        boundaryGap: false,
		 			        data: ['8:10','8:20','8:30','8:40','8:50','9:00','9:10']
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series: [
				        {
				            name:'用户在线率',
				            type:'line',
	 			            data:[50, 59, 67, 53, 72, 65, 70]
				        },
				        {
				            name:'磁盘',
				            type:'line',
	 			            data:[61, 72, 72, 65, 83, 82, 90]
				        },
				        {
				            name:'内存',
				            type:'line',
				            data:[55, 67, 62, 75, 93, 72, 80]，
				            markPoint: {
				                data: [
				                    {type: 'max', name: '最大值'},
				                    {type: 'min', name: '最小值'}
				                ]
				            }*/
				        }
				    ]
				};
		        
	    		// 指定图表的配置项和数据
	    		option2 = {
				    title: {
				        text: '活跃用户TOP',
				        textStyle:{
		                    color:'#333',
		                    fontStyle:'normal',
		                    fontWeight:"600",
		                    fontFamily:"microsoft yahei",
		                    fontSize:16
		                }
				    },
				     tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'none'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '8%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				            type : 'category',
				            data : ['李雪','周成龙','张敏','元芳菲','李菲儿','陈洁','张敏','元芳菲','李菲儿','陈洁'],
				            axisTick: {
				                alignWithLabel: true
				            },
				          	//设置字体倾斜  
		                    axisLabel:{ 
		                        rotate:45//倾斜度 -90 至 90 默认为0  
		                       
		                    },
				        }
				    ],
				     yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series: [
				        {
				            name: '2017年',
				            type: 'bar',
				            itemStyle: {
				                normal: {
				                    color: new echarts.graphic.LinearGradient(
				                        0, 0, 0, 1,
				                        [
				                            {offset: 0, color: '#bcd1ff'},
				                            {offset: 1, color: '#3964c1'}
				                        ]
				                    )
				                },
				                emphasis: {
				                    color: new echarts.graphic.LinearGradient(
				                        0, 0, 0, 1,
				                        [
				                            {offset: 0, color: '#bcd1ff'},
				                            {offset: 1, color: '#2851a7'}
				                        ]
				                    )
				                }
				            },
				            data: [100, 300, 152, 121594, 134141, 81807, 31000, 121594, 134141, 81807]
				        }
				    ]
				};
		        
		        
				// 使用刚指定的配置项和数据显示图表。
	        	resourceChart.setOption(option);
	        	activeChart.setOption(option2);
	        	/*窗口自适应，关键代码*/
	        	setTimeout(function (){
	        	    window.onresize = function () {
	        	    	resourceChart.resize();
	        	    	activeChart.resize();
	        	    }
	        	},200)
    		};
    	</script>