制作公司数据大屏的几点技术总结

3418次浏览

前言

说起数据大屏,大家可以想到天猫双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)

二、数字和百分比滚动效果

关于数字滚动效果,我很久之前用过一个插件,http://www.haorooms.com/post/jquery_gundong ,但是这个使用图片进行的滚动,因为我很麻烦,我们目前完全可以用css3来进行数字滚动!

百分比的数字滚动更简单,我把demo已经上传了haorooms前端资源库和github,具体大家可以去看!

资源库地址:http://resource.haorooms.com/softshow-29-270-1.html

github地址:https://github.com/confidence68/numberAnimateOperate

三、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: 'showTip',
    // 系列的 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('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)

这样就完成了小时钟及右侧跳动时间的效果!

Tags: html5单位

相关文章: