大数据可视化大屏实战项目（72）大数据可视化系统数据分析通用模版---HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中）

我就是我 2024-05-07 17:10 127阅读 0赞

大数据可视化大屏实战项目（72）大数据可视化系统数据分析通用模版—HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中???）

一，项目概览

☞☞☞☞☞☞项目演示链接：index

☞☞☞☞☞☞项目演示链接：index

image-20230909020447815

二，运行视频

☞☞☞☞☞☞B站演示视频：

三，部分代码讲解

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>index</title>
  6. <script type="text/javascript" src="js/jquery.js"></script>
  7. <link rel="stylesheet" href="css/comon0.css">
  8. </head>
  9. <body>
  10. <div class="loading">
  11.   <div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
  12. </div>
  13. <div class="head">
  14.   <h1>大数据可视化系统数据分析通用模版</h1>
  15.   <div class="time" id="showTime">2019/11/29 0:12:42</div>
  16.         <script>
  17. var t = null;
  18.     t = setTimeout(time,1000);//開始运行
  19.     function time()
  20.     {
  21.        clearTimeout(t);//清除定时器
  22.        dt = new Date();
  23.         var y=dt.getFullYear();
  24.         var mt=dt.getMonth()+1;
  25.         var day=dt.getDate();
  26.        var h=dt.getHours();//获取时
  27.        var m=dt.getMinutes();//获取分
  28.        var s=dt.getSeconds();//获取秒
  29.         var t = null;
  30.        document.getElementById("showTime").innerHTML = y+"/"+Appendzero(mt)+"/"+Appendzero(day)+" "+Appendzero(h)+":"+Appendzero(m)+":"+Appendzero(s)+"";
  31.         function Appendzero(obj){
  32.             if(obj<10) return "0" +""+ obj;
  33.             else return obj;
  34.          }
  35.         t = setTimeout(time,1000); //设定定时器，循环运行     
  36.     } 
  38. </script>
  40. </div>
  41. <div class="mainbox">
  42.   <ul class="clearfix">
  43.     <li>
  44.       <div class="boxall" style="height: calc(40% - .15rem)">
  45.         <div class="alltitle">模块标题 </div>
  46.         <div class="sycm">
  47.           <ul class="clearfix">
  48.             <li>
  49.               <h2>1824</h2>
  50.               <span>华东地区</span></li>
  51.             <li>
  52.               <h2>1920</h2>
  53.               <span>华西地区</span></li>
  54.             <li>
  55.               <h2>19%</h2>
  56.               <span>华南地区</span></li>
  58.             <li>
  59.               <h2>1824</h2>
  60.               <span>华北地区</span></li>
  62.           </ul>
  63.         </div>
  64.         <div class="boxfoot"></div>
  65.       </div>
  66.       <div class="boxall" style="height: calc(60% - .15rem)">
  67.         <div class="alltitle">模块标题</div>
  68.    <div class="sycm sycm2">
  69.           <ul class="clearfix">
  70.             <li>
  71.               <h2>1824</h2>
  72.               <span>字段名称</span></li>
  73.             <li>
  74.               <h2>1920</h2>
  75.               <span>字段名称</span></li>
  76.             <li>
  77.               <h2>19%</h2>
  78.               <span>字段名称</span></li>
  80.             <li>
  81.               <h2>1824</h2>
  82.               <span>字段名称</span></li>
  83.            <li>
  84.               <h2>19%</h2>
  85.               <span>字段名称</span></li>
  87.             <li>
  88.               <h2>1824</h2>
  89.               <span>字段名称</span></li>
  91.           </ul>
  92.         </div>
  93.         <div class="boxfoot"></div>
  94.       </div>
  96.     </li>
  97.     <li>
  98.      <div style="position: relative">
  99.         <div class="barnav">
  101.              <div class="bar">
  102.         <div class="barbox">
  103.           <ul class="clearfix">
  104.             <li class="pulll_left counter">1942</li>
  105.             <li class="pulll_left counter">98612</li>
  106.             <li class="pulll_left counter">2091</li>
  107.           </ul>
  108.         </div>
  109.         <div class="barbox2">
  110.           <ul class="clearfix">
  111.             <li class="pulll_left">字段名称</li>
  112.             <li class="pulll_left">字段名称</li>
  113.             <li class="pulll_left">字段名称</li>
  114.           </ul>
  115.         </div>
  117.       </div>
  118.         </div>
  119.          </div>
  120.       <div class="mapbox">
  121.         <div class="map">
  122.         <div class="map1"><img src="images/lbx.png"></div>
  123.         <div class="map2"><img src="images/jt.png"></div>
  124.         <div class="map3"><img src="images/map.png"></div>
  125.         <div class="map4" id="map_1"></div>
  126.       </div>
  127.         </div>
  128.     </li>
  129.     <li>
  131.         <div class="boxall" style="height: calc(50% - .15rem)">
  132.         <div class="alltitle">字段名称 <div class="pulll_right">
  133.             <a href="#"><span></span>已维修</a>
  134.             <a href="#"><span></span>未维修</a>
  135.             </div></div>
  137.         <div class="boxnav" id="echart3"></div>
  139.         <div class="boxfoot"></div>
  140.       </div>
  141.       <div class="boxall" style="height: calc(50% - .15rem)">
  142.         <div class="alltitle">字段名称</div>
  143.         <div class="wrap boxnav">
  144.           <ul>
  145.             <li><p><span>深圳腾讯科技有限公司</span><span>门禁系统</span><span>在线</span></p></li>
  146.             <li><p><span>网易科技有限公司</span><span>防火系统</span><span>在线</span></p></li>
  147.             <li><p><span>百度科技有限公司</span><span>防火系统</span><span>在线</span></p></li>
  148.             <li><p><span>汽车之家科技有限公司</span><span>定位系统</span><span>在线</span></p></li>
  149.             <li><p><span>小米科技有限公司</span><span>定位系统</span><span>在线</span></p></li>
  151.           </ul>
  152.         </div>
  153.         <div class="boxfoot"></div>
  154.       </div>
  155.     </li>
  156.   </ul>
  157.   <div class="copyright">版权所有：深圳市深海时代网络科技有限公司 粤ICP备15031517号-4</div>
  158. </div>
  160.     <div class="mainbox2">
  161.   <ul class="clearfix">
  162.     <li>
  164.         <div class="boxall" style="height: 100%">
  165.         <div class="alltitle">模块标题
  166.             <div class="pulll_right">
  167.             <a href="#"><span></span>已检点</a>
  168.             <a href="#"><span></span>未检点</a>
  169.             </div>
  170.             </div>
  171.        <div class="boxnav">
  172.           <ul class="btbox">
  173.            <li id="bt01"></li>
  174.            <li id="bt02"></li>
  175.            <li id="bt03"></li>
  176.            <li id="bt04"></li>
  177.            </ul>
  178.           </div>
  179.         <div class="boxfoot"></div>
  180.       </div>
  182.     </li>
  183.       <li>
  184.           <div class="boxall" style="height:100%">
  185.         <div class="alltitle">模块标题
  186.               <div class="pulll_right sebtn" >
  187.             <a href="#" class="active">近七天</a>
  188.             <a href="#">近30天</a>
  189.             <a href="#">12月</a>
  190.             </div>
  191.               </div>
  192.          <div class="boxnav" id="echart4"></div>
  195.         <div class="boxfoot"></div>
  196.       </div>
  197.       </li>
  199.         </ul>
  200.         </div>
  202. <script language="JavaScript" src="js/js.js"></script> 
  203. <script type="text/javascript" src="js/echarts.min.js"></script> 
  204. <script type="text/javascript" src="js/china.js"></script> 
  205. <script type="text/javascript" src="js/area_echarts.js"></script> 
  206. <script src="js/jquery.liMarquee.js"></script> 
  207. <script>
  208. $(function(){
  209.     $('.wrap,.adduser').liMarquee({
  210.         direction: 'up',//身上滚动 
  211.         runshort: false,//内容不足时不滚动
  212.         scrollamount: 20//速度
  213.     });
  214. });
  216. </script> 
  219. <script type="text/javascript">
  220.         $('.counter').countUp();
  221.   </script>
  222. </body>
  223. </html>

