企業のビッグデータ画面の作り方

ビッグデータ画面といえば、誰もがTmall Double 11のビッグデータ画面を思い浮かべるでしょう、クールです！はい、大きなデータ画面にはクールなエフェクトが必要です。以前一度やったことがあるので、やり方をまとめておきます。

1. 画面適応

デザイナーから与えられた1920*1080の設計図のみを入手しましたが、このデータを表示する大きな画面の画面サイズがどのくらいであるかはわかりません。 . したがって、作成できるのは適応効果のみです。適応効果を達成する方法。いくつかの解決策を考えましたが、私が現在使用している解決策は、ページレイアウトにvhユニットとvwユニットを使用することです。これら 2 つのユニットの概要については、以前 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 を選択しました)

2. 数値とパーセントのスクロール効果

数値のスクロール効果については、昔プラグインを使用しましたが、これは画像を使用しています。スクロール、せっかくなのでデジタルスクロールは現在css3で可能です！

3. setTimeout が実行されるたびに、時間が 1 秒ずつ増加します。

このアプリケーションは、コードの実行にすべての乱数が使用され、時間間隔が異なるという点でより一般的です。

最初はsetIntervalを使用しましたが、各実行の時刻は最初の実行の時刻であることがわかりました。これは、setIntervalが呼び出された後、タイマー実行キューに追加され、バインドされた関数が実行されるのを待つためです。 . これは、設定された間隔時間が 1 回だけ有効であることを意味します。 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);}

4. Echart はツールチップを自動的にトリガーします

大きなデータ画面の多くは、マウス操作なしで自動的にトリガーされます。数秒ごとに実行され、中国の地図に似たテーブルを使用しましたが、ツールチップは自動的にトリガーされ、データは数秒ごとに更新され、トリガーは 1 回です。

まずツールチップの下のtriggerOnをnoneに設定し、次にdispatchActionを通してトリガーします。公式の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 //获取最多数据的名字});

この方法で自動的にトリガーできます

。 5. 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('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)

これで、小さな時計とジャンプ時間の効果が完成しました。右側！

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

CSS3を使用してアイコン効果を作成する方法

CSS3を使用してライトイルミネーション表示テキストアニメーションを作成する方法

css3クリックで波紋効果を表示

以上が企業のビッグデータ画面の作り方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。