對于可視化大屏項目而言，我們主要需要考慮下面兩個問題：

? ? ? ? 首先是div元素的適配，需要保持每個div元素在不同分辨率的屏幕下依然會顯示正常的比例，不會因為不同分辨率的屏幕而變得拉伸變形；

? ? ? ? 第二個要考慮的因素是字體，通常情況下我們會吧字體設(shè)置為px，但在大屏項目中并不適用，會出現(xiàn)不協(xié)調(diào)的問題。

解決方案：

一、css3 transform:scale()方法

? ? ? ? 在項目中直接使用設(shè)計稿中px單位進行開發(fā)即可，會對body內(nèi)所有元素進行縮放，從而不會讓echarts圖表超出畫布；

? ? ? ??需要注意的是，綁定resize事件一定別忘了防抖，頁面銷毀別忘了移除監(jiān)聽事件

? ? ? ? 我們直接使用時如果顯示屏幕并不是16:9，那么我們的項目就可能會出現(xiàn)空白，解決方案如下：

function resize() {
          var ratioX = $(window).width() / 1920; //此處的寬高根據(jù)自己屏幕的比例修改即可
          var ratioY = $(window).height() / 1080;
          $("body").css({
              transform: "scale(" + ratioX + "," + ratioY + ")",
              transformOrigin: "left top",
              backgroundSize: "100% 100%"
          });
          $("html").css({'overflow':'hidden'})
}

? 參考推薦：

? ? ? ? ? ?大屏可視化屏幕適配的幾種方法 - 掘金

? ? ? ? ? ?前端可視化大屏適配方案_接著奏樂接著舞。的博客-CSDN博客_前端大屏適配

二、rem+grid（或百分比）

? ? ? ? 當頁面首次加載時，判斷視口的寬高，如果視口的寬/高 > 16/9 則說明視口寬度比較設(shè)計圖寬，實際的顯示寬度應(yīng)該等于視口的高度*16/9。

? ? ? ? 如果視口的寬/高 < 16/9 則說明視口高度比設(shè)計圖高，實際的顯示寬度應(yīng)該等于視口的寬度，顯示高度應(yīng)等于視口寬度 / (16/9)。

? ? ? ? 然后設(shè)置 font-size: pageWidth / 100 px，這樣就可以做到100rem等于100% width，之后所有大小的設(shè)置都通過rem來做，這樣就可以做到適配任意比例的大屏了。

<script>
  const clientWidth = document.documentElement.clientWidth
  const clientHeight = document.documentElement.clientHeight
  window.pageWidth = clientWidth / clientHeight > 16 / 9 ? clientHeight * (16 / 9) : clientWidth
  const pageHeight = pageWidth / (16 / 9)
  const string = `<style>html{
      font-size: ${pageWidth / 100}px
    }</style>`
  document.write(string)
 
  root.style.width = pageWidth + 'px'
  root.style.height = pageHeight + 'px'
  root.style.marginTop = (clientHeight - pageHeight) / 2 + 'px'
</script>

參考鏈接：大屏可視化之適配和布局_A-Tione的博客-CSDN博客_大屏布局

三、vw和vh適配方案

? ? ? ?屏幕視口寬度 = 100vw，屏幕視口高度 = 100vh

? ? ? ?vw和vh也是css中標準的單位，和px,rem, %一樣 vw和vh適配方案，按照設(shè)計稿的尺寸，將px按比例計算轉(zhuǎn)為vw和vh

? ? ? ?那么我們需要封裝一個處理函數(shù)，讓它幫我自動計算，這里我用到了scss

//使用scss的math函數(shù)，https://sass-lang.com/documentation/breaking-changes/slash-div
@use "sass:math"; 
 
 
//默認設(shè)計稿的寬度
$designWidth:1920;
//默認設(shè)計稿的高度
$designHeight:1080;
 
 
//px轉(zhuǎn)為vw的函數(shù)
@function vw($px) {
  @return math.div($px , $designWidth) * 100vw;
}
 
//px轉(zhuǎn)為vh的函數(shù)
@function vh($px) {  
  @return math.div($px , $designHeight) * 100vh;

參考鏈接：你要的大數(shù)據(jù)可視化屏幕適配都在這了_油炸皮卡丘的博客-CSDN博客_可視化大屏適配方案

四、其他資源網(wǎng)站

在這里給大家推薦一下一些大屏可視化可能用到的資源網(wǎng)站：

1、Vue 大屏數(shù)據(jù)展示組件庫：DataV

2、地圖工具：DataV.GeoAtlas地理小工具系列

3、花里胡哨的echarts進階圖:花里胡哨的echarts:PPChart - 讓圖表更簡單文章來源地址http://www.zghlxwxcb.cn/news/detail-404952.html

到了這里，關(guān)于可視化大屏的幾種適配方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！