基于Echarts构建大数据招聘岗位数据可视化大屏_基于echart高校教师队伍大数据页面

2401_84170414

于 2024-05-07 03:44:01 发布

阅读量688

点赞数 24

分类专栏：程序员文章标签： echarts 大数据信息可视化

本文链接：https://blog.csdn.net/2401_84170414/article/details/138515721

版权

程序员专栏收录该内容

172 篇文章 0 订阅

订阅专栏

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

1.项目背景

“大数据”作为一种概念和思潮由计算领域发端，之后逐渐延伸到科学和商业领域。大多数学者认为，“大数据”这一概念最早公开出现于1998年，美国高性能计算公司SGI的首席科学家约翰·马西(John Mashey)在一个国际会议报告中指出：随着数据量的快速增长，必将出现数据难理解、难获取、难处理和难组织等四个难题，并用“Big Data(大数据)”来描述这一挑战，在计算领域引发思考。大数据是信息技术发展的必然产物，更是信息化进程的新阶段，其发展推动了数字经济的形成与繁荣。信息化已经历了两次高速发展的浪潮，始于上世纪80年代，随个人计算机大规模普及应用所带来的以单机应用为主要特征的数字化(信息化1.0)，及始于上世纪90年代中期，随互联网大规模商用进程所推动的以联网应用为主要特征的网络化(信息化2.0)。当前，我们正在进入以数据的深度挖掘和融合应用为主要特征的智能化阶段(信息化3.0)。党的十八届五中全会将大数据上升为国家战略。回顾过去几年的发展，我国大数据发展可总结为：“进步长足，基础渐厚；喧嚣已逝，理性回归；成果丰硕，短板仍在；势头强劲，前景光明”。我国互联网大数据领域发展态势良好，市场化程度较高，一些互联网公司建成了具有国际领先水平的大数据存储与处理平台，并在移动支付、网络征信、电子商务等应用领域取得国际先进甚至领先的重要进展。

鉴于目前大数据行业前景广阔，作为应届生的我们，有必要研究目前大数据相关招聘岗位的信息，通过对大数据岗位的分析了解大数据相关岗位的薪资情况、应聘要求、地区分布等，有助于我们提前知晓大数据岗位情况及时做出准备，从而毕业后能如愿进入相关企业相关岗位。

2.项目简介

本次项目是使用Echarts构建大数据招聘岗位信息可视化大屏，使用到的技术为前端三剑客（html、css、javascript）。项目最终效果如下：

3.项目流程

3.1整体布局

首先我们将大屏划分为6个板块，左上角用条形图和折线图双轴图表可视化工作经验要求及对应的平均薪资情况；左下角用环形饼图可视化学历要求的占比情况；中间上部分用仪表盘来展示总岗位数量、岗位最多的城市、薪资最高的城市、岗位最多的公司等数据；中间下用词云图来展示大数据相关岗位名称；右上角和左上角图表使用一样，展示的是岗位最多的前五名城市及其对应的平均薪资情况；右下角用添加了光滑属性的线图来展示2022年最近半年内的岗位需求量变化情况。

整体html样式代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全国大数据招聘信息可视化大屏</title>
    <link rel="stylesheet" href="main.css">
    <script src="echarts.min.js"></script>
    <script src="jquery-3.6.0.min.js"></script>
    <script src="echarts-wordcloud.min.js"></script>
</head>
<body>
  <div class="title">全国大数据岗位招聘信息</div>
  <div class="tim"></div>
  <script>
    var t = null;
    t = setTimeout(time, 1000); //开始运行
    function time() {
        clearTimeout(t); // 清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours();
        var m = dt.getMinutes();
        var s = dt.getSeconds();
        document.querySelector(".tim").innerHTML = 
            "当前时间：" + y + "年" + mt + "月" + day + "日" + 
            "-" + h + "时" + m + "分" + s + "秒";
        t = setTimeout(time, 1000);
    }
</script>
  <div class="l1" id="l1"></div>
  <div class="l2" id="l2"></div>
  <div class="c1">
    <div class="num"><h1>4234</h1></div>
    <div class="num"><h1>上海</h1></div>
    <div class="num"><h1>广州</h1></div>
    <div class="num"><h1>字节跳动</h1></div>
    <div class="txt"><h2>岗位数量</h2></div>
    <div class="txt"><h2>岗位最多的城市</h2></div>
    <div class="txt"><h2>薪资最高的城市</h2></div>
    <div class="txt"><h2>岗位最多的公司</h2></div>
  </div>
    <div class="c2" id="main" ></div>
    <div class="r1" id="r1"></div>
    <div class="r2" id="r2"></div>

   <script src="ec_l1_data.js"></script>
   <script src="ec_l2_data.js"></script>
   <script src="ec_r1_data.js"></script>
   <script src="ec_r2_data.js"></script>
   <script src="ec_main_data.js"></script>