这是一个HTML网页模板，用于创建一个包含数据可视化和信息展示的网页。以下是模板的主要结构和内容：

  1. HTML 结构：包括标准的文档声明、<html>、<head> 和 <body> 标签。
  2. 字符集和标题：使用 <meta> 标签设置字符集和指定网页标题。
  3. 外部资源引用：引入了多个外部 JavaScript 文件，包括 jQuery、ECharts 库以及中国地图数据文件等。
  4. 加载动画：包含一个加载动画，显示在页面加载中。
  5. 网页头部：包含了网页标题和一个显示当前时间的区域，使用 JavaScript 实时更新时间。
  6. 主要内容区域：使用类名 .mainbox 和 .mainbox2 包含了不同部分的数据可视化元素。
  7. 模块：每个模块包含了一个标题（.alltitle）和一个数据展示区域（.boxnav），数据展示区域包括不同类型的数据元素，如数字、图表、列表等。
  8. 计数器：使用 <h2> 元素和类名来显示数字，并包含了对数字的动画效果。
  9. 图表：使用 ECharts 库绘制图表，通过一个具有唯一 ID 的 <div> 元素容器包裹图表。
  10. 地图：包含了一个地图区域，使用中国地图数据文件进行展示。
  11. 信息列表：使用类名 .wrap 和 .adduser 包含了滚动的信息列表。
  12. 页脚：包含了版权信息。

