Echats圖表大屏自適應的實現方法
描述
使用圖表結合數據可以很直觀的視覺效應,大屏展示已經成為企業數據展示的常見場景,如何做到大屏自適應是我們需要解決的一個問題,下面是其中一種解決方案,利用css的transform屬性以及設計百分比,如有不足,請批評
實現
1.準備一個容器組件,width = 100vw,height = 100%,作為大屏展示的背景:
<div class="screen-adapter"> </div> .screen-adapter { width: 100vw; min-height: 100%; max-height: 100vh; overflow: hidden; background: #0c1a3c; }
2.根據設計同學提供的設計圖可以計算出每部分區域的百分比,例如總尺寸是w*h,其中一個圖標寬高是w1 * h1,實現常規切圖,此時由1–>2可得:
<div class="screen-adapter"> <div class="content-wrap" :style="style"> <slot></slot> </div> </div> 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%)' // 默認不縮放,垂直水平居中 } } } .content-wrap { transform-origin: 0 0; position: absolute; top: 50%; left: 50%; }
3.基於第二步,需要根據大屏具體尺寸計算縮放比例,以及設置縮放比例,需要註意的是,綁定resize事件一定別忘瞭防抖,頁面銷毀別忘瞭移除監聽事件:
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%)` } }
4.至此,大概結構已經得到,隻需要將各部分圖標組件還原的設計圖放入之前的 插槽即可,各部分圖標組件的尺寸按照設計提供的百分比即可,所有代碼大致如下:
// 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>
項目目錄結構如下
效果圖如下
可以看出,字體圖表都是等比例縮放的
總結
到此這篇關於Echats圖表大屏自適應實現的文章就介紹到這瞭,更多相關Echats圖表大屏自適應內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue實現防抖的實例代碼
- 解決頁面整體使用transform scale後高德地圖點位點擊偏移錯位問題
- JavaScript 防抖debounce與節流thorttle
- JavaScript防抖動與節流處理
- 學習JavaScript中的閉包closure應該註意什麼