以前寫過壹些大屏可視化的實現方式，發現有點落後了，更新下。
能學到的知識1、PC數據可視化項目，實現響應式壹篇搞定
2、配合藍湖使用，主要是取元素的樣式、色值，完美還原
3、基於vue2、vuecli4、ECharts5
效果圖瀏覽器默認狀態1920x10801440x9001366x7681024x768實現主要思路就是，根據設計圖的尺寸，用css的transform:scale縮放頁面。
實現縮放主要代碼changeScale(){constbody=document.documentElementconstscale1=body.clientWidth/this.widthconstscale2=body.clientHeight/this.heightconstscale=scale1<scale2?scale1:scale2this.styleObj.transform=`scale(${scale})translate(-50%,-50%)`}translate，是為了讓頁面的縮放保持寬高比，要配合對應容器的css實現，例如本項目的：
.bigscreen{width:1920px;height:1080px;overflow:hidden;position:fixed;top:50%;left:50%;transform-origin:lefttop;}上面的實現，其實不用translate也行的，但是頁面的高度在某些屏幕下會被壓扁，因為屏幕尺寸和設計圖的寬高比不壹致，有興趣的自己嘗試了
關於綁定數據為了可讀性，壹般都把頁面按模塊分割成組件引入使用的。數據的綁定，壹般2種情況：
1、大屏的數據壹個接口全部返回這種情況，給每個需要數據的組件設置props屬性，然後在主頁面請求數據，傳參就行，具體看代碼了，不復雜。
2、每個圖表模塊都單獨壹個接口返回數據這種情況就在對應組件請求數據，綁定數據就行了
代碼總覽涉及的文件如下（具體參考代碼）：
|--src|--views|--bigscreen//實例所在|--index.vue|--index.scss|--index.js|--components|--header.vue|--leftView|--index.vue|--index.scss|--index.js|--rightView|--index.vue|--index.scss|--index.js|--centerView|--index.vue|--index.scss|--index.js|--bottomView|--index.vue|--index.scss|--index.js|--utils|---utils.js|--styles|--box.scss//大屏***用樣式代碼按代碼總覽的目錄去代碼裏找著看就行了。
總結大屏的布局，各種各樣，自己看情況修改了，這裏只是做個例子。這裏的方案，可以保證設定尺寸下的頁面，以設定尺寸為基礎縮放，達到響應式的效果。現在做的項目，大多數都是以1920x1080的設計圖來做，和藍湖配合，基本可以很簡單的就達到設計圖90%+的效果，剩下的10%，主要是因為地圖無法百分百的隨意還原，其它部分都是可以完美實現的。
拓展數據可視化，圖表的實現，用的是Echarts，至今做了不少大屏項目，總結的壹套用法，比較成熟和穩定了，Echarts的使用可參考以下
1、vue項目中封裝echarts的比較優雅的方式
2、vue2項目中封裝echarts地圖比較優雅的方式
3、vue2項目中給echarts地圖設置背景圖和打點
原文：/post/7099746692295032846