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+vant实现购物车全选和反选功能
Nov 17 Vue.js
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
详解Vue的options
May 15 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
el-table-column 内容不自动换行的解决方法
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面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
Python中删除文件的程序代码
2011/03/13 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
简单了解Django ContentType内置组件
2019/07/23 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
神路信息Java面试题目
2013/03/31 面试题
卖房协议书
2014/04/11 职场文书
教师求职自荐书
2014/06/14 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
2014年测量员工作总结
2014/12/12 职场文书
担保贷款承诺书
2015/04/30 职场文书
推销搭讪开场白
2015/05/28 职场文书
入党介绍人考察意见
2015/06/01 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server