大数据库可视化模版50:大数据可视化展示平台通用模板

博主介绍:《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。
所有项目都配有从入门到精通的基础知识视频课程,免费
项目配有对应开发文档、开题报告、任务书、PPT、论文模版等

项目都录了发布和功能操作演示视频;项目的界面和功能都可以定制,包安装运行!!!
在文章末尾可以获取联系方式

效果图

代码

<!--更多资源: -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/jquery.limarquee.js"></script>
<script type="text/javascript" src="js/jquery.cxselect.min.js"></script>
<link rel="stylesheet" href="css/comon0.css">
</head>
<body>
<div style="background:#000d4a url(images/bg.jpg) center top;">
  <div class="loading">
    <div class="loadbox"> <img src="picture/loading.gif"> 页面加载中... </div>
  </div>
  <div class="back"></div>
  <div class="head">
    <h1>大数据可视化展示平台通用模板</h1>
    <div class="weather"><span id="showTime"></span></div>
	    </div>
    <script>
var t = null;
    t = setTimeout(time,1000);//開始运行
    function time()
    {
       clearTimeout(t);//清除定时器
       dt = new Date();
		var y=dt.getFullYear();
		var mt=dt.getMonth()+1;
		var day=dt.getDate();
       var h=dt.getHours();//获取时
       var m=dt.getMinutes();//获取分
       var s=dt.getSeconds();//获取秒
       document.getElementById("showTime").innerHTML = y+"年"+mt+"月"+day+"日"+h+"时"+m+"分"+s+"秒";
       t = setTimeout(time,1000); //设定定时器,循环运行
    }
</script>
  <div class="mainbox">
    <ul class="clearfix">
      <li>
        <div class="boxall" style="height:545px;">

          <div class="navboxall" >
			<div class="sycm">
          <ul class="clearfix">
            <li>
              <h2>22864</h2>
              <span>总金额</span></li>
            <li>
              <h2>1572</h2>
              <span>数量</span></li>

          </ul>

        </div>

			  <ul class="jindu clearfix">
				  <div>1000</div>
				  <div>2000</div>
			  <li id="zb1"></li>
			  <li id="zb2"></li>
			  <li id="zb3"></li>
			  <li id="zb4"></li>
			  </ul>
			</div>
        </div>
      </li>
      <li>
        <div class="boxall" style="height:545px">
          <div class="alltitle">标题样式</div>
          <div class="navboxall" id="echart4"></div>
        </div>
      </li>
      <li>
        <div class="boxall" style="height:260px">
          <div class="alltitle">标题样式</div>
          <div class="navboxall" id="echart1"> </div>
        </div>
        <div class="boxall" style="height:270px">
          <div class="alltitle">标题样式</div>
          <div class="navboxall"  id="echart2"> </div>
        </div>
      </li>
    </ul>
    <ul class="clearfix">
      <li>
        <div class="boxall" style="height:390px;">
          <div class="alltitle">标题样式</div>
          <div class="navboxall" >
            <div class="wraptit"> <span>订单号</span><span>订单金额</span><span>计划时间</span><span>当前状态</span> </div>
            <div class="wrap">
              <ul>
                <li>
                  <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
                </li>
                <li>
                  <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
                </li>
                <li>
                  <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
                </li>
                <li>
                  <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
                </li>
                <li>
                  <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
                </li>
                <li>
                  <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
                </li>
                <li>
                  <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
                </li>
                <li>
                  <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
                </li>

				</ul>
            </div>
          </div>
        </div>
      </li>
      <li style="width:38%">
        <div class="boxall" style="height:390px">
          <div class="alltitle">标题样式</div>
          <div class="navboxall" id="echart3"></div>
        </div>
      </li>
      <li style="width:38%">
        <div class="boxall" style="height:390px">
          <div class="alltitle">标题样式</div>
          <div class="navboxall" id="echart5"></div>
        </div>
      </li>
    </ul>
  </div>
</div>

<script>

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

</body>
</html>

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码

)">
< <上一篇
下一篇>>