vue使用echarts图表自适应的几种解决方案


Posted in Vue.js onDecember 04, 2020

1.使用window.onresize

let myChart = echarts.init(document.getElementById(dom))
window.onresize = function () {
 	myChat.resize()
}

优点:可以根据窗口大小实现自适应

缺点:

多个图表自适应写法比较麻烦(当一个页面的图表太多时,这样写法不是很灵活);

let myChart1 = echarts.init(document.getElementById(dom1))
let myChart2 = echarts.init(document.getElementById(dom2))
window.onresize = function () {
 	myChat1.resize()
 	myChat2.resize()
}

多个vue页面有onresize方法时,会被覆盖;

当vue页面路由跳转到下一个页面时,上一个页面的onresize方法会继续执行,(这个时候下一个页面已经不需要onresize方法执行了,当图表过多时会造成页面卡顿)

2.使用window.addEventListener添加resize方法

let myChart = echarts.init(document.getElementById(dom))
let sizeFun = function () {
 	myChat.resize()
}
window.addEventListener('resize', sizeFun )

优点:

  1. 可以根据窗口大小实现自适应;
  2. 将图表方法封装以后,只需要执行一遍就可以实现多个图表的自适应;
  3. 不会被覆盖

缺点:

  • 当vue页面路由跳转到下一个页面时,上一个页面的onresize方法会继续执行

【造成这个问题的原因是因为vue是单页面应用,echarts中的操作都是基于window,当然也可以使用window.removeEventListener在下一个页面删除绑定的方法】

3.实现在div使用onresize方法

esresize.js代码

var EleResize = {
 _handleResize: function (e) {
 var ele = e.target || e.srcElement
 var trigger = ele.__resizeTrigger__
 if (trigger) {
 var handlers = trigger.__z_resizeListeners
 if (handlers) {
 var size = handlers.length
 for (var i = 0; i < size; i++) {
 var h = handlers[i]
 var handler = h.handler
 var context = h.context
 handler.apply(context, [e])
 }
 }
 }
 },
 _removeHandler: function (ele, handler, context) {
 var handlers = ele.__z_resizeListeners
 if (handlers) {
 var size = handlers.length
 for (var i = 0; i < size; i++) {
 var h = handlers[i]
 if (h.handler === handler && h.context === context) {
 handlers.splice(i, 1)
 return
 }
 }
 }
 },
 _createResizeTrigger: function (ele) {
 var obj = document.createElement('object')
 obj.setAttribute('style',
 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;')
 obj.onload = EleResize._handleObjectLoad
 obj.type = 'text/html'
 ele.appendChild(obj)
 obj.data = 'about:blank'
 return obj
 },
 _handleObjectLoad: function (evt) {
 this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__
 this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize)
 }
}
if (document.attachEvent) { // ie9-10
 EleResize.on = function (ele, handler, context) {
 var handlers = ele.__z_resizeListeners
 if (!handlers) {
 handlers = []
 ele.__z_resizeListeners = handlers
 ele.__resizeTrigger__ = ele
 ele.attachEvent('onresize', EleResize._handleResize)
 }
 handlers.push({
 handler: handler,
 context: context
 })
 }
 EleResize.off = function (ele, handler, context) {
 var handlers = ele.__z_resizeListeners
 if (handlers) {
 EleResize._removeHandler(ele, handler, context)
 if (handlers.length === 0) {
 ele.detachEvent('onresize', EleResize._handleResize)
 delete ele.__z_resizeListeners
 }
 }
 }
} else {
 EleResize.on = function (ele, handler, context) {
 var handlers = ele.__z_resizeListeners
 if (!handlers) {
 handlers = []
 ele.__z_resizeListeners = handlers

 if (getComputedStyle(ele, null).position === 'static') {
 ele.style.position = 'relative'
 }
 var obj = EleResize._createResizeTrigger(ele)
 ele.__resizeTrigger__ = obj
 obj.__resizeElement__ = ele
 }
 handlers.push({
 handler: handler,
 context: context
 })
 }
 EleResize.off = function (ele, handler, context) {
 var handlers = ele.__z_resizeListeners
 if (handlers) {
 EleResize._removeHandler(ele, handler, context)
 if (handlers.length === 0) {
 var trigger = ele.__resizeTrigger__
 if (trigger) {
 trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize)
 ele.removeChild(trigger)
 delete ele.__resizeTrigger__
 }
 delete ele.__z_resizeListeners
 }
 }
 }
}
export {EleResize}

到此这篇关于vue使用echarts图表自适应的几种解决方案的文章就介绍到这了,更多相关vue使用echarts图表自适应内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue单元格多列合并的实现
Nov 26 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
基于vuex实现购物车功能
Jan 10 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 #Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 #Vue.js
vue表单验证之禁止input输入框输入空格
Dec 03 #Vue.js
对vue生命周期的深入理解
Dec 03 #Vue.js
用vue设计一个日历表
Dec 03 #Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 #Vue.js
如何实现vue的tree组件
Dec 03 #Vue.js
You might like
配置PHP使之能同时支持GIF和JPEG
2006/10/09 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
php通过各种函数判断0和空
2020/07/04 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
vue下跨域设置的相关介绍
2017/08/26 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
Python3基于sax解析xml操作示例
2018/05/22 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
python多线程下信号处理程序示例
2019/05/31 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
Python tkinter三种布局实例详解
2020/01/06 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
幼师专业求职推荐信
2013/11/08 职场文书
大学生村官典型材料
2014/01/12 职场文书
小学生表扬稿范文
2015/05/05 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
总结高并发下Nginx性能如何优化
2021/11/01 Servers
Python制作表白爱心合集
2022/01/22 Python