怎么制作公司的數(shù)據(jù)大屏

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 20:10:53

怎么制作公司的數(shù)據(jù)大屏

怎么制作公司的數(shù)據(jù)大屏:說起數(shù)據(jù)大屏，大家可以想到天貓雙11數(shù)據(jù)大屏，酷炫！對的，數(shù)據(jù)大屏就是講究酷炫效果。之前我也做過一次，給大家總結(jié)一下我是如何操作的。一、屏幕自適應(yīng)我這邊只拿到設(shè)計師給到的1920*1080的設(shè)計圖，但是說不一定是這個尺寸，目前不知道展示這個數(shù)據(jù)大屏的

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀怎么制作公司的數(shù)據(jù)大屏:說起數(shù)據(jù)大屏，大家可以想到天貓雙11數(shù)據(jù)大屏，酷炫！對的，數(shù)據(jù)大屏就是講究酷炫效果。之前我也做過一次，給大家總結(jié)一下我是如何操作的。一、屏幕自適應(yīng)我這邊只拿到設(shè)計師給到的1920*1080的設(shè)計圖，但是說不一定是這個尺寸，目前不知道展示這個數(shù)據(jù)大屏的

說起數(shù)據(jù)大屏，大家可以想到天貓雙11數(shù)據(jù)大屏，酷炫！對的，數(shù)據(jù)大屏就是講究酷炫效果。之前我也做過一次，給大家總結(jié)一下我是如何操作的。

一、屏幕自適應(yīng)

我這邊只拿到設(shè)計師給到的1920*1080的設(shè)計圖，但是說不一定是這個尺寸，目前不知道展示這個數(shù)據(jù)大屏的屏幕尺寸是多少，因此，只能做出自適應(yīng)效果！如何做到自適應(yīng)效果呢。想了幾種方案，目前我用的方案是采用vh和vw單位來進行頁面布局。關(guān)于這兩個單位的一些介紹，我之前有篇文章寫過，http://www.haorooms.com/post/css_unit_calc 。這樣就可以實現(xiàn)自適應(yīng)布局了。

用vh和vw單位的好處

1、可以實現(xiàn)滾動軸出現(xiàn)，頁面不閃動效果，代碼如下：

@media screen and (min-width: 960px) { //之所以進行寬度判斷，是因為移動端滾動軸不占寬度
 html {
 margin-left: calc(100vw - 100%);
 margin-right: 0;
 }}

自此，我們就不用再苦逼的計算滾動軸的寬度了，關(guān)于計算滾動軸的寬度，請點擊

2、因為我是全屏的，不需要出現(xiàn)滾動軸，但是不同的縮放屏幕，有可能會出現(xiàn)滾動軸，可以用如下代碼，取消滾動軸顯示。

html {
 width:100vw;
 height:100vh;
 overflow:hidden;}

壞處

1、計算起來相對麻煩

2、在父級元素是定位的情況下，完全可以用百分比替代，百分比比VH和VW兼容性好。（我的數(shù)據(jù)大屏不需要很好的兼容性，因此選用了vh和vw）

二、數(shù)字和百分比滾動效果

關(guān)于數(shù)字滾動效果，我很久之前用過一個插件，但是這個使用圖片進行的滾動，因為我很麻煩，我們目前完全可以用css3來進行數(shù)字滾動！

三、setTimeout每執(zhí)行一次，時間增加一秒

這個應(yīng)用比較多的是每隔一個隨機數(shù)字，執(zhí)行一段代碼，相隔時間是不一樣的！

我一開始用setInterval，但是發(fā)現(xiàn)每次執(zhí)行的時間都是第一次執(zhí)行的時間，那是因為setInterval被調(diào)用后，就會被加入到定時器執(zhí)行隊列中，等待綁定的函數(shù)被執(zhí)行，也就是說設(shè)置的interval時間只會有效一次。那就改用了setTimeout，關(guān)于setTimeout，我之前文章也提及過！

執(zhí)行一個隨機數(shù)代碼如下：

function runRandom(obj){
 var timeout=Math.round(Math.random()*1000+1000);
 clearTimeout(obj.randomTime);
 obj.randomTime=setTimeout(function timeoutFun(){
 //執(zhí)行你的邏輯
 timeout=Math.round(Math.random()*1000+1000);
 obj.randomTime=setTimeout(timeoutFun,timeout);
 },timeout);}

我的部分代碼如下：

