欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Echats圖表大屏自適應(yīng)的實(shí)現(xiàn)方法

 更新時(shí)間:2021年10月24日 14:15:23   作者:弢弢  
很多時(shí)候我們需要用圖表來制作我們統(tǒng)計(jì)的數(shù)據(jù)直觀的分析,所以我們可以用Echarts來制作圖表,這篇文章主要給大家介紹了關(guān)于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)文章

最新評(píng)論