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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
JS 日期比较大小的简单实例
Jan 13 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 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
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
php中的静态变量的基本用法
2014/03/20 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
Javascript之String对象详解
2016/06/08 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
JS原生数据双向绑定实现代码
2017/08/14 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
python私有属性和方法实例分析
2015/01/15 Python
python多线程方式执行多个bat代码
2016/06/07 Python
python监控进程脚本
2018/04/12 Python
利用python进行文件操作
2020/12/04 Python
JAVA程序员面试题
2012/10/03 面试题
Ruby如何创建一个线程
2013/03/10 面试题
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
语文教学随笔感言
2014/02/18 职场文书
《童年》教学反思
2014/02/18 职场文书
学习方法演讲稿
2014/05/10 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL