1.使用window.onresize
|
1
2
3
4
|
let myChart = echarts.init(document.getElementById(dom))window.onresize = function () { myChat.resize()} |
優(yōu)點：可以根據(jù)窗口大小實現(xiàn)自適應
缺點：
多個圖表自適應寫法比較麻煩（當一個頁面的圖表太多時，這樣寫法不是很靈活）；
|
1
2
3
4
5
6
|
let myChart1 = echarts.init(document.getElementById(dom1))let myChart2 = echarts.init(document.getElementById(dom2))window.onresize = function () { myChat1.resize() myChat2.resize()} |
多個vue頁面有onresize方法時，會被覆蓋；
當vue頁面路由跳轉(zhuǎn)到下一個頁面時，上一個頁面的onresize方法會繼續(xù)執(zhí)行，（這個時候下一個頁面已經(jīng)不需要onresize方法執(zhí)行了，當圖表過多時會造成頁面卡頓）
2.使用window.addEventListener添加resize方法
|
1
2
3
4
5
|
let myChart = echarts.init(document.getElementById(dom))let sizeFun = function () { myChat.resize()}window.addEventListener('resize', sizeFun ) |
優(yōu)點：
- 可以根據(jù)窗口大小實現(xiàn)自適應；
- 將圖表方法封裝以后，只需要執(zhí)行一遍就可以實現(xiàn)多個圖表的自適應；
- 不會被覆蓋
缺點：
- 當vue頁面路由跳轉(zhuǎn)到下一個頁面時，上一個頁面的onresize方法會繼續(xù)執(zhí)行
【造成這個問題的原因是因為vue是單頁面應用，echarts中的操作都是基于window，當然也可以使用window.removeEventListener在下一個頁面刪除綁定的方法】
點擊查看window.removeEventListener使用注意點
3.實現(xiàn)在div使用onresize方法
實現(xiàn)原理：在div上實現(xiàn)類似window的onresize 監(jiān)聽，這樣既能實現(xiàn)圖表的自適應，也不會因為頁面跳轉(zhuǎn)之后繼續(xù)執(zhí)行三個頁面的onresize 方法
實現(xiàn)方法：
引入esresize.js（文末貼上代碼）
在div上綁定對應onresize 方法
優(yōu)點：
- 可以根據(jù)窗口大小實現(xiàn)自適應
- 頁面跳轉(zhuǎn)不會執(zhí)行上次操作
- 多個方法不會覆蓋
缺點：暫無發(fā)現(xiàn)（如有問題，歡迎各位補充）
esresize.js代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
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圖表自適應內(nèi)容請搜索服務器之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/lldd2014425/article/details/86231174