</body>
</html>

html代码中已实现了最上边导航栏中的标题、时间、仪表盘。

整体css样式代码如下:

body{
    margin: 0;
    background-color: #333;
}
.title{
    position: absolute;
    width: 40%;
    height: 10%;
    top: 0;
    left: 30%;
    color: white;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.l1{
    position: absolute;
    width: 30%;
    height: 45%;
    top: 10%;
    left: 0;
    background-color: aquamarine;
}
.l2{
    position: absolute;
    width: 30%;
    height: 45%;
    top: 55%;
    left: 0;
    background-color: blue;
}
.c1{
    position: absolute;
    width: 40%;
    height: 25%;
    top: 10%;
    left: 30%;
}
.num{
    width: 25%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    color: greenyellow;
    font-size: 16px;
}
.txt{
    width: 25%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "幼圆";
    color: whitesmoke;
    font-size: 12px;
}
.c2{
    position: absolute;
    width: 40%;
    height: 65%;
    top: 35%;
    left: 30%;
}
.r1{
    position: absolute;
    width: 30%;
    height: 45%;
    top: 10%;
    right: 0;
    background-color: burlywood;
}
.r2{
    position: absolute;
    width: 30%;
    height: 45%;
    top: 55%;
    right: 0;
    background-color: brown;
}
.tim{
    position: absolute;
    /* width: 30%; */
    height: 10%;
    top: 5%;
    right: 2%;
    font-size: 20px;
    color: whitesmoke;
}

3.2左边布局

左边分为上下两个部分，左上为条形图和折线图的结合，使用双轴坐标系；左下为环形图。

左上js图表代码：

var ec_left1 = echarts.init(document.getElementById('l1'),"dark");
var ec_left1_option = {
	//标题样式
	title : {
	    text : "工作经验要求",
	    textStyle : {
	        color : 'white',
	    },
	    left : 'left'
	},
	  color: ['#3398DB','#EE6666'],
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
	            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        }
	    },
    xAxis: {
        type: 'category',
		color : 'white',
        data: ['经验不限','1-3年','3-5年', '5-10年',   '10年以上']
    },
    yAxis: [{
        type: 'value',
		color : 'white',
    },
	{
		type: 'value',
		name: '月薪',
		color : 'white',
		axisLabel: {
		  formatter: '{value}'
		}
	  }
],
    series: [{
        data: [355, 448, 858, 525, 76],
        type: 'bar',
		barMaxWidth:"50%"
    },
	{
		name: '薪资',
		type: 'line',
		yAxisIndex: 1,
		tooltip: {
		  valueFormatter: function (value) {
			return value;
		  }
		},
		data: [19763,21439,33229,42547,101429 ]
	  }
	]
};
ec_left1.setOption(ec_left1_option)

效果如下：

左下js图表代码:

var ec_left2 = echarts.init(document.getElementById('l2'),"dark");
var ec_left2_option = {
	//标题样式
	title : {
	    text : "学历要求",
	    textStyle : {
	        color : 'white',
	    },
	    left : 'left'
	},
tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '数量',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1714, name: '本科' },
        { value: 462, name: '硕士' },
        { value: 150, name: '博士' },
        { value: 386, name: '专科及以下' }
      ]
    }
  ]
};

ec_left2.setOption(ec_left2_option)

效果如下：

3.3中间布局

中间主要是仪表盘（html中已体现）和词云图。

注：词云图需要下载echarts-wordcloud.min.js

词云图js代码如下：

var ec_main = echarts.init(document.getElementById('main'), "dark");
var ec_main_option = {
    tooltip: {
        show: false
    },
    series: [{
        type: 'wordCloud',
        gridSize: 1,
        sizeRange: [12, 55],
        rotationRange: [-45, 0, 45, 90],


![img](https://img-blog.csdnimg.cn/img_convert/2f1e77b7c47c97cf1b8741344d8db4de.png)
![img](https://img-blog.csdnimg.cn/img_convert/e52980754b8034e4b5c103fbc0b90e16.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

     sizeRange: [12, 55],
        rotationRange: [-45, 0, 45, 90],


[外链图片转存中...(img-afNggm4E-1715024630093)]
[外链图片转存中...(img-3LYTFiIT-1715024630093)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

2401_84170414

关注

24
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
基于Echarts构建大数据招聘岗位数据可视化大屏_基于echart高校教师队伍大数据页面

本次项目是使用Echarts构建大数据招聘岗位信息可视化大屏，使用到的技术为前端三剑客（html、css、javascript）。
复制链接

扫一扫