大数据可视化大屏实战项目（10）无线网络大数据平台—HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中🐕🐕🐕）

一，项目概览

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

二，运行视频

☞☞☞☞☞☞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"><title>物流大数据平台</title><link rel="stylesheet" href="../css/bootstrap.css"><link rel="stylesheet" href="../css/base.css"><link rel="stylesheet" href="../css/style.css"><style>.t_btn {margin-top: 20px;}.t_btn li {display: inline-block;margin: 0 0px 20px 20px;}.t_btn button,.t_a {display: inline-block;padding: 10px 5px;width: 80px;border-style: solid;border-width: 0;cursor: pointer;font-family: inherit;font-weight: bold;line-height: normal;margin: 0 0 0.5em 0;position: relative;text-decoration: none;text-align: center;display: inline-block;font-size: 1em;background-color: #2C58A6;border-color: #0263ff;color: white;box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2) inset !important;margin-right: 0.5em;border-radius: 4px;}.t_height {line-height: 80px;position: absolute;right: 28px;top: 0;}</style>
</head><body><!--header--><div class="header"><div class="bg_header"><div class="header_nav fl t_title">物流大数据服务平台</div> </div><div class="header_nav fl"></div><div class="header_myself fr t_height"><a class="t_a" href="../index.html">返回 &nbsp;</a></div></div><!--main--><div class="data_content"><div class="data_main"><div class="main_left fl"><div class="left_1"><ul class="t_btn"><li><button class="t_btn0">中国地图</button></li><li><button class="t_btn3">中国铁路</button></li><li><button class="t_btn14">GPS</button></li><li><button class="t_btn13">湖南省</button></li><li><button class="t_btn2">湖南飞机场</button></li><li><button class="t_btn4">湖南铁路</button></li><li><button class="t_btn1">湖南公路</button></li><li><button class="t_btn6">交通就业量</button></li><li><button class="t_btn7">湖南货运量</button></li><li><button class="t_btn5">各市货运量</button></li><li><button class="t_btn8">货物周转量</button></li><li><button class="t_btn9">运输线长度</button></li><li><button class="t_btn10">湖南业务量</button></li><li><button class="t_btn11">营运汽车</button></li><li><button class="t_btn12">公共交通</button></li></ul></div><div class="left_2" style="display:none"><div class="main_title">湖南省地图</div></div></div><div class="main_center fl"><div class="center_text t_cos0"><!--左上边框--><div class="t_line_box"><i class="t_l_line"></i> <i class="l_t_line"></i> </div> <!--右上边框--><div class="t_line_box"><i class="t_r_line"></i> <i class="r_t_line"></i> </div> <!--左下边框--><div class="t_line_box"><i class="l_b_line"></i> <i class="b_l_line"></i> </div> <!--右下边框--><div class="t_line_box"><i class="r_b_line"></i> <i class="b_r_line"></i> </div> <div class="main_title">中国地图</div><div id="chart_map" style="width:100%;height:778px;"></div></div><div class="center_text t_cos1" style="display:none"><!--左上边框--><div class="t_line_box"><i class="t_l_line"></i> <i class="l_t_line"></i> </div> <!--右上边框--><div class="t_line_box"><i class="t_r_line"></i> <i class="r_t_line"></i> </div> <!--左下边框--><div class="t_line_box"><i class="l_b_line"></i> <i class="b_l_line"></i> </div> <!--右下边框--><div class="t_line_box"><i class="r_b_line"></i> <i class="b_r_line"></i> </div><div class="main_title">湖南省高速公路</div><div id="chart_2" class="chart" style="width:100%;height:778px;"></div></div><div class="center_text t_cos2" style="display:none"><!--左上边框--><div class="t_line_box"><i class="t_l_line"></i> <i class="l_t_line"></i> </div> <!--右上边框--><div class="t_line_box"><i class="t_r_line"></i> <i class="r_t_line"></i> </div> <!--左下边框--><div class="t_line_box"><i class="l_b_line"></i> <i class="b_l_line"></i> </div> <!--右下边框--><div class="t_line_box"><i class="r_b_line"></i> <i class="b_r_line"></i> </div><div class="main_title">湖南省飞机场</div><div id="chart_0" class="chart" style="width:100%;height:778px;"></div></div><div class="center_text t_cos3" style="display:none"><!--左上边框--><div class="t_line_box"><i class="t_l_line"></i> <i class="l_t_line"></i> </div> <!--右上边框--><div class="t_line_box"><i class="t_r_line"></i> <i class="r_t_line"></i> </div> <!--左下边框--><div class="t_line_box"><i class="l_b_line"></i> <i class="b_l_line"></i> </div> <!--右下边框--><div class="t_line_box"><i class="r_b_line"></i> <i class="b_r_line"></i> </div><div class="main_title">中国铁路</div><div id="chart_4" class="chart" style="width:100%;height:778px;"></div></div><div class="center_text t_cos4" style="display:none"><!--左上边框--><div class="t_line_box"><i class="t_l_line"></i> <i class="l_t_line"></i> </div> <!--右上边框--><div class="t_line_box"><i class="t_r_line"></i> <i class="r_t_line"></i> </div> <!--左下边框--><div class="t_line_box"><i class="l_b_line"></i> <i class="b_l_line"></i> </div> <!--右下边框--><div class="t_line_box"><i class="r_b_line"></i> <i class="b_r_line"></i> </div><div class="main_title">湖南货运量收入</div><div id="chart_1" class="chart" style="width:100%;height:778px;"></div></div><div class="center_text t_cos5" style="display:none"><!--左上边框--><div class="t_line_box"><i class="t_l_line"></i> <i class="l_t_line"></i> </div> <!--右上边框--><div class="t_line_box"><i class="t_r_line"></i> <i class="r_t_line"></i> </div> <!--左下边框--><div class="t_line_box"><i class="l_b_line"></i> <i class="b_l_line"></i> </div> <!--右下边框--><div class="t_line_box"><i class="r_b_line"></i> <i class="b_r_line"></i> </div><div class="main_title">交通就业人员</div><div id="chart_3" class="chart" style="width:100%;height:778px;"></div></div><div class="center_text t_cos6" style="display:none"><!--左上边框--><div class="t_line_box"><i class="t_l_line"></i> <i class="l_t_line"></i> </div> <!--右上边框--><div class="t_line_box"><i class="t_r_line"></i> <i class="r_t_line"></i> </div> <!--左下边框--><div class="t_line_box"><i class="l_b_line"></i> <i class="b_l_line"></i> </div> <!--右下边框--><div class="t_line_box"><i class="r_b_line"></i> <i class="b_r_line"></i> </div><div class="main_title">湖南省铁路</div><div id="chart_6" class="chart" style="width:100%;height:778px;"></div></div><div class="center_text t_cos7" style="display:none"><!--左上边框--><div class="t_line_box"><i class="t_l_line"></i> <i class="l_t_line"></i> </div> <!--右上边框--><div class="t_line_box"><i class="t_r_line"></i> <i class="r_t_line"></i> </div> <!--左下边框--><div class="t_line_box"><i class="l_b_line"></i> <i class="b_l_line"></i> </div> <!--右下边框--><div class="t_line_box"><i class="r_b_line"></i> <i class="b_r_line"></i> </div><div class="main_title">湖南总货运量</div><div id="chart_7" class="chart" style="width:100%;height:778px;"></div></div><div class="center_text t_cos8" style="display:none"><!--左上边框--><div class="t_line_box"><i class="t_l_line"></i> <i class="l_t_line"></i> </div> <!--右上边框--><div class="t_line_box"><i class="t_r_line"></i> <i class="r_t_line"></i> </div> <!--左下边框--><div class="t_line_box"><i class="l_b_line"></i> <i class="b_l_line"></i> </div> <!--右下边框--><div class="t_line_box"><i class="r_b_line"></i> <i class="b_r_line"></i> </div><div class="main_title">湖南货物周转量</div><div id="chart_8" class="chart" style="width:100%;height:778px;"></div></div><div class="center_text t_cos9" style="display:none"><!--左上边框--><div class="t_line_box"><i class="t_l_line"></i> <i class="l_t_line"></i> </div> <!--右上边框--><div class="t_line_box"><i class="t_r_line"></i> <i class="r_t_line"></i> </div> <!--左下边框--><div class="t_line_box"><i class="l_b_line"></i> <i class="b_l_line"></i> </div> <!--右下边框--><div class="t_line_box"><i class="r_b_line"></i> <i class="b_r_line"></i> </div><div class="main_title">湖南运输线长度</div><div id="chart_9" class="chart" style="width:100%;height:778px;"></div></div><div class="center_text t_cos10" style="display:none"><!--左上边框--><div class="t_line_box"><i class="t_l_line"></i> <i class="l_t_line"></i> </div> <!--右上边框--><div class="t_line_box"><i class="t_r_line"></i> <i class="r_t_line"></i> </div> <!--左下边框--><div class="t_line_box"><i class="l_b_line"></i> <i class="b_l_line"></i> </div> <!--右下边框--><div class="t_line_box"><i class="r_b_line"></i> <i class="b_r_line"></i> </div><div class="main_title">湖南业务量</div><div id="chart_10" class="chart" style="width:100%;height:778px;"></div></div><div class="center_text t_cos11" style="display:none"><!--左上边框--><div class="t_line_box"><i class="t_l_line"></i> <i class="l_t_line"></i> </div> <!--右上边框--><div class="t_line_box"><i class="t_r_line"></i> <i class="r_t_line"></i> </div> <!--左下边框--><div class="t_line_box"><i class="l_b_line"></i> <i class="b_l_line"></i> </div> <!--右下边框--><div class="t_line_box"><i class="r_b_line"></i> <i class="b_r_line"></i> </div><div class="main_title">湖南公路营运</div><div id="chart_11" class="chart" style="width:100%;height:778px;"></div></div><div class="center_text t_cos12" style="display:none"><!--左上边框--><div class="t_line_box"><i class="t_l_line"></i> <i class="l_t_line"></i> </div> <!--右上边框--><div class="t_line_box"><i class="t_r_line"></i> <i class="r_t_line"></i> </div> <!--左下边框--><div class="t_line_box"><i class="l_b_line"></i> <i class="b_l_line"></i> </div> <!--右下边框--><div class="t_line_box"><i class="r_b_line"></i> <i class="b_r_line"></i> </div><div class="main_title">湖南城市交通</div><div id="chart_12" class="chart" style="width:100%;height:778px;"></div></div><div class="center_text t_cos13" style="display:none"><!--左上边框--><div class="t_line_box"><i class="t_l_line"></i> <i class="l_t_line"></i> </div> <!--右上边框--><div class="t_line_box"><i class="t_r_line"></i> <i class="r_t_line"></i> </div> <!--左下边框--><div class="t_line_box"><i class="l_b_line"></i> <i class="b_l_line"></i> </div> <!--右下边框--><div class="t_line_box"><i class="r_b_line"></i> <i class="b_r_line"></i> </div><div class="main_title">湖南省地图</div><div id="chart_13" class="chart" style="width:100%;height:778px; cursor: pointer;"></div></div><div class="center_text t_cos14" style="display:none"><!--左上边框--><div class="t_line_box"><i class="t_l_line"></i> <i class="l_t_line"></i> </div> <!--右上边框--><div class="t_line_box"><i class="t_r_line"></i> <i class="r_t_line"></i> </div> <!--左下边框--><div class="t_line_box"><i class="l_b_line"></i> <i class="b_l_line"></i> </div> <!--右下边框--><div class="t_line_box"><i class="r_b_line"></i> <i class="b_r_line"></i> </div><div class="main_title">GPS</div><div id="chart_14" class="chart" style="width:100%;height:778px; cursor: pointer;"></div></div></div></div></div></body><script src="../js/jquery-2.2.1.min.js"></script><script src="../js/bootstrap.min.js"></script><script src="../js/common.js"></script><script src="http://api.map.baidu.com/api?v=2.0&ak=dApOtvB5E3x6byHpUGHbRF1fxctCBdjw"></script><script src="../js/echarts.min.js"></script><script src="../js/dataTool.js"></script><script src="../js/base.js"></script><script src="../js/china.js"></script><script src="../js/hunan.js"></script><script src="../js/bmap.js"></script><script src="../js/echarts-all.js"></script>
</html>

