So erstellen Sie den Big-Data-Bildschirm eines Unternehmens

Apropos Big-Data-Bildschirme: Jeder kann an Tmall Double 11-Daten-Großbildschirme denken, cool! Ja, bei großen Datenbildschirmen dreht sich alles um coole Effekte. Ich habe es schon einmal gemacht, also fasse ich zusammen, wie ich es gemacht habe.

1. Bildschirmadaptiv

Ich habe nur die vom Designer bereitgestellte 1920*1080-Designzeichnung erhalten, aber diese Größe ist derzeit nicht unbedingt vorhanden Ich weiß, wie groß der Bildschirm für die Anzeige dieser Daten ist, daher kann ich nur einen adaptiven Effekt erzielen! So erzielen Sie einen adaptiven Effekt. Ich habe mir mehrere Lösungen überlegt. Die aktuelle Lösung, die ich verwende, besteht darin, vh- und vw-Einheiten für das Seitenlayout zu verwenden. Für eine Einführung in diese beiden Einheiten habe ich bereits einen Artikel geschrieben: http://www.haorooms.com/post/css_unit_calc. Auf diese Weise kann ein adaptives Layout erreicht werden.

Vorteile der Verwendung von vh- und vw-Einheiten

1. Die Scroll-Achse kann angezeigt werden, ohne dass die Seite flackert:

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

Seitdem haben wir Es besteht keine Notwendigkeit mehr, die Breite der Scroll-Achse zu berechnen. Klicken Sie zum Berechnen der Breite der Scroll-Achse bitte auf

2. Da ich mich im Vollbildmodus befinde, ist dies für die Scroll-Achse nicht erforderlich erscheinen, es können jedoch unterschiedliche Zoom-Bildschirme angezeigt werden. Wenn die Bildlaufachse angezeigt wird, können Sie den folgenden Code verwenden, um die Anzeige der Bildlaufachse abzubrechen.

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

Nachteile

1. Die Berechnung ist relativ mühsam.

2. Wenn das übergeordnete Element positioniert ist, kann es durch einen Prozentsatz ersetzt werden VH und VW haben eine gute Kompatibilität. (Mein großer Datenbildschirm erfordert keine gute Kompatibilität, daher habe ich mich für vh und vw entschieden)

2. Zahlen- und Prozent-Bildlaufeffekte

Was den Zahlen-Bildlaufeffekt betrifft, habe ich ihn vor langer Zeit verwendet Ein Plug-In, aber dieses verwendet Bilder zum Scrollen, da ich in Schwierigkeiten bin, können wir derzeit CSS3 für digitales Scrollen verwenden!

3. Jedes Mal, wenn setTimeout ausgeführt wird, erhöht sich die Zeit um eine Sekunde

Eine häufige Anwendung hierfür besteht darin, bei jeder zweiten Zufallszahl einen Code auszuführen, und das Zeitintervall ist unterschiedlich!

Ich habe zuerst setInterval verwendet, aber festgestellt, dass die Zeit jeder Ausführung die Zeit der ersten Ausführung ist. Das liegt daran, dass setInterval nach dem Aufruf zur Timer-Ausführungswarteschlange hinzugefügt wird und auf die Bindung wartet. Die Funktion wird ausgeführt, d.h. die eingestellte Intervallzeit ist nur einmal wirksam. Dann verwenden Sie stattdessen setTimeout. Bezüglich setTimeout habe ich es auch in meinem vorherigen Artikel erwähnt!

Der Code zum Ausführen einer Zufallszahl lautet wie folgt:

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);}

Ein Teil meines Codes lautet wie folgt:

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 🎜>

Daten Viele der großen Bildschirme werden automatisch, ohne Mausinteraktion, ausgelöst und alle paar Sekunden ausgeführt. Wir haben eine Tabelle ähnlich der Karte von China verwendet, aber der Tooltip wird automatisch ausgelöst und aktualisiert die Daten alle paar Sekunden und einmal auslösen!

Setzen Sie zuerst „triggerOn“ unter dem Tooltip auf „Keine“ und lösen Sie es dann über „dispatchAction“ aus. Die offizielle API-Erklärung ist vage, aber eigentlich sehr einfach. Der Code lautet wie folgt:

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 //获取最多数据的名字});

Auf diese Weise kann es automatisch ausgelöst werden

5. Verwenden Sie SVG, um eine dynamische Uhr zu erstellen

Auf dem großen Datenbildschirm muss eine dynamische Zeit angezeigt werden benötigt. Ich teile meinen Code hier:

HTML-Code lautet wie folgt:

  <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-Code lautet wie folgt:

/* 钟表样式*/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-Code lautet wie folgt:

   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)

Damit ist der Effekt der kleinen Uhr und der Sprungzeit auf der rechten Seite abgeschlossen!

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie CSS3, um Symboleffekte zu erstellen

So verwenden Sie CSS3, um Textanimationen anzuzeigen, wenn sie durch Licht beleuchtet werden

CSS3-Klick, um Welleneffekte anzuzeigen

Das obige ist der detaillierte Inhalt vonSo erstellen Sie den Big-Data-Bildschirm eines Unternehmens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!