快捷導(dǎo)航

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

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

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

1.使用window.onresize

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

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

缺點(diǎn)：

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

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

多個(gè)vue頁(yè)面有onresize方法時(shí)，會(huì)被覆蓋；

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

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

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

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

點(diǎn)擊查看window.removeEventListener使用注意點(diǎn)

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

github項(xiàng)目地址，喜歡的小伙伴給個(gè)star,謝謝

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

實(shí)現(xiàn)方法：

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

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：暫無(wú)發(fā)現(xiàn)（如有問(wèn)題，歡迎各位補(bǔ)充）

文章參考：JS監(jiān)聽(tīng)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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: