关于echarts 同页面多图表同实例名resize只变一个的解决方法

今天项目中做一个客户决策分析的echarts图表分析，在同一页面有多个图，在浏览器改变大小的同事图表也要跟着变化，但是单纯的使用

 window.addEventListener("resize",function(){            $Chart.myChart.resize();     });

时不行的 ，作用的只是最后一个测试7 才会变 由于图表的所有数据和数量都是通过服务端过来的，因此所有的实例的名称都一样

 for(var i = 0 ;i < chartDatas.length; i++){                var datas = chartDatas[i];                var list = datas.dataSource;                var body = '<div class="box'+ i+' box"style="height:'+datas.displaySize.split(",")[0] +'%;width:'+datas.displaySize.split(",")[1]+'%;position:absolute;top:'+ datas.location.split(",")[0]+'%;left:'+datas.location.split(",")[1] +'%">'            + '<div class="main'+ i +'"style="position:absolute;top:0;left:0;z-index:20;width:100%;height:100%;overflow: hidden;">'            + '<div id="main'+ i +'" style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:10;overflow: hidden;">'            + '</div>'            +' </div>'                + '</div>';    $("#content").append(body);                var type = parseInt(datas.chartType);     if(type == 0){        var list0 = [datas.dataSource.caseInfo];        $Chart.get(type,"main"+i,list0,datas.title,datas.color,datas.unit,distance);     }else if(type == 7){        var div = "<div style='font-weight:bold;color:"+ datas.color +"'>"+ datas.title +"</div>";        $("#main"+i).html(div).append(htmlDecode(datas.html));    }else{        $Chart.get(type,"main"+i,list,datas.title,datas.color,datas.unit,distance);         }  }

 $Chart.get是我自己写的插件 包含了所有图表的类型，通过判断type的数值来插入不同类型的图形表，进入页面的时候插入以i为顺序的不同div中如果直接在for循环中写resize的话是不行的只有 测试7 会resize,但是在for中console.log出$Chart.myChart（实例化名在插件中定义的)是把所有的都会打印出来，但是resize只会是最后一个，最开始我实在window的resize中再写了一个resize但是作用也是最后一个，打印出来不是全部而是最后一个。解决的方法是什么呢？由于在for中能打印出来所有的实例化，那么我们就var 一个空数组charts在for外面
var charts = []
在for循环中将$Chart.myChart 都push到这个数组中

然后在for循环外添加resize

window.addEventListener("resize",function(){        for(var i = 0; i < charts.length; i++){            charts[i].resize();        }        });

这样每一个实例化都会跟随浏览器的变化而变化。