Comment créer l’écran Big Data d’une entreprise

En parlant d'écrans big data, tout le monde peut penser aux grands écrans data Tmall Double 11, cool ! Oui, les grands écrans de données sont synonymes d’effets sympas. Je l'ai déjà fait une fois, je vais donc résumer comment je l'ai fait.

1. Adaptatif à l'écran

Je n'ai reçu que le dessin de conception 1920*1080 donné par le designer, mais ce n'est pas nécessairement cette taille. Je sais quelle est la taille de l'écran pour afficher ces données, je ne peux donc faire qu'un effet adaptatif ! Comment obtenir un effet adaptatif. J'ai pensé à plusieurs solutions. La solution actuelle que j'utilise consiste à utiliser les unités vh et vw pour la mise en page. Pour une introduction à ces deux unités, j'ai déjà écrit un article, http://www.haorooms.com/post/css_unit_calc. De cette manière, une mise en page adaptative peut être obtenue.

Avantages de l'utilisation des unités vh et vw

1. L'axe de défilement peut apparaître sans que la page ne scintille :

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

Depuis, nous. have Il n'est plus nécessaire de calculer la largeur de l'axe de défilement. Concernant le calcul de la largeur de l'axe de défilement, veuillez cliquer sur

2. Comme je suis en plein écran, il n'est pas nécessaire que l'axe de défilement soit calculé. apparaître, mais différents écrans de zoom peuvent. Lorsque l'axe de défilement apparaît, vous pouvez utiliser le code suivant pour annuler l'affichage de l'axe de défilement.

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

Inconvénients

1. Il est relativement difficile de calculer

2 Lorsque l'élément parent est positionné, il peut être remplacé par un pourcentage, ce qui est mieux que. VH et VW ont une bonne compatibilité. (Mon grand écran de données ne nécessite pas une bonne compatibilité, j'ai donc choisi vh et vw)

2. Effets de défilement de nombres et de pourcentages

Concernant l'effet de défilement de nombres, je l'ai utilisé il y a longtemps. Un plug-in, mais celui-ci utilise des images pour le défilement, car j'ai des ennuis, on peut actuellement utiliser du css3 pour le défilement numérique !

3. Chaque fois que setTimeout est exécuté, le temps augmente d'une seconde

Une application courante de ceci consiste à exécuter un morceau de code un nombre aléatoire sur deux, et l'intervalle de temps est différent !

J'ai utilisé setInterval au début, mais j'ai découvert que l'heure de chaque exécution est l'heure de la première exécution, car après l'appel de setInterval, il sera ajouté à la file d'attente d'exécution du minuteur, en attente de liaison. La fonction est exécutée, ce qui signifie que l'intervalle de temps réglé ne sera efficace qu'une seule fois. Utilisez alors setTimeout à la place. Concernant setTimeout, je l’ai également mentionné dans mon article précédent !

Le code pour exécuter un nombre aléatoire est le suivant :

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

Une partie de mon code est la suivante :

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

données La plupart des grands écrans se déclenchent automatiquement, sans interaction de la souris, et sont exécutés toutes les quelques secondes. Nous avons utilisé un tableau similaire à la carte de la Chine, mais l'info-bulle se déclenche automatiquement, mettant à jour les données toutes les quelques secondes. et déclenchement une fois !

Définissez d'abord triggerOn sous l'info-bulle sur none, puis déclenchez-le via dispatchAction. L'explication officielle de l'API est vague, mais elle est en fait très simple. Le code est le suivant :

De cette façon, il peut être déclenché automatiquement.

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. Utilisez SVG pour créer une horloge dynamique

Il doit y avoir une heure dynamique sur le grand écran de données. Le temps saute et une horloge apparaît. nécessaire. Je partage mon code ici :

le code html est le suivant :

le code css est le suivant :

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

le code js est le suivant :

/* 钟表样式*/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;}

Cela complète l'effet de la petite horloge et du temps sautant sur le côté droit !

   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)

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser CSS3 pour créer des effets d'icônes

Comment utiliser CSS3 pour qu'il affiche une animation de texte lorsqu'il est éclairé par la lumière

Cliquez en CSS3 pour afficher les effets d'entraînement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!