大数据可视化大屏实战项目（3）图书销售展示全国地图可视化---HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中🐕🐕🐕）

一，项目概览

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

二，运行视频

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

三，部分代码讲解

home.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/four.css"><link rel="stylesheet" href="./fonts/iconfont.css"><!-- <script src="js/echarts.min.js"></script> --><script src="js/jquery.min.js"></script><script src="js/macarons.js"></script><!-- <script src="js/china.js"></script> --><script src="js/countUp.js"></script>
</head><body><ul class="nav"><li class="drop-down"><a href="#"></a><ul class="drop-down-content"><li><a href="./home.html">自动切换</a></li><li><a href="./index.html">第一屏</a></li><li><a href="./second.html">第二屏</a></li><li><a href="./third.html">第三屏</a></li><li><a href="./four.html?index=0">第四屏</a></li></ul></li></ul><div class="first-screen root-wrap"><header><img src="./img/cnonix.png" /><div class="title_img"><img src="img/title_left_img.png" alt=""></div><!-- <span class="month-tip">2017年1月</span> --></header><div class="main clearfix"><!-- 同类图书 --><div class="aside-left fl"><h3>同类图书</h3><ul class="clearfix"></ul></div><div class="middle_con fl"><div class="middle_top"><div class="con_left fl"></div><div class="con_right fl clearfix"><dl class="clearfix"><dt>图书标签</dt><dd class="clearfix"><ul class="bookLabel clearfix"></ul></dd></dl><dl class="clearfix"><dt class="clearfix">主题词</dt><dd class="clearfix"><ul class="themaWords clearfix"></ul></dd></dl></div><div class="con_link"><h3>内容提要</h3><div class="link_title  link_con"><!-- 钱锺书所著的《围城》是一幅栩栩如生的世井百态图，人生的酸甜苦辣千般滋味均在其中得到了淋漓尽致的体现。钱钟书先生将自己的语言天才并入极其渊博的知识，再添加上一些讽刺主义的幽默调料，以一书而定江山。《围城》显示给我们一个真正的聪明人是怎样看人生，又怎样用所有作家都必得使用的文字来表述自己的“观”和“感”的。 --></div></div><div class="con_link"><h3>本书目录</h3><ul class="link_ul"><!-- <li>1.序</li><li>2.围城</li><li>3.围城</li><li>4.记钱钟书与《围城》——杨绛</li> --></ul></div><div class="con_link"><h3>作者介绍</h3><div class="link_title link_author"></div></div></div><div class="middle_button"><div class="button_left"><h3>购买推荐</h3><div class="button_con"><div class="container purchase claefix"></div></div></div><div class="button_right"><h3>借阅推荐</h3><div class="button_con"><div class="container jieyue claefix"></div></div></div></div></div><div class="aside-right clearfix fl"><div class="con_top clearfix"><h3>图书评论</h3><div class="aside_con clearfix"></div></div></div></div><div class="main-bottom"><span class="line1"></span><span class="line2"></span><span class="line3"></span></div></div><script src="js/four.js"></script>
</body></html>

这是一个HTML页面的源代码，它描述了一个网页的结构和内容。我将为您逐行解释这段HTML代码的主要部分。

<!DOCTYPE html>: 这是HTML文档类型声明，指示浏览器解释该文档为HTML5。
<html lang="en">: 这是HTML文档的根元素，指定了文档的语言为英语。
<head>: 这是文档的头部元素，包含了一些关于文档的元信息，例如字符编码、样式表和脚本引用等。
- <meta charset="UTF-8">: 指定了文档的字符编码为UTF-8，以支持多语言字符集。
- <meta http-equiv="X-UA-Compatible" content="ie=edge">: 指示浏览器使用最新的IE浏览器版本来渲染页面。
- <link rel="stylesheet" href="css/four.css">: 引入名为 "four.css" 的外部样式表，用于页面的样式。
- <link rel="stylesheet" href="./fonts/iconfont.css">: 引入名为 "iconfont.css" 的外部样式表，用于图标字体。
- <script src="js/jquery.min.js"></script>: 引入名为 "jquery.min.js" 的JavaScript库文件，这是jQuery库，用于处理网页交互。
- <script src="js/macarons.js"></script>: 引入名为 "macarons.js" 的JavaScript文件。
- <script src="js/countUp.js"></script>: 引入名为 "countUp.js" 的JavaScript文件。
<body>: 这是HTML文档的主体部分，包含了页面的实际内容。
- <ul class="nav">: 一个无序列表，通常用于创建导航菜单。
- <div class="first-screen root-wrap">: 页面的主要内容容器，通常包含网站的标题和主要内容。
  - <header>: 页面的页头，包含了一张图像和标题图像。
  - <div class="main clearfix">: 页面的主要内容区域，包括左侧的同类图书列表、中间的图书信息以及右侧的图书评论。
    - 左侧的同类图书列表和右侧的图书评论部分都是空的，没有具体的内容。
    - 中间的图书信息包括图书标签、主题词、内容提要、本书目录、作者介绍、购买推荐和借阅推荐等部分。
- <div class="main-bottom">: 页面底部的装饰元素，包括三条横线。
- <script src="js/four.js"></script>: 引入名为 "four.js" 的JavaScript文件，用于页面的交互功能。

这段HTML代码主要描述了一个包含图书信息的网页结构，但是具体的内容都是空的，需要通过JavaScript来动态加载或填充。这个页面似乎是一个图书详情页的模板，包括图书的相关信息和评论等。如果您有关于特定部分或功能的具体问题，可以提出来，我将尽力提供更详细的解释。

可视化图表的使用技巧

1、柱状图

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

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

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

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

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

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

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

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

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

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

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

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

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