Document

大数据可视化大屏实战项目（11）湖南大数据可视化平台（土地管理，交易额度）—HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中）

2023-09-10
dfer
358
信息可视化 html css 数据分析 javascript 前端大数据 CSDN

大数据可视化大屏实战项目（11）湖南大数据可视化平台（土地管理，交易额度）—HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中🐕🐕🐕）

一，项目概览

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

二，运行视频

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

三，部分代码讲解

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>湖南省</title>
</head>
<style>
  .highcharts-credits {
    display: none;
  }
  .highcharts-legend {
    display: none;
  }
</style>
<body><div id="map" style="width:800px;height: 500px;"></div>
<script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
<script src="https://data.jianshukeji.com/geochina/hunan.js"></script>
<script>
// 随机数据
var data = [{"name":"长沙","value":42},{"name":"株洲","value":81},{"name":"湘潭","value":94},{"name":"衡阳","value":8},{"name":"邵阳","value":67},{"name":"岳阳","value":38},{"name":"常德","value":7},{"name":"张家界","value":9},{"name":"益阳","value":77},{"name":"郴州","value":78},{"name":"永州","value":17},{"name":"怀化","value":83},{"name":"娄底","value":23},{"name":"湘西","value":75}];
// 初始化图表
var map = new Highcharts.Map('map', {
  title: {
    text: '湖南省'
  },
  colorAxis: {
    min: 0,
    minColor: 'rgb(255,255,255)',
    maxColor: '#006cee'
  },
  series: [{
    data: data,
    name: '随机数据',
    mapData: Highcharts.maps['cn/hunan'],
    joinBy: 'name', // 根据 name 属性进行关联
    states: {
			hover: {
				color: '#000'
			}
		},
    dataLabels: {
			enabled: true,
			format: '{point.name}'
		}
  }]
});
</script></body></html>

这段HTML和JavaScript代码创建了一个网页，其中包含一个使用Highcharts库绘制的湖南省地图，并在地图上显示了一组随机数据。让我逐行解释代码的各个部分：

<!DOCTYPE html>：这是HTML文档的文档类型声明，指定文档遵循的HTML版本。
<html lang="en">：开始HTML文档，其中lang属性指定文档的语言为英语。
<head>：HTML文档的头部部分，通常包含文档的元信息和引用外部资源的标签。
- <meta charset="UTF-8">：指定文档使用UTF-8字符编码，以支持多语言字符集。
- <title>湖南省</title>：设置网页的标题为"湖南省"。
<style>：内联CSS样式，用于修改网页中的样式。
- .highcharts-credits 和 .highcharts-legend 类的样式规则将Highcharts图表中的版权信息和图例隐藏。
<body>：HTML文档的主体部分，包含网页的实际内容。
- <div id="map" style="width:800px;height: 500px;"></div>：在页面中创建一个<div>元素，具有ID为"map"，并设置宽度和高度为800像素和500像素。这个<div>元素将用于渲染Highcharts地图。
- <script src="https://img.hcharts.cn/highmaps/highmaps.js"></script> 和 <script src="https://data.jianshukeji.com/geochina/hunan.js"></script>：引入了两个外部JavaScript文件，分别是Highcharts库的地图模块和湖南省的地图数据。
<script>：JavaScript代码块，用于创建和配置Highcharts地图以及显示数据。
- var data = [...]：定义了一个包含随机数据的数组。每个数据项都有一个城市名称和一个数值。
- var map = new Highcharts.Map('map', {...})：创建了一个Highcharts地图实例，将其渲染到具有ID为"map"的<div>元素中。
  - title 属性：设置地图的标题为"湖南省"。
  - colorAxis 属性：定义了颜色轴的配置，用于根据数据值的大小确定区域颜色。
  - series 属性：定义了地图上的数据系列。在这里，将数据关联到地图，并指定了数据的名称、地图数据、关联属性（通过"joinBy"属性指定地图数据与数据数组的关联方式）、鼠标悬停时的颜色变化以及数据标签的显示。

这段代码的主要功能是创建一个地图，根据提供的随机数据，将湖南省的各个城市标记在地图上，并根据数据值的大小着色。用户可以通过鼠标悬停在不同城市上来查看城市的名称。这是一个使用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/1fc7u5aI1Exnx-4tL4sMvcA
提取码：

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

请私信作者（v）15135757306

注：非白嫖仅为维护服务器，若想白嫖请CSDN私信我（大概率可能时间忙顾不上回复）

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

上一篇：基于php毕业设计学

下一篇： HTML&CSS