vue使用echarts图表自适应的几种解决方案
(编辑:jimmy 日期: 2024/11/25 浏览:3 次 )
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 )
优点:
- 可以根据窗口大小实现自适应;
- 将图表方法封装以后,只需要执行一遍就可以实现多个图表的自适应;
- 不会被覆盖
缺点:
- 当vue页面路由跳转到下一个页面时,上一个页面的onresize方法会继续执行
【造成这个问题的原因是因为vue是单页面应用,echarts中的操作都是基于window,当然也可以使用window.removeEventListener在下一个页面删除绑定的方法】
点击查看window.removeEventListener使用注意点
3.实现在div使用onresize方法
github项目地址,喜欢的小伙伴给个star,谢谢
实现原理:在div上实现类似window的onresize 监听,这样既能实现图表的自适应,也不会因为页面跳转之后继续执行三个页面的onresize 方法
实现方法:
引入esresize.js(文末贴上代码)
在div上绑定对应onresize 方法
优点:
- 可以根据窗口大小实现自适应
- 页面跳转不会执行上次操作
- 多个方法不会覆盖
缺点:暂无发现(如有问题,欢迎各位补充)
文章参考: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}
下一篇:原生JS实现拖拽效果