飞龙博客

妙法莲华经

echarts自适应尺寸宽度高度eharts销毁与重建

feilong.org 修订于2018-11-23 10:16:33

echarts自适应尺寸宽度或高度,这个在echarts的官方演示文档里飞龙没找到,本想采取当窗口发生尺寸resize改变时,采用eharts销毁与重建的方法去实现重新渲染图表,但是尝试了一下,飞龙没搞成功。查了下网上的资料,发现echarts有自带的resize方法。

每次窗口大小改变的时候,也就是window对象触发onresize事件,这个时候,我们将echarts对象触发resize方法,就可以了。
原生js的写法是

ecapp.setOption(ecopt);window.onresize = echart.resize;

但是原生js的onresize一个页面内只能设置一次。有时候echarts对象在不同的 封装函数内,改怎么办呢?
可以改为 jQuery写法试试看:

ecapp.setOption(ecopt);
$(window).resize(function(){ecapp.resize();});

飞龙提示你,echarts方法运用的时候,注意有一个小括号,resize方法写法,略有不同哦。

更新网址:http://feilong.org/echarts-resize-window-size-width-height
最初发布:20181123 10:15:03 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: 前端开发 网站开发

旧文:

飞龙前端QQ群