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

骑猪看日落 2024-05-07 17:10 120阅读 0赞

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

一,项目概览

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

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

image-20230909020958925

二,运行视频

☞☞☞☞☞☞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年12月05日16时16分54秒</div>
  16. <script>
  17. var t = null;
  18. t = setTimeout(time, 1000);//開始运行
  19. function time() {
  20. clearTimeout(t);//清除定时器
  21. dt = new Date();
  22. var y = dt.getFullYear();
  23. var mt = dt.getMonth() + 1;
  24. var day = dt.getDate();
  25. var h = dt.getHours();//获取时
  26. var m = dt.getMinutes();//获取分
  27. var s = dt.getSeconds();//获取秒
  28. var t = null;
  29. document.getElementById("showTime").innerHTML = y + "年" + Appendzero(mt) + "月" + Appendzero(day) + "日" + Appendzero(h) + "时" + Appendzero(m) + "分" + Appendzero(s) + "秒";
  30. function Appendzero(obj) {
  31. if (obj < 10) return "0" + "" + obj;
  32. else return obj;
  33. }
  34. t = setTimeout(time, 1000); //设定定时器,循环运行
  35. }
  36. </script>
  37. </div>
  38. <div class="mainbox">
  39. <ul class="clearfix">
  40. <li>
  41. <div class="boxall" style="height: calc(15% - .15rem)">
  42. <ul class="row h100 row1">
  43. <li class="col-4">
  44. <div class="bar1"><img src="images/icon1.png">
  45. <h3><span>字段名称</span>200个</h3>
  46. </div>
  47. </li>
  48. <li class="col-4">
  49. <div class="bar1"><img src="images/icon4.png">
  50. <h3><span>字段名称</span>1200个</h3>
  51. </div>
  52. </li>
  53. <li class="col-4">
  54. <div class="bar1"><img src="images/icon5.png">
  55. <h3><span>字段名称
  56. </span>150家</h3>
  57. </div>
  58. </li>
  59. </ul>
  60. </div>
  61. <div class="boxall" style="height: calc(43% - .15rem)">
  62. <ul class="sec h100">
  63. <li>
  64. <div>
  65. <p><img src="images/icon4.png">字段名称</p>
  66. <div class="barnav"><div class="bar2"><span style="width:50%;"></span></div> <span>24356件</span></div>
  67. </div>
  68. <div>
  69. <div class="zaf">
  70. <p>同比</p>
  71. <p><span>34<i>%</i></span><img src="images/up.png"></p>
  72. </div>
  73. </div>
  74. </li>
  75. <li>
  76. <div>
  77. <p><img src="images/icon5.png">字段名称</p>
  78. <div class="barnav"><div class="bar2"><span style="width:50%;"></span></div> <span>243567封</span></div>
  79. </div>
  80. <div>
  81. <div class="zaf">
  82. <p>同比</p>
  83. <p><span>34<i>%</i></span><img src="images/up.png"></p>
  84. </div>
  85. </div>
  86. </li>
  87. <li>
  88. <div>
  89. <p><img src="images/icon6.png">字段名称</p>
  90. <div class="barnav"><div class="bar2"><span style="width:50%;"></span></div> <span>24356笔</span></div>
  91. </div>
  92. <div>
  93. <div class="zaf">
  94. <p>同比</p>
  95. <p><span>50<i>%</i></span><img src="images/down.png"></p>
  96. </div>
  97. </div>
  98. </li>
  99. </ul>
  100. </div>
  101. <div class="boxall" style="height: calc(42% - .15rem)">
  102. <div class="alltitle">模块标题</div>
  103. <div class="boxnav" id="echarts3"></div>
  104. </div>
  105. </li>
  106. <li>
  107. <div class="boxall" style="height: calc(20% - .15rem)">
  108. <ul class="row h100 clearfix">
  109. <li class="col-6">
  110. <div class="sqzs h100">
  111. <p>业绩总览</p>
  112. <h1>1938272</h1>
  113. </div>
  114. </li>
  115. <li class="col-6">
  116. <ul class="row h100 clearfix">
  117. <li class="col-4">
  118. <div class="tit01">字段名称</div>
  119. <div class="piebox" id="pe01"></div>
  120. </li>
  121. <li class="col-4">
  122. <div class="tit01">“字段名称</div>
  123. <div class="piebox" id="pe02"></div>
  124. </li>
  125. <li class="col-4">
  126. <div class="tit01">字段名称</div>
  127. <div class="piebox" id="pe03"></div>
  128. </li>
  129. </ul>
  130. </li>
  131. </ul>
  132. </div>
  133. <div class="boxall" style="height: calc(38% - .15rem)">
  134. <div class="boxnav h100" id="echarts1"></div>
  135. </div>
  136. <div class="boxall" style="height: calc(42% - .15rem)">
  137. <div class="alltitle">模块标题 </div>
  138. <div class="boxnav" id="echarts2"></div>
  139. </div>
  140. </li>
  141. <li>
  142. <div class="boxall" style="height: calc(15% - .15rem)">
  143. <ul class="row h100 row1">
  144. <li class="col-4">
  145. <div class="bar1 bar2"><img src="images/icon7.png">
  146. <h3><span>字段名称
  147. </span>251项</h3>
  148. </div>
  149. </li>
  150. <li class="col-4">
  151. <div class="bar1 bar2"><img src="images/icon8.png">
  152. <h3><span>字段名称
  153. </span>34家</h3>
  154. </div>
  155. </li>
  156. <li class="col-4">
  157. <div class="bar1 bar2"><img src="images/icon9.png">
  158. <h3><span>字段名称
  159. </span>150项</h3>
  160. </div>
  161. </li>
  162. </ul>
  163. </div>
  164. <div class="boxall" style="height: calc(43% - .15rem)">
  165. <div class="alltitle">模块标题</div>
  166. <div class=" boxnav" id="lastecharts">
  167. </div>
  168. </div>
  169. <div class="boxall" style="height: calc(42% - .15rem)">
  170. <div class="alltitle">排行榜</div>
  171. <div class=" boxnav paim">
  172. <ul class="h100">
  173. <li>
  174. <span>1</span>
  175. <div class="pmnav">
  176. <p>标题名称标题名称标题名称标题名称</p>
  177. <div class="pmbar"><span style="width:100%"></span><i>500</i></div>
  178. </div>
  179. </li>
  180. <li>
  181. <span>2</span>
  182. <div class="pmnav">
  183. <p>标题名称</p>
  184. <div class="pmbar"><span style="width:92%"></span><i>400</i></div>
  185. </div>
  186. </li>
  187. <li>
  188. <span>3</span>
  189. <div class="pmnav">
  190. <p>标题名称</p>
  191. <div class="pmbar"><span style="width:90%"></span><i>180</i></div>
  192. </div>
  193. </li>
  194. <li>
  195. <span>4</span>
  196. <div class="pmnav">
  197. <p>标题名称</p>
  198. <div class="pmbar"><span style="width:88%"></span><i>160</i></div>
  199. </div>
  200. </li>
  201. <li>
  202. <span>5</span>
  203. <div class="pmnav">
  204. <p>标题名称</p>
  205. <div class="pmbar"><span style="width:86%"></span><i>140</i></div>
  206. </div>
  207. </li>
  208. </ul>
  209. </div>
  210. </div>
  211. </li>
  212. </ul>
  213. </div>
  214. <script>
  215. $(document).ready(function () {
  216. var arr = [];
  217. var max;
  218. $(".paim li i").each(function () {
  219. arr.push($(this).text());
  220. })
  221. //alert(arr)
  222. max = Math.max.apply(null, arr);
  223. $(".paim .pmbar span").each(function () {
  224. var i = $(this).parents("li").index()
  225. w = arr[i] / max * 100;
  226. sw = w.toFixed(0) + '%'
  227. $(this).css({ width: sw })
  228. })
  229. })
  230. </script>
  231. <script type="text/javascript" src="js/echarts.min.js"></script>
  232. <script language="JavaScript" src="js/js.js"></script>
  233. </body>
  234. </html><!doctype html>
  235. <html>
  236. <head>
  237. <meta charset="utf-8">
  238. <title>index</title>
  239. <script type="text/javascript" src="js/jquery.js"></script>
  240. <link rel="stylesheet" href="css/comon0.css">
  241. </head>
  242. <body>
  243. <div class="loading">
  244. <div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
  245. </div>
  246. <div class="head">
  247. <h1>大数据可视化系统数据分析通用模版</h1>
  248. <div class="time" id="showTime">2019年12月05日16时16分54秒</div>
  249. <script>
  250. var t = null;
  251. t = setTimeout(time, 1000);//開始运行
  252. function time() {
  253. clearTimeout(t);//清除定时器
  254. dt = new Date();
  255. var y = dt.getFullYear();
  256. var mt = dt.getMonth() + 1;
  257. var day = dt.getDate();
  258. var h = dt.getHours();//获取时
  259. var m = dt.getMinutes();//获取分
  260. var s = dt.getSeconds();//获取秒
  261. var t = null;
  262. document.getElementById("showTime").innerHTML = y + "年" + Appendzero(mt) + "月" + Appendzero(day) + "日" + Appendzero(h) + "时" + Appendzero(m) + "分" + Appendzero(s) + "秒";
  263. function Appendzero(obj) {
  264. if (obj < 10) return "0" + "" + obj;
  265. else return obj;
  266. }
  267. t = setTimeout(time, 1000); //设定定时器,循环运行
  268. }
  269. </script>
  270. </div>
  271. <div class="mainbox">
  272. <ul class="clearfix">
  273. <li>
  274. <div class="boxall" style="height: calc(15% - .15rem)">
  275. <ul class="row h100 row1">
  276. <li class="col-4">
  277. <div class="bar1"><img src="images/icon1.png">
  278. <h3><span>字段名称</span>200个</h3>
  279. </div>
  280. </li>
  281. <li class="col-4">
  282. <div class="bar1"><img src="images/icon4.png">
  283. <h3><span>字段名称</span>1200个</h3>
  284. </div>
  285. </li>
  286. <li class="col-4">
  287. <div class="bar1"><img src="images/icon5.png">
  288. <h3><span>字段名称
  289. </span>150家</h3>
  290. </div>
  291. </li>
  292. </ul>
  293. </div>
  294. <div class="boxall" style="height: calc(43% - .15rem)">
  295. <ul class="sec h100">
  296. <li>
  297. <div>
  298. <p><img src="images/icon4.png">字段名称</p>
  299. <div class="barnav"><div class="bar2"><span style="width:50%;"></span></div> <span>24356件</span></div>
  300. </div>
  301. <div>
  302. <div class="zaf">
  303. <p>同比</p>
  304. <p><span>34<i>%</i></span><img src="images/up.png"></p>
  305. </div>
  306. </div>
  307. </li>
  308. <li>
  309. <div>
  310. <p><img src="images/icon5.png">字段名称</p>
  311. <div class="barnav"><div class="bar2"><span style="width:50%;"></span></div> <span>243567封</span></div>
  312. </div>
  313. <div>
  314. <div class="zaf">
  315. <p>同比</p>
  316. <p><span>34<i>%</i></span><img src="images/up.png"></p>
  317. </div>
  318. </div>
  319. </li>
  320. <li>
  321. <div>
  322. <p><img src="images/icon6.png">字段名称</p>
  323. <div class="barnav"><div class="bar2"><span style="width:50%;"></span></div> <span>24356笔</span></div>
  324. </div>
  325. <div>
  326. <div class="zaf">
  327. <p>同比</p>
  328. <p><span>50<i>%</i></span><img src="images/down.png"></p>
  329. </div>
  330. </div>
  331. </li>
  332. </ul>
  333. </div>
  334. <div class="boxall" style="height: calc(42% - .15rem)">
  335. <div class="alltitle">模块标题</div>
  336. <div class="boxnav" id="echarts3"></div>
  337. </div>
  338. </li>
  339. <li>
  340. <div class="boxall" style="height: calc(20% - .15rem)">
  341. <ul class="row h100 clearfix">
  342. <li class="col-6">
  343. <div class="sqzs h100">
  344. <p>业绩总览</p>
  345. <h1>1938272</h1>
  346. </div>
  347. </li>
  348. <li class="col-6">
  349. <ul class="row h100 clearfix">
  350. <li class="col-4">
  351. <div class="tit01">字段名称</div>
  352. <div class="piebox" id="pe01"></div>
  353. </li>
  354. <li class="col-4">
  355. <div class="tit01">“字段名称</div>
  356. <div class="piebox" id="pe02"></div>
  357. </li>
  358. <li class="col-4">
  359. <div class="tit01">字段名称</div>
  360. <div class="piebox" id="pe03"></div>
  361. </li>
  362. </ul>
  363. </li>
  364. </ul>
  365. </div>
  366. <div class="boxall" style="height: calc(38% - .15rem)">
  367. <div class="boxnav h100" id="echarts1"></div>
  368. </div>
  369. <div class="boxall" style="height: calc(42% - .15rem)">
  370. <div class="alltitle">模块标题 </div>
  371. <div class="boxnav" id="echarts2"></div>
  372. </div>
  373. </li>
  374. <li>
  375. <div class="boxall" style="height: calc(15% - .15rem)">
  376. <ul class="row h100 row1">
  377. <li class="col-4">
  378. <div class="bar1 bar2"><img src="images/icon7.png">
  379. <h3><span>字段名称
  380. </span>251项</h3>
  381. </div>
  382. </li>
  383. <li class="col-4">
  384. <div class="bar1 bar2"><img src="images/icon8.png">
  385. <h3><span>字段名称
  386. </span>34家</h3>
  387. </div>
  388. </li>
  389. <li class="col-4">
  390. <div class="bar1 bar2"><img src="images/icon9.png">
  391. <h3><span>字段名称
  392. </span>150项</h3>
  393. </div>
  394. </li>
  395. </ul>
  396. </div>
  397. <div class="boxall" style="height: calc(43% - .15rem)">
  398. <div class="alltitle">模块标题</div>
  399. <div class=" boxnav" id="lastecharts">
  400. </div>
  401. </div>
  402. <div class="boxall" style="height: calc(42% - .15rem)">
  403. <div class="alltitle">排行榜</div>
  404. <div class=" boxnav paim">
  405. <ul class="h100">
  406. <li>
  407. <span>1</span>
  408. <div class="pmnav">
  409. <p>标题名称标题名称标题名称标题名称</p>
  410. <div class="pmbar"><span style="width:100%"></span><i>500</i></div>
  411. </div>
  412. </li>
  413. <li>
  414. <span>2</span>
  415. <div class="pmnav">
  416. <p>标题名称</p>
  417. <div class="pmbar"><span style="width:92%"></span><i>400</i></div>
  418. </div>
  419. </li>
  420. <li>
  421. <span>3</span>
  422. <div class="pmnav">
  423. <p>标题名称</p>
  424. <div class="pmbar"><span style="width:90%"></span><i>180</i></div>
  425. </div>
  426. </li>
  427. <li>
  428. <span>4</span>
  429. <div class="pmnav">
  430. <p>标题名称</p>
  431. <div class="pmbar"><span style="width:88%"></span><i>160</i></div>
  432. </div>
  433. </li>
  434. <li>
  435. <span>5</span>
  436. <div class="pmnav">
  437. <p>标题名称</p>
  438. <div class="pmbar"><span style="width:86%"></span><i>140</i></div>
  439. </div>
  440. </li>
  441. </ul>
  442. </div>
  443. </div>
  444. </li>
  445. </ul>
  446. </div>
  447. <script>
  448. $(document).ready(function () {
  449. var arr = [];
  450. var max;
  451. $(".paim li i").each(function () {
  452. arr.push($(this).text());
  453. })
  454. //alert(arr)
  455. max = Math.max.apply(null, arr);
  456. $(".paim .pmbar span").each(function () {
  457. var i = $(this).parents("li").index()
  458. w = arr[i] / max * 100;
  459. sw = w.toFixed(0) + '%'
  460. $(this).css({ width: sw })
  461. })
  462. })
  463. </script>
  464. <script type="text/javascript" src="js/echarts.min.js"></script>
  465. <script language="JavaScript" src="js/js.js"></script>
  466. </body>
  467. </html>

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

  1. HTML 结构:包括标准的文档声明、<html><head><body> 标签。
  2. 字符集和标题:使用 <meta> 标签设置字符集和指定网页标题。
  3. 外部资源引用:引入了多个外部 JavaScript 文件,包括 jQuery 和 ECharts 库,以及自定义的 CSS 文件。
  4. 加载动画:包含一个加载动画,显示在页面加载中。
  5. 实时时间:使用 JavaScript 获取并显示当前时间,放置在页面头部。
  6. 数据展示模块:网页分为四个数据展示模块,每个模块都包括一个模块标题、数据项和图表。

    • 模块1: 包含三个字段名称、图标和数字的数据项,分别显示在三列中。
    • 模块2: 包含三个字段名称、柱状图、同比数据和图标的数据项,分别显示在三列中。
    • 模块3: 包含一个标题和一个图表。
    • 模块4: 包含三个字段名称、图标和数字的数据项,分别显示在三列中。
  7. 饼状图模块:包含一个总览数字和三个饼状图,显示在两列中。
  8. 折线图模块:包含一个标题和一个折线图。
  9. 排行榜模块:包含一个模块标题和一个排行榜,排行榜包括多个项,每个项包括排名、标题名称、柱状图和数字。

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

可视化图表的使用技巧

1、柱状图

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

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

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

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

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

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

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

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

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

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

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

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

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



四,源码

链接:https://pan.baidu.com/s/1Hr4NCuUxbpPbndbw7PjOsQ?pwd=nljy
提取码:nljy

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

请私信作者(v)15135757306

注:非白嫖仅为维护服务器,若想白嫖请CSDN私信我(大概率可能时间忙顾不上回复)

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

发表评论

表情:
评论列表 (有 0 条评论,120人围观)

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

相关阅读