DDR爱好者之家 Design By 杰米

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在下一个页面删除绑定的方法】

点击查看window.removeEventListener使用注意点

3.实现在div使用onresize方法

github项目地址,喜欢的小伙伴给个star,谢谢

实现原理:在div上实现类似window的onresize 监听,这样既能实现图表的自适应,也不会因为页面跳转之后继续执行三个页面的onresize 方法

实现方法:

引入esresize.js(文末贴上代码)

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

在div上绑定对应onresize 方法

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

优点:

  1. 可以根据窗口大小实现自适应
  2. 页面跳转不会执行上次操作
  3. 多个方法不会覆盖

缺点:暂无发现(如有问题,欢迎各位补充)

文章参考:JS监听div的resize事件

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}

DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?