flip:function(obj){
 var _this =this;
 clearTimeout(obj.flip);
 obj.flip=setTimeout(function timeoutFun(){
  if(_this.SwithIndex<5){
  $("#dataUpadteSwitch").find("li").eq(_this.SwithIndex).addClass("current").siblings().removeClass("current");
  _this.SwithIndex++;
  _this.initTime+=1000;//每執(zhí)行一次增加1000毫秒
  // console.log(_this.initTime)
  //右上角百分比,速度快慢可以調(diào)整
  _this.baifenbiAnimate("loadingDatabfb",0,1,100,10+_this.SwithIndex*10);
  //右上角旋轉(zhuǎn)動畫，快慢可以調(diào)整-調(diào)整旋轉(zhuǎn)速度變慢-推遲0.5s
  _this.routedSpeed((1+_this.SwithIndex/2)+"s");
  }else{
  _this.SwithIndex=0;//循環(huán)執(zhí)行，執(zhí)行5次之后從頭開始執(zhí)行
  _this.initTime=3000;//一開始是3000毫秒
  }
  obj.flip=setTimeout(timeoutFun,_this.initTime);
 },_this.initTime);}

四、echart 自動觸發(fā)tooltip

數(shù)據(jù)大屏中很多都是自動觸發(fā)的，沒有鼠標(biāo)交互，每隔幾秒執(zhí)行一次，我們用到了一個類似中國地圖的表格，但是tooltip是自動觸發(fā)的，每隔幾秒更新一下數(shù)據(jù)，觸發(fā)一次！

首先把tooltip下面的triggerOn設(shè)置為none,然后通過dispatchAction來觸發(fā)，官方API解釋比較模糊，其實很簡單，代碼如下：

myChart.dispatchAction({
 type: 'showTip',
 // 系列的 index，在 tooltip 的 trigger 為 axis 的時候可選。
 name: (convertData(obj.mapData.sort(function(a, b) {
  return b.value - a.value;
 }).slice(0, 1)))[0].name //獲取最多數(shù)據(jù)的名字});

這樣就可以自動觸發(fā)了

五、用svg制作動態(tài)時鐘

數(shù)據(jù)大屏上面需要有一個動態(tài)的時間，時間是跳動的，還需要一個時鐘。我在這里共享一下我的代碼：

html代碼如下：

 <div id="nowtimes">
  <div class="parent">
   <svg height="200" width="200" viewBox="0 0 1000 1000">
   <path d="M978,500c0,263.99-214.01,478-478,478s-478-214.01-478-478,214.01-478,478-478,478,214.01,478,478zm-888.93,237.25,20.179-11.65m779.16-449.85l22.517-13m-648.18,648.18,11.65-20.18m449.85-779.16l13-22.517m-711.75,410.93h23.305m899.7,0h26m-885.43-237.25,20.179,11.65m779.16,449.85,22.517,13m-648.18-648.18l11.652,20.183m449.85,779.16,13,22.517m-237.25-885.43v23.305m0,899.7,0,26"/>
   <path d="M500,500,500,236" id="hour"/>
   <path d="M500,500,500,120" id="min" />
   <path d="M500,500,500,90" id="sec" />
   </svg>
  </div>
  <div class="tdtimes" id="tdtimes"></div>
  </div>

css代碼如下：

/* 鐘表樣式*/svg {position: absolute;top: 10%; width: 100%; height: 80%;}path { stroke: #fff;stroke-linecap:round; stroke-width: 35;fill:none;}#sec { stroke: #fff; stroke-width: 20;}#min {stroke: #fff;stroke-width: 30;}#hour { stroke: #fff;stroke-width: 30;}#nowtimes{margin-top:7px;}#nowtimes .parent{width:30px;position:relative;height:30px;display: inline-block;vertical-align: middle;}.tdtimes{display: inline-block;font-size:.7vw;color:#979798;vertical-align: middle;}

js代碼如下：

 setInterval(function() {
 function r(el, deg) {
 el.setAttribute('transform', 'rotate('+ deg +' 500 500)')
 }
 var d = new Date();
 r(sec, 6*d.getSeconds());
 r(min, 6*d.getMinutes());
 r(hour, 30*(d.getHours()%12) + d.getMinutes()/2);
 $("#tdtimes").html(d.getHours() +":" +d.getMinutes() +":" +d.getSeconds());
 }, 1000)

這樣就完成了小時鐘及右側(cè)跳動時間的效果！

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

怎樣用css3做出圖標(biāo)效果

怎么用CSS3做出燈光照射顯示文字動畫

css3點擊顯示漣漪特效

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:0731-84117792 E-MAIL:11247931@qq.com