大数据可视化大屏实战项目（15）个人发稿数量统计可视化大屏幕（博客，写作）【支持移动端可视化自适应】—HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中🐕🐕🐕）
一，项目概览
☞☞☞☞☞☞项目演示链接：http://59.110.22.223:8080/Data/15/
☞☞☞☞☞☞项目演示链接：http://59.110.22.223:8080/Data/15/
二，运行视频
☞☞☞☞☞☞B站演示视频：
三，部分代码讲解
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/base.css" rel="stylesheet">
<title>大屏展示</title>
</head>
<body>
<div class="container-fluid container-fluid-s">
<div class="row">
<div class="col-md-12 col-lg-6 mrbt">
<div class="totalbox">
<ul class="nav nav-pills totaltitle" role="tablist">
<li class="fl"><p>当天实时发稿量</p></li>
</ul>
<div class="totaltem">
<div class="col-md-12 total hbule">
<span class="name">总发稿量</span>
<span class="number">
<a href="">3</a>
<a href="">8</a>
<a href="">9</a>
<a href="">1</a>
</span>
<span class="name">条</span>
</div>
</div>
<div class="row" style="padding: 0 2vw">
<div class="col-md-2">
<div class="column">
<p>宏观经济</p>
<div class="purple"><span class="bold">1292</span>条</div>
</div>
</div>
<div class="col-md-2">
<div class="column">
<p>资本市场</p>
<div class="grn"><span class="bold">892</span>条</div>
</div>
</div>
<div class="col-md-2">
<div class="column">
<p>货币市场</p>
<div class="bule"><span class="bold">590</span>条</div>
</div>
</div>
<div class="col-md-2">
<div class="column">
<p>外汇市场</p>
<div class="yel"><span class="bold">970</span>条</div>
</div>
</div>
<div class="col-md-2">
<div class="column">
<p>债券市场</p>
<div class="org"><span class="bold">1002</span>条</div>
</div>
</div>
<div class="col-md-2">
<div class="column">
<p>大宗商品</p>
<div class="ybule"><span class="bold">692</span>条</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 mrbt">
<div class="totalbox">
<!-- Nav tabs -->
<ul class="nav nav-pills totaltitle" role="tablist">
<li class="fl"><p>个人发稿量排行</p></li>
<li role="presentation" class="fr"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">月</a></li>
<li role="presentation" class="active fr"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">天</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div id="container1" style="width: 100%;height: 100%;"></div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div id="container2" style="width: 100%;height: 400px;"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 mrbt">
<div class="totalbox">
<!-- Nav tabs -->
<ul class="nav nav-pills totaltitle" role="tablist">
<li class="fl"><p>建稿类型统计图</p></li>
<li role="presentation" class="active fr"><a href="#jglx" aria-controls="jglx" role="tab" data-toggle="tab">天</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="jglx">
<div id="jglxchart" style="width: 100%;height: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-3 mrbt">
<div class="totalbox">
<!-- Nav tabs -->
<ul class="nav nav-pills totaltitle" role="tablist">
<li class="fl"><p>各栏目发稿量趋势图</p></li>
<li role="presentation" class="active fr"><a href="#qst-month" aria-controls="qst-month" role="tab" data-toggle="tab">月</a></li>
<li role="presentation" class=" fr"><a href="#qst-day" aria-controls="qst-day" role="tab" data-toggle="tab">天</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="qst-month">
<div id="qst-monthchart" style="width: 100%;height: 100%;"></div>
</div>
<div role="tabpanel" class="tab-pane" id="qst-day">
<div id="qst-daychart" style="width: 100%;height: 100%;"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 mrbt">
<div class="totalbox">
<!-- Nav tabs -->
<ul class="nav nav-pills totaltitle" role="tablist">
<li class="fl"><p>人机发稿量占比</p></li>
<li role="presentation" class="fr"><a href="#rj-month" aria-controls="qst-month" role="tab" data-toggle="tab">月</a></li>
<li role="presentation" class="active fr"><a href="#rj-day" aria-controls="qst-day" role="tab" data-toggle="tab">天</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="rj-month">
<div id="rj-monthchart" style="width: 100%;height: 100%;"></div>
</div>
<div role="tabpanel" class="tab-pane active" id="rj-day">
<div id="rj-daychart" style="width: 100%;height: 100%;"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 mrbt">
<div class="totalbox">
<!-- Nav tabs -->
<ul class="nav nav-pills totaltitle" role="tablist">
<li class="fl"><p>各栏目发稿量分布图</p></li>
<li role="presentation" class="active fr"><a href="#fbt-month" aria-controls="qst-month" role="tab" data-toggle="tab">月</a></li>
<li role="presentation" class=" fr"><a href="#fbt-day" aria-controls="qst-day" role="tab" data-toggle="tab">天</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="fbt-month">
<div id="fbt-monthchart" style="width: 100%;height: 100%;"></div>
</div>
<div role="tabpanel" class="tab-pane" id="fbt-day">
<div id="fbt-daychart" style="width: 100%;height: 100%;"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 mrbt">
<div class="totalbox">
<!-- Nav tabs -->
<ul class="nav nav-pills totaltitle" role="tablist">
<li class="fl"><p>建稿类型统计图</p></li>
<li role="presentation" class="active fr"><a href="#zxlx" aria-controls="zxlx" role="tab" data-toggle="tab">天</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="zxlx">
<div id="zxlxchart" style="width: 100%;height: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="js/bootstrap.js/"></script>
<!--<script src="js/highcharts.js"></script>-->
<script src="js/oldie.js"></script>
<script src="js/highcharts-zh_CN.js"></script>
<script src="js/base.js"></script>
<script type="text/javascript">
// var chartheigh = $('.totalbox').height();
// console.log("div高度为："+chartheigh);
</script>
</body>
</html>
这段代码是一个HTML页面，它用于创建一个网页，其中包含了一些布局和交互元素，主要用于展示数据和图表。下面是对代码的详细解释：
-
<!DOCTYPE html>: 这是文档类型声明，指明了这是一个HTML5文档。 -
<html lang="zh-CN">: 这是HTML文档的开始标签，指定了文档的语言为中文。 -
<head>: 这是HTML文档的头部，通常包含一些元数据和引用外部资源的信息。-
<meta charset="utf-8">: 指定文档的字符编码为UTF-8，以支持中文字符和其他特殊字符。 -
<meta http-equiv="X-UA-Compatible" content="IE=edge">: 指定了浏览器的渲染模式为最新的IE引擎。 -
<meta name="viewport" content="width=device-width, initial-scale=1">: 定义了视口的设置，以确保网页在移动设备上正确显示。 -
<link href="css/bootstrap.min.css" rel="stylesheet">: 引用了Bootstrap框架的CSS文件，用于页面样式。 -
<link href="css/base.css" rel="stylesheet">: 引用了自定义的CSS文件，用于页面的自定义样式。 -
<title>大屏展示</title>: 设置了网页的标题为"大屏展示"。
-
-
<body>: 这是HTML文档的主体部分，包含了页面的实际内容。-
<div class="container-fluid container-fluid-s">: 创建一个具有container-fluid类的<div>容器，用于包装页面内容。这个容器是用于响应式设计的，它会自动适应不同屏幕尺寸。 -
在
<div class="container-fluid container-fluid-s">内部，有一系列的<div>元素，每个都包含一些内容或图表。这些元素是网页的主要内容区域。 -
在页面中有多个
<ul>元素，它们用于创建导航菜单，其中包括标签页切换和各种图表的选择。 -
在页面底部引入了一些JavaScript文件，用于处理页面的交互和图表的绘制。
-
总体来说，这段HTML代码定义了一个具有响应式设计的网页，包含了多个标签页，每个标签页中都包含不同类型的数据展示和图表。页面使用了Bootstrap框架和Highcharts图表库来实现样式和图表功能。用户可以在不同的标签页之间切换，以查看不同的数据和图表展示。
可视化图表的使用技巧
1、柱状图
柱状图中的颜色尽量不要超过3种。
柱状图柱子间的宽度和间隙要是适当。住在太窄，用户的视觉可能会集中在两个柱子之间的负空间
对多个数据系列排序时，最好复合一定的逻辑，用直观的方式引导用户更好的查看数据，此时可以通过升序和降序排列。
2、折线图
折线图连接各点可以使用直线和曲线，这样更美观，数据展示更加清晰
折线的颜色要清晰，尽量不要使用与背景色和坐标轴相近的颜色
折线图中的线条尽量不要超过4条，过多的线条会导致界面混乱，无法阅读。
3、饼图
饼图适合用来展示单一维度数据的占比，要求其数值没有零或者负值，并确保各个分块占比总和为100%。
饼图不适合用于精确数据的比较，因此当各类别数据占比相似时，很难分辨出哪个类别占比比较大。
大多数人的视觉习惯是按照顺时针自上而下的顺序去观察，因此在绘制饼图时建议从12点钟开始沿着顺时针右边的第一个分块绘制饼图最大的数据分块，这样可以有效地强调其重要性
4、散点图
如果一个散点图没有显示变量的任何关系，那么或许该图表类型不是次数据的最佳选择
散点图只有在足够多的数据点并且数据间有相关性时，才能呈现很好的结果。
如果数据包含不同系列，可以给不同系列使用不同的颜色
数据功能图介绍
在大数据的可视化图中，按照数据的作用和功能可以把图分为比较类图、分布类图、流程类图、地图类图、占比类图、区间类图、关联类图、时间类图和趋势类图等。
1、比较类图
比较类图可视化的方法通常是显示值与值之间的不同和相似之处，使用图形的长度、宽度、位置、面积、角度和颜色来比较数值的大小，通常用于展示不同分类间的数值对比一级不同时间点的数据对比。常见的比较类图主要有柱状图、双向柱状图、气泡图、子弹图、色块图、漏斗图和直方图等
2、分布类图
分布类图可视化的方法通常是显示频率，将数据分散在一个区间或分组，并使用图形的为、大小、颜色的渐变程度类表现数据的分布。分布类图通常用于展示连续数据上数值的分布情况。常见的分布类图主要有箱型图、热力图、散点图、分布曲线图、色块图和直方图
3、流程类图
流程类图可视化的方法通常是显示流程流转和流程流量。一般流程都会呈现出多个环节，每个环节之间会有相应的流量关系，因此这类图形可以很好的表示这些流量关系。常见的流程图主要有漏斗图和桑基图
4、地图类图
地图类图可视化的方法是显示地理区域上的数据，并在显示是使用地图作为背景，通过图形的位置来表现数据的地理位置。地图类图通常用来展示数据在不同地理区域上的分布情况。常见的地图类图主要有待气泡的地图和统计地图
5、占比类图
占比类图可视化的范式是显示同一维度上的占比关系。常见的占比类图主要有换图、马赛克图、堆叠面积图、堆叠柱状图和矩形树图
6、区间类图
区间类图可视化的方法是显示同一维度上值的上限和下限之间的差异。区间类图使用图形的大小和位置表示数值的上限和下限，通常用于表示数据在某一分类（时间点）上的最大值和最小值。常见的区间类图主要有仪表盘图和堆叠面积图
7、关联类图
关联类图可视化的方法显示数据之间的相互关系。关联类图使用图形的嵌套和位置表示数据之间的关系，通常用于表示数据之间的前后顺序、父子关系和相关性。常见的关联类图主要有和弦图、桑基图、矩阵树图、树状图和韦恩图
8、时间类图
时间类图可视化的方法显示以时间为特定维度的数据。时间类图使用图形的位置表现出数据在时间深的房补，通常用于表现数据在时间维度上的趋势和变化。常见的实践类图主要有面截图、K线图、卡吉图和螺旋图
9、趋势类图
趋势类图可视化的方式分析数据的变化趋势，趋势类图使用图形的位置表现出数据在连续区域上的分布，通常展示数据在连续区域上的大小变化的规律。常见的趋势类图主要有面积图、K线图、折线图和回归曲线图
四，源码
链接：https://pan.baidu.com/s/1hOdRY3TTWnjzafYBBAADKA
提取码：
创作不易，项目已加密，有偿（—5r—，可修改页面，做实验报告，代码讲解，待上服务器等…）
请私信作者（v）15135757306
注：非白嫖仅为维护服务器，若想白嫖请CSDN私信我（大概率可能时间忙顾不上回复）
若侵权请私信作者下架博客
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
