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 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
使用Vue实现一个树组件的示例
Nov 06 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
再说下636单管机
2021/03/02 无线电
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
PHP制作万年历
2015/01/07 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
php中文验证码实现方法
2015/06/18 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
python字典基本操作实例分析
2015/07/11 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
python创建学生管理系统
2019/11/22 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
企业面试题试卷附带答案
2015/12/20 面试题
外贸专业求职信
2014/03/09 职场文书
大学军训的体会
2014/11/08 职场文书
生活小常识广播稿
2015/08/19 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记