Echarts多个图表自适应大小（亲测有效）

本文介绍: 用Echarts在同一个页面插入了两个图后想让这两个图都自适应页面的大小，网上提供了很多方法，但这些方法都没法解决问题，于是我尝试将几种方法中的一些特性进行结合终于解决了问题，由于网上没有看到这个方法寻找解决办法的过程中耗费了大量时间，所以想写这篇文章希望能帮助遇到相同问题的人。注意在同一页面插入两个图的方式我感觉还是有区别的，有的图是一个 option 里面集成了两张图，这种其实就是一张图，只是分了两个部分，直接用on re size 即可，而我是进行了两次 myCh ar t.setOp ti on(option.

	用Echarts在同一个页面插入了两个图后想让这两个图都自适应页面的大小，网上提供了很多方法，但这些方法都
没法解决问题，于是我尝试将几种方法中的一些特性进行结合终于解决了问题，由于网上没有看到这个方法寻找解决办
法的过程中耗费了大量时间，所以想写这篇文章希望能帮助遇到相同问题的人。

注意

	在同一页面插入两个图的方式我感觉还是有区别的，有的图是一个option里面集成了两张图，这种其实就是一张
图，只是分了两个部分，直接用onresize即可，而我是进行了两次myChart.setOption(option);一开始的方案是在
body里面插入两个script，将两个部分分开画图但是看了似乎两个图自适应要在一个script里面分别对两张图进行自
适应，就合成了一个script，而若使用onresize则出现了一个很普遍的问题：只有最后一张图自适应而第一张图没法
自适应；但是又看了一些文章说addEventListener可以让两张图都成功自适应但实则没有任何效果，连一张图自适应
都没了。

如下，注意所有的自适应代码段都要在setOpti on之后，此法没有效果。

myChart.setOption(option);
myChart1.setOption(option);
window.addEventListener("resize",function(){
			myChart.resize();
			myChart1.resize();
});

事实上很多文章里面提到的onres ize方法也是没有任何效果，具体原因未知，格式也是类似上方代码，而成功实现一张图自适应的代码是这样的。（注：这种方法需要借助jquery，此法不适用两张图）

    myChart.setOption(option);
    window.onresize = function () {
			height= $(window).height();
			myChart.getDom().style.height = this.height+ "px";
      width= $(window).width();
			myChart.getDom().style.width = this.width+ "px";
			myChart.resize();}

于是在尝试了几十种方法并查看了文档后，我想到了addEventListener和onresize成功的情况，想着是否能将onresize成功的代码段用在addEventListener上，最终尝试后，成功。

      myChart.setOption(option);

      window.addEventListener("resize",function(){
      height= $(window).height();
			myChart.getDom().style.height = this.height+ "px";
      width= $(window).width();
			myChart.getDom().style.width = this.width+ "px";
			myChart.resize();
});

以上代码只需要分别在两张图setOption后加上即可，格式如下。

    var myChart1 = echarts.init(document.getElementById('main1'));
    option={...
    window.addEventListener("resize",function(){
      height= $(window).height();
			myChart1.getDom().style.height = this.height+ "px";
      width= $(window).width();
			myChart1.getDom().style.width = this.width+ "px";
			myChart1.resize();
});
   var myChart2 = echarts.init(document.getElementById('main2'));
    option={...
    window.addEventListener("resize",function(){
      height= $(window).height();
			myChart2.getDom().style.height = this.height+ "px";
      width= $(window).width();
			myChart2.getDom().style.width = this.width+ "px";
			myChart2.resize();
});