Element图表初始大小及窗口自适应实现


Posted in Javascript onJuly 10, 2020

最近在做一个轮播图,使用的是element的Carousel走马灯,每一个走马灯里是eachrts图,开始页面加载的时候发现echarts图并不能自适应,开始以为是走马灯的问题,后来发现不是

不知道大家在用echarts的时候有没有遇到这种情况:

最开始盛放图表的容器是隐藏(或者tab切换)的,然后再显示的时候,里面echarts图表就没用初始大小了。比如我遇到的这种:

Element图表初始大小及窗口自适应实现

有童鞋这会儿估计看出原因了:因为元素最初隐藏,再显示之后没有自动变化宽度,所以echarts图表没有初始宽高,官方文档的说法:

Element图表初始大小及窗口自适应实现

请注意:这个宽度在一些情况下设置百分比 是没有作用的,所以得设置为具体数字或者用js赋值,类似这种:

$('main').style.width = (document.body.clientWidth-300)*0.6+'px';

P.S:这里没说高度是因为如果不给容器固定高度,图表是完成不显示的(高度为0的容器肯定不会显示哦)

那么如果想设置echart图表随窗口的缩放变化呢?以下两种写法都可以:

第一种:

window.onresize = myChart.resize;
// .resize后不用加括号哦,一般如果window resize的时候不设置其他,可以这样写

第二种:

window.onresize = function () {
    this.myChart.resize();
    // .resize后加括号哦,这里还可以写其他的事件
};

echarts官方文档写的很详细哦,需要的童鞋自己去翻阅。

具体到我的代码,我是这样实现的,因为我的容器是百分比写的,所以我的实现方式如下:

Element图表初始大小及窗口自适应实现

即是dom节点渲染以后,调用echarts实例的resize()方法;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
js 通用订单代码
Dec 23 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
简介JavaScript错误处理机制
Aug 04 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 #Javascript
简单了解Vue computed属性及watch区别
Jul 10 #Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 #Javascript
基于vue+element实现全局loading过程详解
Jul 10 #Javascript
JS sort方法基于数组对象属性值排序
Jul 10 #Javascript
JavaScript this指向相关原理及实例解析
Jul 10 #Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 #Javascript
You might like
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
Python使用爬虫猜密码
2016/02/19 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
Python中偏函数用法示例
2018/06/07 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
护士的自我鉴定
2014/02/07 职场文书
项目合作协议书
2014/04/16 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书