飞龙博客

飞龙博客 飞龙在天

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

feilong.org 修订于2021-01-22 04:46:38 1,547 次浏览

echarts怎样自适应尺寸,包括怎样自适应宽度或怎样自适应高度。这个问题飞龙在echarts的官方演示文档里没找到。

本想采取当窗口发生尺寸resize改变时,采用eharts销毁与重建的方法,去实现重新渲染图表,但飞龙尝试了一下没成功。

飞龙查了下网上的资料,发现echarts有自带的resize方法。

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

一、原生js的写法是:

//ecEg是echarts实例
//ecOpts是实例的配置项
ecEg.setOption(ecOpts);window.onresize = echart.resize;

但是原生js的onresize在一个页面内只能设置一次。
有时候echarts对象在不同的封装函数内,这时应该怎么办呢?

二、可以改为 jQuery的写法,试试。
飞龙提示,运用echarts的resize方法时注意有个小括号。

ecEg.setOption(ecOpts);
$(window).resize(function(){ecEg.resize();});

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

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

所在分类: echarts 教程 网站开发

旧文:

blog money bui 教程 echarts 教程 eclipse 教程 html css 教程 IT趋势 js 教程 json 教程 mysql 教程 nodejs npm 教程 onblog SQLite 教程 tutorials vscode 教程 wap网站 winpe启动盘 wordpress 主机推荐 书法 前端开发 博客 名企名网 国学 域名注册 常用软件 建站程序 操作系统 教程 数码 无线上网 日记 电子商务 电脑笔记本 网站 网站优化 网站开发 网站推广 网站策划 网络 虚拟现实 默认