首頁 >web前端 >js教程 >怎麼製作公司的數據大螢幕

怎麼製作公司的數據大螢幕

php中世界最好的语言
php中世界最好的语言原創
2017-11-27 14:25:565276瀏覽

說起數據大屏,大家可以想到天貓雙11數據大屏,酷炫!對的,數據大螢幕就是講究酷炫效果。之前我也做過一次,跟大家總結一下我是如何操作的。

一、螢幕自適應

我這邊只拿到設計師給到的1920*1080的設計圖,但是說不一定是這個尺寸,目前不知道展示這個數據大螢幕的螢幕尺寸是多少,因此,只能做出自適應效果!如何做到自適應效果。想了幾個方案,目前我用的方案是採用vh和vw單位來進行頁面佈局。關於這兩個單位的一些介紹,我之前有一篇文章寫過,http://www.haorooms.com/post/css_unit_calc 。 這樣就可以實現自適應佈局了。

用vh和vw單位的好處

1、可以實現滾動軸出現,頁面不閃動效果,代碼如下:

@media screen and (min-width: 960px) { //之所以进行宽度判断,是因为移动端滚动轴不占宽度
    html {
        margin-left: calc(100vw - 100%);
        margin-right: 0;
    }}

自此,我們就不用再苦逼的計算滾動軸的寬度了,關於計算滾動軸的寬度,請點擊

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

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

壞處

1、計算起來相對麻煩

2、在父級元素是定位的情況下,完全可以用百分比替代,百分比比VH和VW相容性好。 (我的資料大螢幕不需要很好的兼容性,因此選用了vh和vw)

二、數字和百分比滾動效果

#關於數字滾動效果,我很久之前用過一個插件,但是這個使用圖片進行的滾動,因為我很麻煩,我們目前完全可以用css3來進行數字滾動!

三、setTimeout每執行一次,時間增加一秒

這個應用程式比較多的是每隔一個隨機數字,執行一段程式碼,相隔時間是不一樣的!

我一開始用setInterval,但發現每次執行的時間都是第一次執行的時間,那是因為setInterval被呼叫後,就會加入到計時器執行佇列中,等待綁定的函數被執行,也就是說設定的interval時間只會有效一次。那就改用了setTimeout,關於setTimeout,我之前文章也提過!

執行一個隨機數字碼如下:

function runRandom(obj){
    var timeout=Math.round(Math.random()*1000+1000);
    clearTimeout(obj.randomTime);
    obj.randomTime=setTimeout(function timeoutFun(){
        //执行你的逻辑
        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;//每执行一次增加1000毫秒
               // console.log(_this.initTime)
            //右上角百分比,速度快慢可以调整
            _this.baifenbiAnimate("loadingDatabfb",0,1,100,10+_this.SwithIndex*10);
            //右上角旋转动画,快慢可以调整-调整旋转速度变慢-推迟0.5s
            _this.routedSpeed((1+_this.SwithIndex/2)+"s");
          }else{
              _this.SwithIndex=0;//循环执行,执行5次之后从头开始执行
              _this.initTime=3000;//一开始是3000毫秒
          }
          obj.flip=setTimeout(timeoutFun,_this.initTime);
        },_this.initTime);}

四、echart 自動觸發tooltip

資料大螢幕中很多都是自動觸發的,沒有滑鼠交互,每隔幾秒鐘執行一次,我們用到了一個類似中國地圖的表格,但是tooltip是自動觸發的,每隔幾秒更新一下數據,觸發一次!

先把tooltip下面的triggerOn設定為none,然後透過dispatchAction來觸發,官方API解釋比較模糊,其實很簡單,程式碼如下:

myChart.dispatchAction({
    type: &#39;showTip&#39;,
    // 系列的 index,在 tooltip 的 trigger 为 axis 的时候可选。
    name: (convertData(obj.mapData.sort(function(a, b) {
            return b.value - a.value;
        }).slice(0, 1)))[0].name //获取最多数据的名字});

這樣就可以自動觸發了

五、用svg製作動態時鐘

資料大螢幕上面需要有一個動態的時間,時間是跳動的,還需要一個時鐘。我在這裡共享一下我的程式碼:

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(&#39;transform&#39;, &#39;rotate(&#39;+ deg +&#39; 500 500)&#39;)
      }
      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)

這樣就完成了小時鐘及右側跳動時間的效果!

相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!


相關閱讀:

怎麼用css3做出圖示效果

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

css3點選顯示漣漪特效

以上是怎麼製作公司的數據大螢幕的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn