집 >웹 프론트엔드 >JS 튜토리얼 >기업의 빅데이터 화면을 만드는 방법

기업의 빅데이터 화면을 만드는 방법

php中世界最好的语言원래의: 2017-11-27 14:25:565308검색

빅데이터 화면이라고 하면 누구나 Tmall Double 11 빅데이터 화면을 떠올릴 수 있습니다. 멋지네요! 예, 대형 데이터 화면은 모두 멋진 효과를 제공합니다. 예전에 한 번 해본 적이 있어서 어떻게 했는지 요약해보겠습니다.

1. 화면 적응

디자이너가 주신 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를 선택했습니다.)

2. 숫자 및 백분율 스크롤 효과

숫자 스크롤 효과에 대해서는 오래전부터 플러그인을 사용했지만 이것은 사진을 사용합니다. 스크롤 문제가 생겼기 때문에 현재 디지털 스크롤에는 CSS3를 사용할 수 있습니다!

3. setTimeout이 실행될 때마다 시간이 1초씩 늘어납니다.

이 응용 프로그램은 모든 임의의 숫자가 코드 조각을 실행하는 데 사용되며 시간 간격이 다르다는 점에서 더 일반적입니다!

처음에는 setInterval을 사용했는데 각 실행 시간이 첫 번째 실행 시간이라는 것을 알았습니다. 이는 setInterval이 호출된 후 타이머 실행 대기열에 추가되어 바인딩된 함수가 실행되기를 기다리기 때문입니다. . 이는 설정된 간격 시간이 한 번만 유효함을 의미합니다. 그런 다음 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);}

4. Echart는 자동으로 툴팁을 트리거합니다.

많은 대용량 데이터 화면이 마우스 상호 작용 없이 자동으로 트리거되며 몇 초마다 실행되며 중국 지도와 유사한 테이블을 사용했지만 툴팁이 자동으로 트리거되어 몇 초마다 데이터를 업데이트하고 한 번 트리거됩니다!

먼저 툴팁에서 TriggerOn을 없음으로 설정한 다음, 공식 API 설명이 모호하지만 실제로는 매우 간단합니다.

myChart.dispatchAction({
    type: &#39;showTip&#39;,
    // 系列的 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(&#39;transform&#39;, &#39;rotate(&#39;+ deg +&#39; 500 500)&#39;)
      }
      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 중국어 웹사이트의 다른 관련 기사를 주목하세요!