这个模板可以用于创建一个包含实时时间、数据可视化、图表、地图和信息列表等元素的网页。你可以根据具体需求替换示例中的数据和样式，以创建自己的数据分析页面。确保所有引用的外部资源文件都位于正确的路径下，以确保网页正常加载和运行。这是一个HTML网页模板，用于创建一个包含数据可视化和信息展示的网页。以下是模板的主要结构和内容：

  1. HTML 结构：包括标准的文档声明、<html>、<head> 和 <body> 标签。
  2. 字符集和标题：使用 <meta> 标签设置字符集和指定网页标题。
  3. 外部资源引用：引入了多个外部 JavaScript 文件，包括 jQuery、ECharts 库以及中国地图数据文件等。
  4. 加载动画：包含一个加载动画，显示在页面加载中。
  5. 网页头部：包含了网页标题和一个显示当前时间的区域，使用 JavaScript 实时更新时间。
  6. 主要内容区域：使用类名 .mainbox 和 .mainbox2 包含了不同部分的数据可视化元素。
  7. 模块：每个模块包含了一个标题（.alltitle）和一个数据展示区域（.boxnav），数据展示区域包括不同类型的数据元素，如数字、图表、列表等。
  8. 计数器：使用 <h2> 元素和类名来显示数字，并包含了对数字的动画效果。
  9. 图表：使用 ECharts 库绘制图表，通过一个具有唯一 ID 的 <div> 元素容器包裹图表。
  10. 地图：包含了一个地图区域，使用中国地图数据文件进行展示。
  11. 信息列表：使用类名 .wrap 和 .adduser 包含了滚动的信息列表。
  12. 页脚：包含了版权信息。

这个模板可以用于创建一个包含实时时间、数据可视化、图表、地图和信息列表等元素的网页。你可以根据具体需求替换示例中的数据和样式，以创建自己的数据分析页面。确保所有引用的外部资源文件都位于正确的路径下，以确保网页正常加载和运行。

可视化图表的使用技巧

1、柱状图

柱状图中的颜色尽量不要超过3种。
柱状图柱子间的宽度和间隙要是适当。住在太窄，用户的视觉可能会集中在两个柱子之间的负空间
对多个数据系列排序时，最好复合一定的逻辑，用直观的方式引导用户更好的查看数据，此时可以通过升序和降序排列。
2、折线图

折线图连接各点可以使用直线和曲线，这样更美观，数据展示更加清晰
折线的颜色要清晰，尽量不要使用与背景色和坐标轴相近的颜色
折线图中的线条尽量不要超过4条，过多的线条会导致界面混乱，无法阅读。
3、饼图

