資料大屏開發基礎（echarts+rem.js）
技術標籤：JavaScriptjavascriptcsshtml
目前資料大屏開發專案比較多，但很多新手不清楚從何下手，其實上手很容易；另外 ，當前流行前端框也有很多，比如angularJs, vueJs,reactJs等；不過不必使用這些框架增加額外的學習成本，也可以快速開發資料大屏。這裡直接使用html+css+js+echarts進行講解。
1.大屏尺寸
這裡使用1920*1080為例。
2.建立rem.js檔案
程式碼如下：
!function(n){ var e=n.document, t=e.documentElement, i=1920, d=i/100, o="orientationchange"in n?"orientationchange":"resize", a=function(){ var n=t.clientWidth||320;n>i&&(n=i); t.style.fontSize=n/d+"px" }; e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1)) }(window);
當前大屏寬度為1920，故i=1920；如果設計稿為其他尺寸，修改為對應寬度即可。
設定好後，將該檔案引入到html頁面中即可。
3.樣式書寫
div.screen-box{ width: 19.2rem; height: 10.8rem; margin: 0 auto; }由於rem.js引入並設定為1920，故直接書寫量出的實際尺寸即可。由2中程式碼可知"d"的值為"i/100"，故樣式中rem值為實際尺寸/100，所以1920px=19.2rem。
使用rem使用單位後，可以不同螢幕上正常預覽大屏了。
這是由於rem.js執行後，會獲取當前螢幕的寬度，重新計算得出新值賦於html節點上；而rem單位是根據根元素html上的font-size大小來變化的，正是基於這個出發，我們可以在每個裝置下根據裝置穩定度設定對應的html字號，從而實現自適應佈局。如螢幕為1920px時，html上font-size值應為100px；如果小於1920px則如下圖，rem.js會重新賦值。
如此一來，大家就不必再使用百分比去書寫樣式了，使用rem作為單位就可以1:1完整書寫出頁面佈局了。
4.echarts使用
引入地址：https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js
html書寫：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標題</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="js/rem.js"></script> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js"></script> </head> <body> <div class="screen-box"> <div class="echart-box" id="map"></div> </div> </body> </html>
樣式書寫：
/*如圖表尺寸為500px*350px，樣式應為*/
div.echart-box{ width: 5rem; height: 3.5rem; }js書寫：
function create(){
var chart = echarts.init(document.getElementById('map'));
chart.setOption({
//書寫圖表引數...
});
}
//執行建立圖表函式
create();由於使用的單位是rem，rem又是根據html上的font-size的大小來變化的；所以頁面剛載入時，rem.js剛剛執行，可能建立圖表時，出現獲取不到實際的寬和高。故解決方案如下：
window.onload = function(){
setTimeout(function(){
create();
}, 50);
}如上程式碼所示，延遲建立圖表即可。