shuochen
/
LargeScreenVisualization


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512
							<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="http://test.279.jingan8.cn/test3/js/echarts.min.js"></script>
<link rel="stylesheet" href="css/comon0.css">
</head>
<body>
<div class="loading">
  <div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
</div>
	<div class="canvas" >
	<canvas width="100%" height="100%"></canvas>
	</div>
	
<div class="head">
  <h1>大数据可视化系统数据分析通用模版</h1>
</div>
<div class="mainbox">
	<div class="topnav">
	<ul  class="clearfix">
		<li>	<div class="boxall">
        <div class="tit01">模块标题</div>
		 <div class="boxnav nav01" style="display: flex; align-items: center;">
				
			 <div class="yqlist">
            <ul class="clearfix">
				 			   <li><div class="yq">266<span>今日开卡</span></div></li>
                              <li><div class="yq">2634<span>广告展示</span></div></li>
                              <li><div class="yq">567<span>广告点击</span></div></li>
                              <li><div class="yq">56345<span>卡券发放</span></div></li>
                              <li><div class="yq">721<span>卡券核销</span></div></li>
                            
                              <li><div class="yq">194<span>朋友圈广告展示</span></div></li>
                            </ul>
          </div>
			 
				 </div>
        <div class="boxfoot"></div>
      </div></li>
		<li>
		<div class="boxall" style="padding: 0;">
      
        <div class="boxnav" style="height: 100%; display: flex; align-items: center;">
		  	<ul class="zjyl">
				<li><i>129018<em>元</em></i><span>今日交易量</span></li>
				<li><i>14197421<em>元</em></i><span>总交易量</span></li>
				<li><i>1423412<em>笔</em></i><span>今日交易笔数</span></li>
				<li><i>124148232<em>笔</em></i><span>总交易笔数</span></li>
			</ul>
			
			
		  </div>
        <div class="boxfoot"></div>
      </div>
		</li>
	<li>
		<div class="boxall" style="padding: 0;">
      <div class="tit01">模块标题</div>
        <div class="boxnav nav03"  id="echart3">
		
			
		  </div>
        <div class="boxfoot"></div>
      </div>
		</li>
		</ul>
	</div>

	
	<div class="" style="height:calc(50% - .25rem)">
	<ul class="ulheight">
		<li><div class="boxall" >
        <div class="tit01">模块标题</div>
			 <div class="boxnav nav03" id="echart1">
				 
				 
			</div>
        <div class="boxfoot"></div>
      </div>
		</li>
		<li><div class="boxall">
        <div class="tit01">模块标题</div>
			 <div class="boxnav nav03" id="echart2">
				 
				 
			</div>
        <div class="boxfoot"></div>
      </div>
		</li>
		<li><div class="boxall">
        <div class="tit01">模块标题</div>
			 <div class="boxnav nav03">
				 
				 	 <div class="listhead ">
				  <span>商户名</span>
					  <span>金额</span>
					  <span>方式</span>
					  <span>时间</span>
				 </div>
				 <div class="listnav  scrollDiv">
				 <ul>
					 <li> 
						 <span>xx超市</span> 
						 <span>34.5</span> 
						 <span>支付宝</span> 
						 <span>2019-11-08</span> 
					 </li>
					 <li> 
						 <span>xx超市</span> 
						 <span>34.5</span> 
						 <span>支付宝</span> 
						 <span>2019-11-08</span> 
					 </li>
					 <li> 
						 <span>xx超市</span> 
						 <span>34.5</span> 
						 <span>支付宝</span> 
						 <span>2019-11-08</span> 
					 </li>
					 <li> 
						 <span>xx超市</span> 
						 <span>34.5</span> 
						 <span>支付宝</span> 
						 <span>2019-11-08</span> 
					 </li>
					 <li> 
						 <span>xx超市</span> 
						 <span>34.5</span> 
						 <span>支付宝</span> 
						 <span>2019-11-08</span> 
					 </li>
					 <li> 
						 <span>xx超市</span> 
						 <span>34.5</span> 
						 <span>支付宝</span> 
						 <span>2019-11-08</span> 
					 </li>
					 <li> 
						 <span>xx超市</span> 
						 <span>34.5</span> 
						 <span>支付宝</span> 
						 <span>2019-11-08</span> 
					 </li>
					 <li> 
						 <span>xx超市</span> 
						 <span>34.5</span> 
						 <span>支付宝</span> 
						 <span>2019-11-08</span> 
					 </li>
					 <li> 
						 <span>xx超市</span> 
						 <span>34.5</span> 
						 <span>支付宝</span> 
						 <span>2019-11-08</span> 
					 </li>
					 <li> 
						 <span>xx超市</span> 
						 <span>34.5</span> 
						 <span>支付宝</span> 
						 <span>2019-11-08</span> 
					 </li>
					 <li> 
						 <span>xx超市</span> 
						 <span>34.5</span> 
						 <span>支付宝</span> 
						 <span>2019-11-08</span> 
					 </li>
					
					 </ul>
				 </div>
				 
				 
			</div>
        <div class="boxfoot"></div>
      </div>
		</li>
		</ul>
	</div>
	
	