饼图适合用来展示单一维度数据的占比，要求其数值没有零或者负值，并确保各个分块占比总和为100%。
饼图不适合用于精确数据的比较，因此当各类别数据占比相似时，很难分辨出哪个类别占比比较大。
大多数人的视觉习惯是按照顺时针自上而下的顺序去观察，因此在绘制饼图时建议从12点钟开始沿着顺时针右边的第一个分块绘制饼图最大的数据分块，这样可以有效地强调其重要性
4、散点图

如果一个散点图没有显示变量的任何关系，那么或许该图表类型不是次数据的最佳选择
散点图只有在足够多的数据点并且数据间有相关性时，才能呈现很好的结果。
如果数据包含不同系列，可以给不同系列使用不同的颜色

数据功能图介绍
在大数据的可视化图中，按照数据的作用和功能可以把图分为比较类图、分布类图、流程类图、地图类图、占比类图、区间类图、关联类图、时间类图和趋势类图等。
1、比较类图
比较类图可视化的方法通常是显示值与值之间的不同和相似之处，使用图形的长度、宽度、位置、面积、角度和颜色来比较数值的大小，通常用于展示不同分类间的数值对比一级不同时间点的数据对比。常见的比较类图主要有柱状图、双向柱状图、气泡图、子弹图、色块图、漏斗图和直方图等

2、分布类图
分布类图可视化的方法通常是显示频率，将数据分散在一个区间或分组，并使用图形的为、大小、颜色的渐变程度类表现数据的分布。分布类图通常用于展示连续数据上数值的分布情况。常见的分布类图主要有箱型图、热力图、散点图、分布曲线图、色块图和直方图

3、流程类图
流程类图可视化的方法通常是显示流程流转和流程流量。一般流程都会呈现出多个环节，每个环节之间会有相应的流量关系，因此这类图形可以很好的表示这些流量关系。常见的流程图主要有漏斗图和桑基图

4、地图类图
地图类图可视化的方法是显示地理区域上的数据，并在显示是使用地图作为背景，通过图形的位置来表现数据的地理位置。地图类图通常用来展示数据在不同地理区域上的分布情况。常见的地图类图主要有待气泡的地图和统计地图

5、占比类图
占比类图可视化的范式是显示同一维度上的占比关系。常见的占比类图主要有换图、马赛克图、堆叠面积图、堆叠柱状图和矩形树图

6、区间类图
区间类图可视化的方法是显示同一维度上值的上限和下限之间的差异。区间类图使用图形的大小和位置表示数值的上限和下限，通常用于表示数据在某一分类（时间点）上的最大值和最小值。常见的区间类图主要有仪表盘图和堆叠面积图

7、关联类图
关联类图可视化的方法显示数据之间的相互关系。关联类图使用图形的嵌套和位置表示数据之间的关系，通常用于表示数据之间的前后顺序、父子关系和相关性。常见的关联类图主要有和弦图、桑基图、矩阵树图、树状图和韦恩图

8、时间类图
时间类图可视化的方法显示以时间为特定维度的数据。时间类图使用图形的位置表现出数据在时间深的房补，通常用于表现数据在时间维度上的趋势和变化。常见的实践类图主要有面截图、K线图、卡吉图和螺旋图

9、趋势类图
趋势类图可视化的方式分析数据的变化趋势，趋势类图使用图形的位置表现出数据在连续区域上的分布，通常展示数据在连续区域上的大小变化的规律。常见的趋势类图主要有面积图、K线图、折线图和回归曲线图

四，源码

链接：https://pan.baidu.com/s/120d0Rju8zAwOfMkonzPMaA?pwd=nljy
提取码：nljy

创作不易，项目已加密，有偿（—3r—，可修改页面，做实验报告，代码讲解，待上服务器等…）

请私信作者（v）15135757306

注：非白嫖仅为维护服务器，若想白嫖请CSDN私信我（大概率可能时间忙顾不上回复）

若侵权请私信作者下架博客

发表评论

表情：
评论列表 （有 0 条评论，127人围观）

还没有评论，来说两句吧...

相关阅读