快捷導(dǎo)航

vue使用echarts圖表自適應(yīng)的幾種解決方案

更新時間：2020年12月04日 09:37:42 作者：LLDD。

這篇文章主要給大家介紹了關(guān)于vue使用echarts圖表自適應(yīng)的幾種解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.使用window.onresize

let myChart = echarts.init(document.getElementById(dom))
window.onresize = function () {
 	myChat.resize()
}

優(yōu)點：可以根據(jù)窗口大小實現(xiàn)自適應(yīng)

缺點：

多個圖表自適應(yīng)寫法比較麻煩（當(dāng)一個頁面的圖表太多時，這樣寫法不是很靈活）；

let myChart1 = echarts.init(document.getElementById(dom1))
let myChart2 = echarts.init(document.getElementById(dom2))
window.onresize = function () {
 	myChat1.resize()
 	myChat2.resize()
}

多個vue頁面有onresize方法時，會被覆蓋；

當(dāng)vue頁面路由跳轉(zhuǎn)到下一個頁面時，上一個頁面的onresize方法會繼續(xù)執(zhí)行，（這個時候下一個頁面已經(jīng)不需要onresize方法執(zhí)行了，當(dāng)圖表過多時會造成頁面卡頓）

2.使用window.addEventListener添加resize方法

let myChart = echarts.init(document.getElementById(dom))
let sizeFun = function () {
 	myChat.resize()
}
window.addEventListener('resize', sizeFun )

優(yōu)點：

可以根據(jù)窗口大小實現(xiàn)自適應(yīng)；
將圖表方法封裝以后，只需要執(zhí)行一遍就可以實現(xiàn)多個圖表的自適應(yīng)；
不會被覆蓋

缺點：

當(dāng)vue頁面路由跳轉(zhuǎn)到下一個頁面時，上一個頁面的onresize方法會繼續(xù)執(zhí)行

【造成這個問題的原因是因為vue是單頁面應(yīng)用，echarts中的操作都是基于window，當(dāng)然也可以使用window.removeEventListener在下一個頁面刪除綁定的方法】

點擊查看window.removeEventListener使用注意點

3.實現(xiàn)在div使用onresize方法

github項目地址，喜歡的小伙伴給個star,謝謝

實現(xiàn)原理：在div上實現(xiàn)類似window的onresize 監(jiān)聽，這樣既能實現(xiàn)圖表的自適應(yīng)，也不會因為頁面跳轉(zhuǎn)之后繼續(xù)執(zhí)行三個頁面的onresize 方法

實現(xiàn)方法：

引入esresize.js（文末貼上代碼）

在div上綁定對應(yīng)onresize 方法

優(yōu)點：

可以根據(jù)窗口大小實現(xiàn)自適應(yīng)
頁面跳轉(zhuǎn)不會執(zhí)行上次操作
多個方法不會覆蓋

缺點：暫無發(fā)現(xiàn)（如有問題，歡迎各位補充）

文章參考：JS監(jiān)聽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}

到此這篇關(guān)于vue使用echarts圖表自適應(yīng)的幾種解決方案的文章就介紹到這了,更多相關(guān)vue使用echarts圖表自適應(yīng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: