用Echarts在同一个页面插入了两个图后想让这两个图都自适应页面的大小,网上提供了很多方法,但这些方法都
没法解决问题,于是我尝试将几种方法中的一些特性进行结合终于解决了问题,由于网上没有看到这个方法寻找解决办
法的过程中耗费了大量时间,所以想写这篇文章希望能帮助遇到相同问题的人。
注意
在同一页面插入两个图的方式我感觉还是有区别的,有的图是一个option里面集成了两张图,这种其实就是一张
图,只是分了两个部分,直接用onresize即可,而我是进行了两次myChart.setOption(option);一开始的方案是在
body里面插入两个script,将两个部分分开画图但是看了似乎两个图自适应要在一个script里面分别对两张图进行自
适应,就合成了一个script,而若使用onresize则出现了一个很普遍的问题:只有最后一张图自适应而第一张图没法
自适应;但是又看了一些文章说addEventListener可以让两张图都成功自适应但实则没有任何效果,连一张图自适应
都没了。
如下,注意所有的自适应代码段都要在setOption之后,此法没有效果。
myChart.setOption(option);
myChart1.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
myChart1.resize();
});
事实上很多文章里面提到的onresize方法也是没有任何效果,具体原因未知,格式也是类似上方代码,而成功实现一张图自适应的代码是这样的。(注:这种方法需要借助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()