Echats圖表大屏自適應(yīng)的實(shí)現(xiàn)方法
描述
使用圖表結(jié)合數(shù)據(jù)可以很直觀的視覺效應(yīng),大屏展示已經(jīng)成為企業(yè)數(shù)據(jù)展示的常見場(chǎng)景,如何做到大屏自適應(yīng)是我們需要解決的一個(gè)問題,下面是其中一種解決方案,利用css的transform屬性以及設(shè)計(jì)百分比,如有不足,請(qǐng)批評(píng)
實(shí)現(xiàn)
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 * h1,實(shí)現(xiàn)常規(guī)切圖,此時(shí)由1-->2可得:
<div class="screen-adapter"> <div class="content-wrap" :style="style"> <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" :style="style"> <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>
項(xiàng)目目錄結(jié)構(gòu)如下
效果圖如下
可以看出,字體圖表都是等比例縮放的
總結(jié)
到此這篇關(guān)于Echats圖表大屏自適應(yīng)實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Echats圖表大屏自適應(yīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序使用request網(wǎng)絡(luò)請(qǐng)求操作實(shí)例
這篇文章主要介紹了微信小程序使用request網(wǎng)絡(luò)請(qǐng)求操作,結(jié)合實(shí)例形式分析了wx.request(object)網(wǎng)絡(luò)請(qǐng)求操作的具體使用技巧,需要的朋友可以參考下2017-12-12JavaScript canvas實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)小球
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)小球,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-02-02IE下通過a實(shí)現(xiàn)location.href 獲取referer的值
IE下采用window.location.href方式跳轉(zhuǎn)的話,referer值為空在標(biāo)簽a里面的跳轉(zhuǎn)的話referer就不會(huì)空,下面是具體的實(shí)現(xiàn)代碼2014-09-09一個(gè)獲取第n個(gè)元素節(jié)點(diǎn)的js函數(shù)
這篇文章主要介紹了一個(gè)獲取第n個(gè)元素節(jié)點(diǎn)的js函數(shù),功能還不完善 ,需要的朋友可以參考下2014-09-09JavaScript實(shí)現(xiàn)多個(gè)重疊層點(diǎn)擊切換效果的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)多個(gè)重疊層點(diǎn)擊切換效果的方法,實(shí)例分析了javascript實(shí)現(xiàn)點(diǎn)擊切換效果的相關(guān)技巧,需要的朋友可以參考下2015-04-04js學(xué)習(xí)心得_一個(gè)簡(jiǎn)單的動(dòng)畫庫封裝tween.js
下面小編就為大家?guī)硪黄猨s學(xué)習(xí)心得_一個(gè)簡(jiǎn)單的動(dòng)畫庫封裝tween.js。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07Bootstrap組合上、下拉框簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要介紹了Bootstrap組合上、下拉框的簡(jiǎn)單實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03原生JS與CSS實(shí)現(xiàn)軟件卸載對(duì)話框功能
今天給大家分享一個(gè)特別有意思的軟件卸載對(duì)話框功能,本段代碼是基于js 與css實(shí)現(xiàn)的,感興趣的朋友跟隨小編一起看看吧2019-12-12