</div>


<script language="JavaScript" src="js/js.js"></script> 
<script type="text/javascript" src="js/jquery.countup.min.js"></script> 
<script type="text/javascript" src="js/jquery.waypoints.min.js"></script> 
	<script src="js/jquery.liMarquee.js"></script> 
<script type="text/javascript">
$('.counter').countUp();

$(function(){
	$('.scrollDiv').liMarquee({
		direction: 'up',//身上滚动 
		runshort: false,//内容不足时不滚动
		scrollamount: 20//速度
	});
});

</script> 


<script>

$(function(){

  var canvas = document.querySelector('canvas'),

      ctx = canvas.getContext('2d')

  canvas.width = window.innerWidth;

  canvas.height = window.innerHeight;

  ctx.lineWidth = .3;

  ctx.strokeStyle = (new Color(150)).style;


  var mousePosition = {

    x: 30 * canvas.width / 100,

    y: 30 * canvas.height / 100

  };


  var dots = {

    nb: 250,

    distance: 50,

    d_radius: 400,

    array: []

  };


  function colorValue(min) {

    return Math.floor(Math.random() * 255 + min);

  }

  
  function createColorStyle(r,g,b) {

    return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';

  }

  
  function mixComponents(comp1, weight1, comp2, weight2) {

    return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);

  }

  
  function averageColorStyles(dot1, dot2) {

    var color1 = dot1.color,

        color2 = dot2.color;

    
    var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),

        g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),

        b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);

    return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));

  }

  
  function Color(min) {

    min = min || 0;

    this.r = colorValue(min);

    this.g = colorValue(min);

    this.b = colorValue(min);

    this.style = createColorStyle(this.r, this.g, this.b);

  }


  function Dot(){

    this.x = Math.random() * canvas.width;

    this.y = Math.random() * canvas.height;


    this.vx = -.5 + Math.random();

    this.vy = -.5 + Math.random();


    this.radius = Math.random() * 2;


    this.color = new Color();

    console.log(this);

  }


  Dot.prototype = {

    draw: function(){

      ctx.beginPath();

      ctx.fillStyle = this.color.style;

      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);

      ctx.fill();

    }

  };


  function createDots(){

    for(i = 0; i < dots.nb; i++){

      dots.array.push(new Dot());

    }

  }


  function moveDots() {

    for(i = 0; i < dots.nb; i++){


      var dot = dots.array[i];


      if(dot.y < 0 || dot.y > canvas.height){

        dot.vx = dot.vx;

        dot.vy = - dot.vy;

      }

      else if(dot.x < 0 || dot.x > canvas.width){

        dot.vx = - dot.vx;

        dot.vy = dot.vy;

      }

      dot.x += dot.vx;

      dot.y += dot.vy;

    }

  }


  function connectDots() {

    for(i = 0; i < dots.nb; i++){

      for(j = 0; j < dots.nb; j++){

        i_dot = dots.array[i];

        j_dot = dots.array[j];


        if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance){

          if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > - dots.d_radius && (i_dot.y - mousePosition.y) > - dots.d_radius){

            ctx.beginPath();

            ctx.strokeStyle = averageColorStyles(i_dot, j_dot);

            ctx.moveTo(i_dot.x, i_dot.y);

            ctx.lineTo(j_dot.x, j_dot.y);

            ctx.stroke();

            ctx.closePath();

          }

        }

      }

    }

  }


  function drawDots() {

    for(i = 0; i < dots.nb; i++){

      var dot = dots.array[i];

      dot.draw();

    }

  }


  function animateDots() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    moveDots();

    connectDots();

    drawDots();


    requestAnimationFrame(animateDots);	

  }


  $('canvas').on('mousemove', function(e){

    mousePosition.x = e.pageX;

    mousePosition.y = e.pageY;

  });


  $('canvas').on('mouseleave', function(e){

    mousePosition.x = canvas.width / 2;

    mousePosition.y = canvas.height / 2;

  });


  createDots();

  requestAnimationFrame(animateDots);	

});

</script>
</body>
</html>