毕设项目分享 基于大数据可视化系统通用模板

# 0 前言

Hi，大家好，今天给大家介绍一个大数据可视化项目，大家可以用于自己的课设或毕设，可以灵活耦合任意数据，为自己的项目添加灵活的可视化动态效果！

今天要分享的是：基于大数据的电商数据可视化平台

包含内容：

1. 完整可视化实现源码
2. html一键入口(双击直接启动)

项目获取：https://gitee.com/sinonfin/system-sharing

1 介绍

大数据大屏可视化系列：基于大数据的电商数据可视化平台
可搭载任意自己想用的数据，动态效果不错

2 实现效果

整体实现效果如下，可以看到CSS优化相对漂亮的，而且动态效果也很好，适合搭载各种数据。

3 部分代码展示

  <div class="time" id="showTime">2019/12/05 16:16:54</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();//获取秒
		var t = null;
       document.getElementById("showTime").innerHTML = y+"/"+Appendzero(mt)+"/"+Appendzero(day)+" "+Appendzero(h)+":"+Appendzero(m)+":"+Appendzero(s)+"";
        function Appendzero(obj){
			if(obj<10) return "0" +""+ obj;
			else return obj;
		 }
		t = setTimeout(time,1000); //设定定时器，循环运行     
    } 

</script>
	
</div>
<div class="mainbox">
  <ul class="clearfix">
    <li>
  
	  <div class="boxall" style="height: calc(58% - .15rem)">
		<div class="alltitle">标题名称</div>
		 <div class=" boxnav " id="echarts4">
        </div>
      </div>
      <div class="boxall" style="height: calc(42% - .15rem)">
          <div class="alltitle">标题名称</div>
          <div class="boxnav" id="echarts3"></div>
        </div>
    </li>
    <li>
        <div class="boxall" style="height: calc(20% - .15rem)">
           <ul class="row h100 clearfix">
            <li class="col-6">
			   <div class="sqzs h100">
				<p>业绩总览</p>
				   <h1><span>30500</span>万</h1>
				</div>
			   </li>
            <li class="col-6">
                <ul class="row h100 clearfix">
                    <li class="col-4">
                      <div class="tit01">标题名称</div>
                      <div class="piebox" id="pe01"></div>
                    </li>
                    <li class="col-4">
                      <div class="tit01">标题名称</div>
                      <div class="piebox" id="pe02"></div>
                    </li>
                    <li class="col-4">
                      <div class="tit01">标题名称</div>
                      <div class="piebox" id="pe03"></div>
                    </li>
                   </ul>

            </li>
           </ul>
          </div>
          <div class="boxall" style="height: calc(38% - .15rem)">
            <div class="alltitle">标题名称</div>
              <div class="boxnav" id="echarts1"></div>
            </div>
            <div class="boxall" style="height: calc(42% - .15rem)">
              <div class="alltitle">标题名称</div>
                <div class="boxnav" id="echarts2"></div>
              </div>

    </li>
    <li>
      
		<div class="boxall" style="height: calc(33.333% - .15rem)">

			<div class="alltitle">标题名称</div>
			<div class="boxnav" id="echarts5"></div>
        
      </div>
      <div class="boxall" style="height: calc(33.333% - .15rem)">
        <div class="alltitle">标题名称</div>
		<div class="boxnav" id="">
<table border="0" cellspacing="0">
  <tr>
    <th></th>
    <th>字段</th>
    <th>字段</th>
    <th>字段</th>
    <th>字段</th>

  </tr>
  <tr>
    <th>字段</th>
    <td>8098</td>
    <td>19.80%</td>
    <td>22</td>
    <td>368</td>
  </tr>
  <tr>
    <th>字段</th>
    <td>7506</td>
    <td>6.70%</td>
    <td>22</td>
    <td>339</td>
  </tr>
  <tr>				
    <th>字段</th>
    <td>3261</td>
    <td>32.30%</td>
    <td>10</td>
    <td>325.7</td>
  </tr>
  <tr>
    <th>字段</th>
    <td>1993</td>
    <td>	201%</td>
    <td>10</td>
    <td>	199</td>
  </tr>
</table>
				
				

		

    </div>
        
	  </div>
	  <div class="boxall" style="height: calc(33.333% - .15rem)">
        <div class="alltitle">标题名称</div>
		<div class="boxnav" id="echarts6" style="height:calc(100% - .3rem);"></div>
      </div>
    </li>
  </ul>
</div>
	
<script type="text/javascript" src="js/echarts.min.js"></script> 
<script language="JavaScript" src="js/js.js"></script> 
</body>

4 最后

项目获取：https://gitee.com/sinonfin/system-sharing