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 相关文章推荐
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
JS严格模式知识点总结
Feb 27 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 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
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
pandas中的series数据类型详解
2019/07/06 Python
python判断自身是否正在运行的方法
2019/08/08 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
使用python实现飞机大战游戏
2020/03/23 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
贪污检举信范文
2015/03/02 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
MySQL优化及索引解析
2022/03/17 MySQL