Java爬虫项目(四可视化)(岗位爬取并展示)WebMagic+MySQL+Echarts+IDEA

2023-09-14 04:05| 来源: 网络整理| 查看: 265

Echarts可视化四:使用Echarts可视化-从51job网站爬取的招聘信息1.效果图(我将公开分享源码,可支持二次开发,中间的数据是获取数据库,并且实现自滚动的)2.首先了解一下Echarts3.项目结构4.项目源码5.数据库6.项目源码7.其他文章8.其他的基础的文章

四:使用Echarts可视化-从51job网站爬取的招聘信息 1.效果图(我将公开分享源码,可支持二次开发,中间的数据是获取数据库,并且实现自滚动的)

在这里插入图片描述

2.首先了解一下Echarts

echarts基础页面备份

职业仓 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);

Echarts官网,选择你喜欢的样式,直接copy到原文中即可

3.项目结构

在这里插入图片描述

4.项目源码

Bar(Line和Pie的bean类参考Bar按照自己的需求写)

package cn.xyecy.bean; public class Bar { private String name; //x轴,名称 private int num; //y轴,数量 public String getName() { return name; } public void setName(String name) { this.name = name; } public int getNum() { return num; } public void setNum(int num) { this.num = num; } }

BarDao

package cn.xyecy.dao; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import cn.xyecy.bean.Bar; public class BarDao { /** * @author wen * * 查询所有数据 * @return 存放所有数据的线性表 */ public ArrayList query() { ArrayList barArr = new ArrayList(); try { //JDBC方式连接MySQL数据库 Class.forName("com.mysql.jdbc.Driver"); Connection conn = DriverManager.getConnection( "jdbc:mysql://localhost:3306/job51?characterEncoding=utf8", "root", "123456"); PreparedStatement stmt = conn.prepareStatement("SELECT * FROM bar"); ResultSet rs = stmt.executeQuery(); //将test表中的数据存储到线性表中 while(rs.next()) { Bar bar = new Bar(); bar.setName(rs.getString("name")); bar.setNum(rs.getInt("num")); barArr.add(bar); } //关闭连接 conn.close(); } catch (SQLException e) { e.printStackTrace(); } catch (ClassNotFoundException e) { e.printStackTrace(); } return barArr; } }

BarService

package cn.xyecy.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import cn.xyecy.bean.Bar; import cn.xyecy.dao.BarDao; import net.sf.json.JSONArray; public class BarService extends HttpServlet { @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //创建DAO BarDao barDao = new BarDao(); //从数据库里取数据 ArrayList barArr = barDao.query(); //设置服务器响应时向JSP表示层传输数据的编码格式 resp.setContentType("text/html; charset=utf-8"); //ArrayList对象转化为JSON对象 JSONArray json = JSONArray.fromObject(barArr); //控制台显示JSON System.out.println(json.toString()); //返回到JSP PrintWriter writer = resp.getWriter(); writer.println(json); writer.flush(); //关闭输出流 writer.close(); } }

将assets文件夹拖到web目录下在WEB-INF目录下创建lib包,同时导入所需的jar包这里我之后会将所需的文件上传到云端供大家下载,链接都会写在文章末端,具体项目结构文章开始有说,请仔细看

web.xml

index.jsp barService cn.xyecy.servlet.BarService barService /bar.do

index.jsp

--%> 岗位信息展示 $(function() { var $this = $("#scroll_table"); var scrollTimer; $this.hover(function() { clearInterval(scrollTimer); }, function() { scrollTimer = setInterval(function() { scrollNews($this); }, 200); }).trigger("mouseleave"); function scrollNews(obj) { var $self = obj.find("tbody"); var lineHeight = $self.find("tr:first").height(); $self.animate({ "marginTop": -lineHeight + "px" }, 600, function() { $self.css({ marginTop: 0 }).find("tr:first").appendTo($self); }) } }) 岗位信息展示退出学历偏向(暂时静态) 学历需求与岗位数量(实现中) --%> --%> 学历要求(暂时静态) 岗位发布数量发布时间

index.js

$(function(){ function loadData(option) { $.ajax({ type : 'post', //传输类型 async : false, //同步执行 url : 'bar.do', //web.xml中注册的Servlet的url-pattern data : {}, dataType : 'json', //返回数据形式为json success : function(result) { if (result) { //初始化xAxis[0]的data option.xAxis[0].data = []; for (var i=0; i option.series[0].data.push(result[i].num); } } }, error : function(errorMsg) { alert("加载数据失败"); } });//AJAX }//loadData() /*标准*/ var radar = echarts.init(document.getElementById('radar')); option = { title: { text: '' }, tooltip: {}, legend: { data: ['第一推荐', '第二推荐','第三推荐'], x:"center", y:'bottom', textStyle:{ color:"#fff" } }, color: ['#4c95d9', '#f6731b', '#8cd43f'], radar: { name:{ textStyle: { //设置颜色 color:'#fff' } }, indicator: [ { name: '无要求', max: 5000}, { name: '中职及以下', max: 5000}, { name: '专科', max: 5000}, { name: '本科', max: 5000}, { name: '研究生', max: 5000}, { name: '硕士', max: 5000} ], center: ['50%','50%'], radius: "58%" }, series: [{ name: '', type: 'radar', itemStyle : { normal : { splitLine: { lineStyle: { } }, label: { show: false, textStyle:{ }, formatter:function(params) { return params.value;} }, } }, data : [ { value : [240, 1000, 2800, 3500, 5000, 1900], name : '第一推荐' }, { value : [500, 1400, 2800, 3100, 4200, 2100], name : '第二推荐' }, { value : [600, 1400, 1800, 2100, 3200, 1100], name : '第三推荐' } ] }] }; radar.setOption(option); /* 飞鸟尽*/ var graduateyear = echarts.init(document.getElementById('graduateyear')); option = { title : { text:"", x:'center', y:'top', textStyle: { color:'#fff', fontSize:13 } }, tooltip : { trigger: 'axis' }, grid: { left: '3%', right: '8%', bottom: '5%', top:"13%", containLabel: true }, color:["#72b332",'#35a9e0'], legend: { data:['学历需求(静态)','岗位数量'], show:true, right:'15%', y:"0", textStyle:{ color:"#999", fontSize:'13' }, }, toolbox: { show : false, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : ['3月','4月','5月','6月'], splitLine:{ show:true, lineStyle:{ color: '#2d3b53' } }, axisLabel:{ textStyle:{ color:"#fff" }, alignWithLabel: true, interval:0, rotate:'15' } } ], yAxis : [ { type : 'value', splitLine:{ show:true, lineStyle:{ color: '#2d3b53' } }, axisLabel:{ textStyle:{ color:"#999" } }, } ], series : [ { name:'学历需求(静态)', type:'line', smooth:true, symbol:'roundRect', data:[1168,1189,1290,1300] }, { name:'岗位数量', type:'line', smooth:true, symbol:'roundRect', data:[2335,3010,6234,0] } ] }; graduateyear.setOption(option); /*==*/ var sexrate = echarts.init(document.getElementById('sexrate')); var total = { name: '==' }; option = { title: [{ text: total.name, left: '48%', top: '34%', textAlign: 'center', textBaseline: 'middle', textStyle: { color: '#fff', fontWeight: 'normal', fontSize: 18 } }, { text: total.value, left: '48%', top: '44%', textAlign: 'center', textBaseline: 'middle', textStyle: { color: '#fff', fontWeight: 'normal', fontSize: 18 } }], tooltip : { trigger: 'item', formatter: "{a} {b} : {c} ({d}%)" }, color:['#70a3ff','#ff7f4e'], legend: { orient: 'vertical', x:'center', bottom:'5%', selectedMode:false, formatter:function(name){ var oa = option.series[0].data; var num = oa[0].value + oa[1].value ; for(var i = 0; i return name + " "+oa[i].value+" "+ (oa[i].value / num * 100).toFixed(2) + '%'; } } }, data: ['test1','test2'], show:true, textStyle:{ color:'#fff', fontWeight:'bold' }, }, series : [ { name: 'PK', type: 'pie', selectedMode: 'single', radius: ['45%', '55%'], center: ['50%', '40%'], data: [ {value: 2629, name: 'test1'}, {value: 2507, name: 'test2'} ], label: { normal: { show: false, position: "outer", align:'left', textStyle: { rotate:true } } }, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, normal: { label:{ show: true, formatter: '{b} {c}' } } } } ] }; sexrate.setOption(option); var householdrate = echarts.init(document.getElementById('householdrate')); var total = { name: '==' }; option = { title: [{ text: total.name, left: '48%', top: '34%', textAlign: 'center', textBaseline: 'middle', textStyle: { color: '#fff', fontWeight: 'normal', fontSize: 18 } }, { text: total.value, left: '48%', top: '44%', textAlign: 'center', textBaseline: 'middle', textStyle: { color: '#fff', fontWeight: 'normal', fontSize: 18 } }], tooltip : { trigger: 'item', formatter: "{a} {b} : {c} ({d}%)" }, color:['#4f9de7','#4acf79'], legend: { orient: 'vertical', x:'center', bottom:'5%', selectedMode:false, formatter:function(name){ var oa = option.series[0].data; var num = oa[0].value + oa[1].value ; for(var i = 0; i return name + " "+oa[i].value+" "+ (oa[i].value / num * 100).toFixed(2) + '%'; } } }, data: ['test1','test2'], show:true, textStyle:{ color:'#fff', fontWeight:'bold' }, }, series : [ { name: 'FK', type: 'pie', selectedMode: 'single', radius: ['45%', '55%'], center: ['50%', '40%'], data: [ {value: 2629, name: 'test1'}, {value: 2507, name: 'test2'} ], label: { normal: { show: false, position: "outer", align:'left', textStyle: { rotate:true } } }, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, normal: { label:{ show: true, formatter: '{b} {c}' } } } } ] }; householdrate.setOption(option); /* =====-=*/ var courserate = echarts.init(document.getElementById('courserate')); option = { tooltip : { trigger: 'item', formatter: "{a} {b} : {c} ({d}%)" }, legend: { orient: 'vertical', right: '0', y:'middle', textStyle:{ color:"#fff" }, formatter:function(name){ var oa = option.series[0].data; var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value+oa[5].value; for(var i = 0; i return name + ' '+oa[i].value; } } }, data: ['无要求','中职及以下','专科','本科','研究生','博士'] }, series : [ { name: '学历要求', type: 'pie', radius : '65%', color:['#27c2c1','#9ccb63','#fcd85a','#60c1de','#0084c8','#d8514b'], center: ['38%', '50%'], data:[ {value:234, name:'无要求'}, {value:335, name:'中职及以下'}, {value:310, name:'专科'}, {value:234, name:'本科'}, {value:135, name:'研究生'}, {value:234, name:'博士'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, itemStyle: { normal: { label:{ show: true, position:'outside', formatter: '{b}' } }, labelLine :{show:true} } } ] }; courserate.setOption(option); /* =======*/ var professionrate = echarts.init(document.getElementById('professionrate')); option = { tooltip : { trigger: 'item', formatter: "{a} {b} : {c} ({d}%)" }, legend: { orient: 'vertical', right: '0', y:'middle', textStyle:{ color:"#fff" }, data: ['3月','4月','5月','6月'], formatter:function(name){ var oa = option.series[0].data; var num = oa[0].value + oa[1].value + oa[2].value; for(var i = 0; i return name + ' '+oa[i].value; } } } }, series : [ { name: '发布时间', type: 'pie', radius : '60%', center: ['35%', '50%'], data:[ {value:2335, name:'3月'}, {value:3010, name:'4月'}, {value:6234, name:'5月'}, {value:0, name:'6月'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, itemStyle: { normal: { label:{ show: true, position:'outside', formatter: ' {b}' } }, labelLine :{show:true} } } ] }; professionrate.setOption(option); //bar图 var changedetail = echarts.init(document.getElementById('changedetail')); option = { //工具箱组件:下载为图片 toolbox:{ feature:{ saveAsImage:{} } }, tooltip : { show : true }, legend : { data : [ '岗位数量' ] }, xAxis : [ { type : 'category', axisLabel:{ textStyle:{ color:"#fff" }, alignWithLabel: true, interval:0, rotate:'0' } } ], yAxis : [ { type : 'value' } ], series : [ { name : '岗位数量', type : 'bar' } ] }; //加载数据到option loadData(option); //设置option changedetail.setOption(option); }) // //分页导航栏设置 // //初始化页面 // $(function(){ // initpage(); // }) // //分页设置 // function initpage() { // var totalpage = "${pages}"; // totalpage = parseInt(totalpage); // if (totalpage == 0) // { // return; // } // var currentpage = "1"; // currentpage = parseInt(currentpage); // $.jqPaginator( // '#pagination', // { // totalPages : totalpage, // visiblePages : 5, // currentPage : currentpage, // wrapper : '', // first : '首页', // prev : '«', // next : '»', // last : '尾页', // page : '{{page}}', // onPageChange : function(num) { // search(num); // } // }); // }

index.css(会直接公布源码,感兴趣可以仔细看)

/* Create by gaojiye */ @charset "utf-8"; /*通用样式ͨ*/ body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd { margin:0; padding:0; } ul, li{ list-style: none; } a:link, a:visited, a:active { text-decoration: none; } body{ background: #040f3c; } .header{ height: 80px; position: relative; padding-top: 13px; font-size: 36px; color: #00ffff; text-align: center; background: url(../bg.png) top center no-repeat; } .header a.a-access{ position: absolute; right: 3%; top: -18%; } .main{ padding: 0 30px 30px; } .main-left, .main-right{ float: left; width: 28%; padding: 0 10px; } .main-middle{ float: left; width: 44%; padding: 0 10px; } .border-container { position: relative; margin-top: 15px; padding: 10px; border: 1px solid rgba(255,255,255,.15); box-shadow: inset 0 0 50px rgba(255,255,255,.1),0 0 5px rgba(0,0,0,.3) } .border-container span.border-span { display: block; position: absolute; width:15px; height: 15px; opacity: .5 } .border-container span.top-left { top: -2px; left:-2px; border-top: 2px solid #54dcf2; border-left: 2px solid #54dcf2; } .border-container span.top-right { top:-2px; right:-2px; border-top: 2px solid #54dcf2; border-right:2px solid #54dcf2; } .border-container span.bottom-left { bottom: -2px; left: -2px; border-bottom: 2px solid #54dcf2; border-left: 2px solid #54dcf2; } .border-container span.bottom-right { bottom: -2px; right: -2px; border-bottom: 2px solid #54dcf2; border-right: 2px solid #54dcf2; } .name-title{ font-size:16px; font-weight: bolder; color: #00ffff; } #radar{ height: 275px; } #dormitorydetail{ height: 135px; } #graduateyear{ height: 192px; } .three-pie{ border-top: 1px solid rgba(255,255,255,.1); margin: -10px; margin-top: 10px; } .teacher-pie{ border-bottom: 1px solid rgba(255,255,255,.1); margin: -10px; margin-bottom: 0; } .three-pie li, .teacher-pie li{ float: left; width: 50%; border-right: 1px solid rgba(255,255,255,.1); } .teacher-pie li .name-title{ padding-left:10px ; padding-top:10px ; } .three-pie li:last-child, .teacher-pie li:last-child{ border-right: none; } #sexrate, #nationarate, #householdrate{ height: 266px; } #mapadd{ height: 304px; } .number-show{ position: absolute; top: 20%; right: 5%; } .number-show span.span-name{ font-size:14px ; color:#fffd51 ; } .number-show span.span-number-show{ font-size:18px ; color:#54b5b5 ; font-style: italic; } .number-show li{ line-height: 25px; } #teacherrate, #courserate, #professionrate{ height: 200px; } #agelist{ height: 130px; } #changedetail{ height: 229px; } .table-kingdargen{ margin-top: 6px; text-align: center; margin-bottom: 0; } .table-kingdargen>thead>tr>th{ border-bottom: 1px solid #0f4075; padding: 2px 8px; text-align: center; color: #419aff; font-size: 12px; font-weight: normal; border-top: 1px solid #0f4075!important; } .table-kingdargen tbody tr td{ padding: 1px 8px; font-size: 12px; border: none; color: #fff; } .table-kingdargen tbody tr:nth-child(2n){ background: #1d2a42; } .table-kingdargen tbody tr:hover{ background: #1d2a42; } .table-kingdargen tbody tr td:nth-child(2){ color: #e9aa00; } .table-kingdargen tbody tr td:nth-child(3){ color: #53bf18; } .table-kingdargen tbody tr td:nth-child(4){ color: #f9504a; } .table-kingdargen tbody tr td:nth-child(5){ color: #12f0e9; } #juniorservice{ height: 190px; } #edubalance{ height: 203px; } @import url("https://fonts.googleapis.com/css?family=Raleway"); * { box-sizing: border-box; } .copyright { position: absolute; bottom: 0; } .copyright a { text-decoration: none; color: #16a085; } .copyright a:hover { text-decoration: underline; } .button { position: relative; padding: 0.5em 1.5em; border: none; background-color: transparent; cursor: pointer; outline: none; font-size: 18px; margin: 1em 0.8em; } .button.type1 { color: #00ffff; } .button.type1.type1::after, .button.type1.type1::before { content: ""; display: block; position: absolute; width: 20%; height: 20%; border: 2px solid; transition: all 0.6s ease; border-radius: 2px; } .button.type1.type1::after { bottom: 0; right: 0; border-top-color: transparent; border-left-color: transparent; border-bottom-color: #566473; border-right-color: #566473; } .button.type1.type1::before { top: 0; left: 0; border-bottom-color: transparent; border-right-color: transparent; border-top-color: #566473; border-left-color: #566473; } .button.type1.type1:hover:after, .button.type1.type1:hover:before { width: 100%; height: 100%; } 5.数据库

在这里插入图片描述

6.项目源码

请点击这里,git已发布 (下载1.5和sql就行,剩下的两个不要下载),算了吃饭去,下午继续弄,你先收藏一下这个项目有点缺陷,数据显示的太多,会出现滚动条,这里有一篇文章是介绍如何去除它,固定页面高度,容器溢出隐藏的,就修改一下css代码而已,也是我今天才解决的(时间记录:2020.6.12) 怎样固定页面的高(固定容器高度溢出隐藏)

7.其他文章

Java爬虫项目(一爬取)(岗位爬取并展示)WebMagic+MySQL+Echarts+IDEA 一:Jsoup+HttpClient爬取51job(前程无忧)网的岗位招聘信息

Java爬虫项目(二展示)(岗位爬取并展示)WebMagic+MySQL+Echarts+IDEA 二:echarts展示mysql数据库中的数据

Java爬虫项目(三爬虫)(岗位爬取并展示)WebMagic+MySQL+Echarts+IDEA 三:使用webmagic爬取51job网站的招聘信息

8.其他的基础的文章

jquery实现表头固定表格自滚动

div背景颜色渐变(透明对角附赠颜色查询对照表)

html背景渲染原理(body透明渐变)

echarts图表中改变统计图图表颜色以及字体颜色

哔哩哔哩中的echarts视频教程(推荐)

【本文地址】

公司简介

联系我们

Java爬虫项目(四 可视化)(岗位爬取并展示)WebMagic+MySQL+Echarts+IDEA

Java爬虫项目(四可视化)(岗位爬取并展示)WebMagic+MySQL+Echarts+IDEA