这段HTML代码构建了一个网页，它主要用于显示物流大数据服务平台的内容。让我更详细地解释每个部分的作用和功能：

<!DOCTYPE html> 声明了HTML5文档类型，表示这是一个HTML5页面。
<html lang="zh-CN"> 定义了HTML文档的根元素，指定文档的语言为简体中文。
<head> 部分包含了一些关于文档的元信息和页面的标题，还有样式表的链接。
- <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"> 配置了移动设备的视口，确保页面在不同设备上正确呈现。
- <title>物流大数据平台</title> 设置了页面的标题为"物流大数据平台"。
- <link> 元素引入了外部CSS样式表，包括了Bootstrap框架和自定义样式表，用于美化页面的外观。
<style> 部分包含了内联的CSS样式，用于定义页面中的一些元素的样式。这些样式定义了按钮、标题、文本的外观和排列方式。
<body> 部分包含了页面的实际内容，分为以下几个部分：
- <div class="header">：头部区域，包含了网站的标题 “物流大数据服务平台”。
- <div class="data_content">：数据内容区域，用于显示各种数据图表。
  - 在数据内容区域中，有一个左侧的主要内容区域和右侧的辅助内容区域。
  - 左侧的主要内容区域包含了多个数据图表，每个图表都有一个独特的样式类（例如 t_cos0、t_cos1 等），这些类会在JavaScript中用于切换显示不同的图表。
  - 图表的数据和样式由后面引入的JavaScript文件和ECharts库来处理。
  - 右侧的辅助内容区域用于显示地图图表的标题。
在 <script> 标签中引入了多个外部JavaScript文件，这些文件用于实现页面的交互、地图显示和数据可视化。其中包括了jQuery、Bootstrap、ECharts、百度地图API等库，以及自定义的JavaScript文件（例如 common.js、base.js、china.js 等）。

总结：这个HTML页面是一个包含了多个数据图表和样式的物流大数据服务平台的网页。它使用HTML和CSS构建了页面的结构和样式，使用JavaScript实现了数据图表的交互和显示。页面通过外部库和自定义的JavaScript文件来实现不同的功能。如果你需要更详细的解释或有具体的问题，可以提出。

可视化图表的使用技巧

1、柱状图

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

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

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

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

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

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

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

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

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

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

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

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

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