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 element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
vue实现简易音乐播放器
Aug 14 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中使用与Perl兼容的正则表达式
2006/11/26 PHP
分享PHP入门的学习方法
2007/01/02 PHP
php字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
php批量修改表结构实例
2017/05/24 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
微信小程序实现人脸检测功能
2018/05/25 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
numpy中矩阵合并的实例
2018/06/15 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
小学校长先进事迹材料
2014/05/13 职场文书
出国留学担保书
2014/05/20 职场文书
离职保密承诺书
2014/05/28 职场文书
教师师德工作总结2015
2015/07/22 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL