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中音频wavesurfer.js的使用方法
Feb 20 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
vue实现登陆页面开发实践
May 30 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中SQL注入攻击与XSS攻击
2012/06/10 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
javascript call和apply方法
2008/11/24 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
使用cx_freeze把python打包exe示例
2014/01/24 Python
python进阶教程之异常处理
2014/08/30 Python
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
Python实现PS滤镜功能之波浪特效示例
2018/01/26 Python
Selenium的使用详解
2018/10/19 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
python函数不定长参数使用方法解析
2019/12/14 Python
python实现批量命名照片
2020/06/18 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
2014学雷锋活动心得体会
2014/03/10 职场文书
品质主管岗位职责
2014/03/16 职场文书
四群教育工作实施方案
2014/03/26 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
财务经理岗位职责
2015/01/31 职场文书
董事长岗位职责
2015/02/13 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers