您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“如何實(shí)現(xiàn)Echats圖表大屏自適應(yīng)”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
1.準(zhǔn)備一個(gè)容器組件,width = 100vw,height = 100%,作為大屏展示的背景:
<div class="screen-adapter"> </div> .screen-adapter { width: 100vw; min-height: 100%; max-height: 100vh; overflow: hidden; background: #0c1a3c; }
2.根據(jù)設(shè)計(jì)同學(xué)提供的設(shè)計(jì)圖可以計(jì)算出每部分區(qū)域的百分比,例如總尺寸是w*h,其中一個(gè)圖標(biāo)寬高是w1 * h2,實(shí)現(xiàn)常規(guī)切圖,此時(shí)由1-->2可得:
<div class="screen-adapter"> <div class="content-wrap" :> <slot></slot> </div> </div> props: { w: { // 設(shè)計(jì)圖尺寸寬 type: Number, default: 1600 }, h: { // 設(shè)計(jì)圖尺寸高 type: Number, default: 900 } }, data () { return { style: { width: this.w + 'px', height: this.h + 'px', transform: 'scale(1) translate(-50%, -50%)' // 默認(rèn)不縮放,垂直水平居中 } } } .content-wrap { transform-origin: 0 0; position: absolute; top: 50%; left: 50%; }
3.基于第二步,需要根據(jù)大屏具體尺寸計(jì)算縮放比例,以及設(shè)置縮放比例,需要注意的是,綁定resize事件一定別忘了防抖,頁面銷毀別忘了移除監(jiān)聽事件:
mounted () { this.setScale() this.onresize = this.debounce(() => this.setScale(), 100) window.addEventListener('resize', this.onresize) }, beforeDestroy () { window.removeEventListener('resize', this.onresize) }, methods: { // 防抖 debounce (fn, t) { const delay = t || 500 let timer return function () { const args = arguments if (timer) { clearTimeout(timer) } const context = this timer = setTimeout(() => { timer = null fn.apply(context, args) }, delay) } }, // 獲取縮放比例 getScale () { const w = window.innerWidth / this.w const h = window.innerHeight / this.h return w < h ? w : h }, // 設(shè)置縮放比例 setScale () { this.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)` } }
4.至此,大概結(jié)構(gòu)已經(jīng)得到,只需要將各部分圖標(biāo)組件還原的設(shè)計(jì)圖放入之前的 插槽即可,各部分圖標(biāo)組件的尺寸按照設(shè)計(jì)提供的百分比即可,所有代碼大致如下:
// ScreenAdapter.vue <template> <div class="screen-adapter"> <div class="content-wrap" :> <slot></slot> </div> </div> </template> <script> export default { props: { w: { type: Number, default: 1600 }, h: { type: Number, default: 900 } }, data () { return { style: { width: this.w + 'px', height: this.h + 'px', transform: 'scale(1) translate(-50%, -50%)' } } }, mounted () { this.setScale() this.onresize = this.Debounce(() => this.setScale(), 100) window.addEventListener('resize', this.onresize) }, beforeDestroy () { window.removeEventListener('resize', this.onresize) }, methods: { Debounce (fn, t) { const delay = t || 500 let timer return function () { const args = arguments if (timer) { clearTimeout(timer) } const context = this timer = setTimeout(() => { timer = null fn.apply(context, args) }, delay) } }, getScale () { const w = window.innerWidth / this.w const h = window.innerHeight / this.h return w < h ? w : h }, setScale () { this.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)` } } } </script> <style> .screen-adapter { width: 100%; min-height: 100vh; max-height: 100vh; overflow: hidden; background: #0c1a3c; } .content-wrap { transform-origin: 0 0; position: absolute; top: 50%; left: 50%; } </style>
可以看出,字體圖表都是等比例縮放的
“如何實(shí)現(xiàn)Echats圖表大屏自適應(yīng)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。