大数据可视化大屏实战项目（17）信用风险定位系统(银行版)大数据可视化面板—HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中）

本文链接：https://blog.csdn.net/m0_63324772/article/details/132700051

大数据可视化大屏实战项目（17）信用风险定位系统(银行版)大数据可视化面板—HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中🐕🐕🐕）

一，项目概览

☞☞☞☞☞☞项目演示链接：http://59.110.22.223:8080/Data/17/

二，运行视频

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

三，部分代码讲解

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<style>
	.tb>table tr:hover{
		background:#0B2A46;
	}
</style>
</head>
<body>

	<div class="wrap">
		<div class="wid_1820">

			<div class="header">
				<p class="tmtext"><span>2017-12-08 &emsp;&emsp;<span>14:39</span></span></p>
				<p><span class="hefont" onclick="toindex()">信用风险定位系统(银行版)</span></p>
				<p><span>用户名<a>[退出]</a></span></p>
			</div>
			<h3 class="title">实时监测-企业名单</h3>
			<div class="content"> <img class="guang" src="img/title.png"/>
				<div class="tb tb_left">
					<h3>AAA</h3>
					<table class="table1">
						<tr class="tb_title"><td>企业名称</td><td>盈利对利息覆盖能力</td><td>流动性还本付能力</td><td>清偿性还本付息能力</td></tr>
						<tr><td>鲁泰纺织股份有限公司</td><td>5.61</td><td>5.76</td><td>1.87<td></tr>
						<tr><td>浙江森马服饰股份有限公司</td><td>5.54</td><td>5.78</td><td>2.60<td></tr>
					</table>
				</div>
				<div class="tb tb_right">
					<h3>AA+</h3>
					<table class="table1">
						<tr class="tb_title"><td>企业名称</td><td>盈利对利息覆盖能力</td><td>流动性还本付能力</td><td>清偿性还本付息能力</td></tr>
						<tr><td>安正时尚集团股份有限公司</td><td>5.58</td><td>5.63</td><td>1.56</td></tr>
						<tr><td>广东柏堡龙股份有限公司</td><td>5.46</td><td>5.56</td><td>5.32</td></tr>
						<tr><td>深圳富安娜家居用品股份有限公司</td><td>5.48</td><td>5.60</td><td>2.19<td></tr>
					</table>
				</div>
				<div style="clear:both"></div>
				<div class="tb tb_left">
					<h3>AA</h3>
					<table class="table1">
						<tr class="tb_title"><td>企业名称</td><td>盈利对利息覆盖能力</td><td>流动性还本付能力</td><td>清偿性还本付息能力</td></tr>
						<tr><td>比音勒芬服饰股份有限公司</td><td>5.37</td><td>5.54</td><td>6.29<td></tr>
						<tr><td>罗莱生活科技股份有限公司</td><td>5.13</td><td>5.47</td><td>1.94<td></tr>
						<tr><td>日播时尚集团股份有限公司</td><td>5.41</td><td>5.46</td><td>1.51<td></tr>
						<tr><td>深圳汇洁集团股份有限公司</td><td>5.33</td><td>5.49</td><td>3.19<td></tr>
						<tr><td>维格娜丝时装股份有限公司</td><td>5.27</td><td>5.49</td><td>5.01<td></tr>
						<tr><td>山东齐悦科技有限公司</td><td>5.42</td><td>5.43</td><td>3.59<td></tr>
					</table>
				</div>
				<div class="tb tb_right">
					<h3>AA-及以下</h3>
					<table class="table1">
						<tr class="tb_title"><td>企业名称</td><td>盈利对利息覆盖能力</td><td>流动性还本付能力</td><td>清偿性还本付息能力</td></tr>
						<tr><td>深圳歌力思服饰股份有限公司</td><td>5.43</td><td>5.25</td><td>1.69<td></tr>
						<tr><td>苏州楚星时尚纺织集团股份有限公司</td><td>5.32</td><td>5.03</td><td>2.59<td></tr>
						<tr><td>探路者控股集团股份有限公司</td><td>5.38</td><td>5.21</td><td>3.16<td></tr>
						<tr><td>仙宜岱股份有限公司</td><td>5.29</td><td>5.17</td><td>1.99<td></tr>
						<tr><td>浙江棒杰数码针织品股份有限公司</td><td>5.21</td><td>5.00</td><td>2.77<td></tr>
						<tr><td>浙江红蜻蜓鞋业股份有限公司</td><td>5.29</td><td>5.16</td><td>2.14<td></tr>
						<tr><td>广东天创时尚鞋业股份有限公司</td><td>5.38</td><td>5.36</td><td>3.82<td></tr>
						<tr><td>杭州维欧艾丝绸股份有限公司</td><td>5.49</td><td>5.27</td><td>3.68<td></tr>
						<tr><td>金发拉比妇婴童用品股份有限公司</td><td>5.41</td><td>5.39</td><td>5.49<td></tr>
						<tr><td>九牧王股份有限公司</td><td>5.42</td><td>12</td><td>2.91<td></tr>
					</table>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
<script src="libs/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
<script>
	$(".tb>table tr").click(function(){
		if($(this).find("td").eq(0).html() == "山东齐悦科技有限公司"){
			window.location.href = "sanlian.html";
		}
		
	});
</script>

这段HTML代码是一个基本的网页结构，它包括了HTML、CSS和JavaScript部分，用于创建一个网页，其中包含了一些表格和交互功能。下面是代码的解释：

<!DOCTYPE html>：这是文档类型声明，指示这是一个HTML5文档。
<html>：HTML文档的根元素，包含了整个网页的内容。
<head>：头部部分，通常包含了文档的元数据和链接到外部资源的标签。
<meta charset="utf-8" />：这个元标签指定了文档的字符编码为UTF-8，确保正确的文本显示。
<title>：设置网页标题，这里是空的，可以在后面填写具体的标题。
<link rel="stylesheet" type="text/css" href="css/index.css">：链接到一个外部的CSS样式表文件（index.css），用于定义网页的样式。
<style>：内联样式表，用于定义一些特定的样式规则。
<body>：HTML文档的主体部分，包含了实际的网页内容。
<div class="wrap">：一个包裹整个网页内容的div容器，可能用于布局目的。
<div class="wid_1820">：另一个div容器，可能用于限定网页宽度。
<div class="header">：网页的头部部分，包含一些文本和链接。
<h3 class="title">：一个标题级别为3的标题，显示在网页中。
<div class="content">：内容部分的容器，包含了一张图片和表格。
<div class="tb tb_left"> 和 <div class="tb tb_right">：两个表格容器，分别用于左侧和右侧的表格展示。
<table class="table1">：一个数据表格，包含企业信息。
JavaScript部分：包括了一段JavaScript代码，它通过jQuery库来实现一个交互功能。当用户点击表格行（<tr>）时，检查第一列（企业名称）的内容，如果内容是"山东齐悦科技有限公司"，则会跳转到"sanlian.html"页面。

总的来说，这段代码创建了一个包含企业信息的网页，通过CSS和JavaScript增加了一些样式和交互功能。在实际应用中，需要填充具体的数据和完善链接的目标页面。

可视化图表的使用技巧

1、柱状图

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

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

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

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

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

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

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

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

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

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

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

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

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