vue图片宽高自适应_Echarts图标宽度变成100px,让图表宽度随着父元素自动适应,Vue实时监听宽度的变化,这可能是史上最好的解决方案!...
源码解读:当Echarts绘制图表计算宽度的时候,由于初始化图表设置为display: none,所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将width: 100%;转为100,所以计算出的图表宽度为100px,就变成如上图那样的显示;
问题2复现:
问题2原因:
由于开发的后台管理系统有侧边栏收缩功能,使用了Echa的折线图样式设置为width: 100%,但是图表在初始化时宽度已经继承父元素的宽度,我们再次改变父元素宽度时,并不能让Echarts的宽度随着父元素自动适应。如上图右侧突出的样式;
++解决思路:
由于元素display: none无法获取到相应的宽度,当元素变化时我们可以手动的记录父元素的宽度,或者侦听display属性,然后使用官方文档中的resize()方法
终极解决方案
其实解决方案最重要的是侦听元素的变化同时更多的节省性能的开销,这里推荐大家一个用来侦听元素变化的开源插件:element-resize-detector
该插件针对元素的优化的跨浏览器调整大小侦听器。速度是相关方法的37倍,参阅文档(插件支持IE8及以上)
插件原理将对象元素注入到目标元素中,设置特殊样式列表以将其从视图中隐藏,并监视其大小以进行调整–当目标元素父级被调整大小时,它会触发警报。脚本提供的第一种方法是addResizeListener,它管理所有侦听器并使用注入的object元素监视元素的大小。另一种方法是removeResizeListener,它可以确保在删除监听器时将它们正确分离。
API:listenTo(element,listener)
// 用法示例
erd.listenTo(document.getElementById("test"), function(element) {
var width = element.offsetWidth;
var height = element.offsetHeight;
console.log("Size: " + width + "x" + height);
});
插件的更多用途:
调整大小的Web组件UI开发
基于元素的响应式设计
基于大小的内容加载
你可以想象的任何东西!
Vue中使用方法:
首先通过npm安装该插件 :
npm install element-resize-detector
在Vue中引入插件使用:
// 此方法博主亲身测试,可以完美解决,并已经投入项目实际使用
import elementResize from ‘element-resize-detector‘ // 尺寸监听组件
export default {
mounted() {
var mainChart = document.getElementById(‘main‘)
this.charts = echarts.init(mainChart) // 图标ID初始化
// 初始化element-resize-detector组件
var elementResize = elementResize({
strategy: ‘scroll‘, //
callOnAdd: true // 添加侦听器时是否应调用,默认true
})
elementResize.listenTo(mainChart, function(element) {
echarts.init(mainChart).resize() // 当元素尺寸发生改变是会触发此事件,刷新图表
});
}
}
通过以上简单的两步,你就可以看到成果,Vue会实时监听元素宽度的变化,Echarts会通过resize()的方法自动刷新,头疼的问题就迎刃而解了!
如果大家有任何疑问即可留言反馈,会在第一时间回复反馈,谢谢大家!
本人使用GSAP框架搭建的个人网站也上线啦!有兴趣可以访问 zhaohongcheng.com 查看,感谢~
本人uni-app影视项目已经重磅开源,一套代码套发布到H5、APP、小程序等多个平台!有兴趣可以访问Dcloud官方插件市场https://ext.dcloud.net.cn/plugin?id=1839 查看,感谢~
vue图片宽高自适应_Echarts图标宽度变成100px,让图表宽度随着父元素自动适应,Vue实时监听宽度的变化,这可能是史上最好的解决方案!...相关推荐
- vue图片宽高自适应_div或img图片高度随宽度自适应的方法
该方法主要用来做网站自适应的,同时可以实现撑起内容高度,避免图片加载后导致的页面滚动. 一.可以使用js判断图片的宽度得到具体数值之后,再来利用js设置图片的高度(这里就不具体为大家细说了). 利用j ...
- vue 图片宽高自适应
一.概述 现有一个图片预览功能,目前设置的宽高都是100%.但是这样有一个问题,如果图片的高度太高,图片展示不全. 二.解决 vue图片在设置好的div里面自动适应宽高,图片显示全部,不够宽高的留空白 ...
- css控制图片拉伸不变形,css+background实现 图片宽高自适应,拉伸裁剪不变形
图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性. 下面咱们在网上找两张宽高不一样的照片: No.1 ...
- 【PDFBox】PDFBox操作PDF文档之添加本地图片、添加网络图片、图片宽高自适应、图片水平垂直居中对齐
这篇文章,主要介绍PDFBox操作PDF文档之添加本地图片.添加网络图片.图片宽高自适应.图片水平垂直居中对齐. 目录 一.PDFBox操作图片 1.1.添加本地图片 (1)案例代码 (2)运行效果 ...
- vue移动端通过px动态计算图片宽高_vue图片宽高自适应_移动web图片高度自适应的解决方案...
由于图片的加载是在dom加载完成之后进行的,于是,在手机端浏览网页时,经常会看到页面刚打开时很多内容叠在一起,当图片加载完成后,页面会由于图片加载完成出现明显的抖动 针对这个问题,有以下几种解决方案 ...
- vue iframe 宽高自适应
获取窗口的宽高,然后将相应值赋值给iframe <template><div><iframe ref="iframe" id="bdIfra ...
- css图片宽高自适应盒子(宽>高就限制宽,高>宽就限制高)
效果图: 宽>高就限制宽 即宽度100% ,高度自动.例如:19201088 高>宽就限制高 即高度100%,宽度自动.例如:19442592 很多时候图片宽高比不固定,而且作为一个前端, ...
- 背景图片宽高自适应实现
.banner { width: 100%; background: url(/image/excellentCase/banner_pc.png?v=202106151044) no-repeat; ...
- 宽高自适应_css样式写出三角形,宽高自适应的正方形,扇形!
闲来无事练习一下常见的css样式,希望大家能指点一二! 1用css实现一个三角形!原理用border属性 <!DOCTYPE html> <html> <head> ...
最新文章
- python3读取excel数据-Python3读取和写入excel表格数据的示例代码
- MySQL-常用命令大全
- 一个LINUX高手写给初学者的话
- SpringBoot_配置-@Conditional自动配置报告
- android studio 搭建环境,Android studio搭建xposed环境
- ajax 实时进度_如何做好项目进度管理
- java vo对象转bo对象_java的几种对象(PO,VO,DAO,BO,POJO)解释(转)
- [FFmpeg] Ubuntu 16.04 安装 FFmpeg
- TFRecord —— tensorflow 下的统一数据存储格式
- linux basename学习
- php syslog服务器,Linux Syslog日志服务器的搭建
- 阶段3 2.Spring_08.面向切面编程 AOP_8 spring中的环绕通知
- 黑群晖数据迁移白群晖(DS 920+)
- Ensp教程 —— Ensp模拟器中的设备如何连接到真实物理机
- linux视频嗅探工具,Linux 5.13增加来自英特尔的KCPUID组件 帮助准确识别新推出的CPU...
- 【顶会论文】165篇CoRL2020 accept论文汇总
- 电信物联网平台ctwing对接开发-平台概述
- 使用 adb logcat 显示 Android 日志
- java圈子_从JAVA入了这个圈子,有多少老司机和他一样?
- EMC选定计划首现国内厂商(迪思杰)
热门文章
- [译] part 8: golang if else 语句
- Redis(七)分布式锁
- vault-图形界面
- 优先队列(个人模版)
- 如何把winPE装到硬盘隐藏起来
- MapInfo之格式说明(转载)
- 蹭一波热度,对《青春有你2》109位漂亮小姐姐下手了
- Colaboratory下载Kaggle数据
- 【python 学习】知识点日记
- 【小坑】Android 实现对话框会报错 (You need to use a Theme.AppCompat theme (or descendant) with this activity)