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

本文链接：https://blog.csdn.net/2401_84170337/article/details/138515708

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

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

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

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&g