How to create a company's big data screen

Speaking of big data screens, everyone can think of Tmall Double 11 big data screens, cool! Yes, large data screens are all about cool effects. I've done it once before, so I'll summarize how I did it.

1. Screen Adaptation

I only got the 1920*1080 design drawing given by the designer, but it is not necessarily this size. At present I don’t know what the screen size is for displaying this data, so I can only make an adaptive effect! How to achieve adaptive effect. I have thought of several solutions. The current solution I am using is to use vh and vw units for page layout. For some introduction to these two units, I have written an article before, http://www.haorooms.com/post/css_unit_calc. In this way, adaptive layout can be achieved.

Benefits of using vh and vw units

1. The scroll axis can appear without the page flickering. The code is as follows:

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

From now on, we don’t have to It’s hard to calculate the width of the scroll axis. To calculate the width of the scroll axis, please click

2. Because I am in full screen, there is no need for the scroll axis to appear, but scrolling may occur on different zoom screens. Axis, you can use the following code to cancel the scroll axis display.

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

Disadvantages

1. It is relatively troublesome to calculate

2. When the parent element is positioned, it can be replaced by percentage. The percentage is compatible with VH and VW. Good sex. (My large data screen does not require good compatibility, so I chose vh and vw)

2. Number and percentage scrolling effects

Regarding the number scrolling effect, I used it a long time ago A plug-in, but this uses pictures for scrolling, because I am in trouble, we can currently use css3 for digital scrolling!

3. Each time setTimeout is executed, the time increases by one second.

This application is more about executing a piece of code every other random number, and the time interval is different!

I used setInterval at first, but found that the time of each execution was the time of the first execution. That is because after setInterval is called, it will be added to the timer execution queue, waiting for binding. The function is executed, which means that the set interval time will only be effective once. Then use setTimeout instead. Regarding setTimeout, I also mentioned it in my previous article!

The code to execute a random number is as follows:

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

Part of my code is as follows:

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 automatically triggers the tooltip

There are many data in the big screen They are all triggered automatically, without mouse interaction, and are executed every few seconds. We used a table similar to a map of China, but the tooltip is automatically triggered. The data is updated every few seconds and triggered once!

First set triggerOn under the tooltip to none, and then trigger it through dispatchAction. The official API explanation is vague, but it is actually very simple. The code is as follows:

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

This way it can be triggered automatically

5. Use svg to make a dynamic clock

The large data screen needs a dynamic time. The time jumps and a clock is needed. I will share my code here:

html code is as follows:

  <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 is as follows:

/* 钟表样式*/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 is as follows:

   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)

This is it The effects of the small clock and the jumping time on the right side are completed!

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use CSS3 to make icon effects

How to use CSS3 to make it Display text animation when illuminated by light

css3 click to display ripple special effects

The above is the detailed content of How to create a company's big data screen. For more information, please follow other related articles on the PHP Chinese website!