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


四:使用Echarts可视化,从51job网站爬取的招聘信息

1.效果图(我将公开分享源码,可支持二次开发,中间的数据是获取数据库,并且实现自滚动的)

在这里插入图片描述
在这里插入图片描述

2.首先了解一下Echarts

echarts基础页面备份

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>职业仓</title>
    <!-- 引入 echarts.js -->
    <script src="//i2.wp.com/cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <!-- 引入主题 -->
    <script src="//i2.wp.com/www.runoob.com/static/js/wonderland.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 

     
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);      
        </script>
</body>
</html>

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

3.项目结构

在这里插入图片描述
在这里插入图片描述

4.项目源码

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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<Bar> query() {
        ArrayList<Bar> barArr = new ArrayList<Bar>();
        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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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<Bar> 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">


        <welcome-file-list>
            <welcome-file>index.jsp</welcome-file>
        </welcome-file-list>

        <!-- 注册servlet -->
        <servlet>
            <servlet-name>barService</servlet-name>
            <servlet-class>cn.xyecy.servlet.BarService</servlet-class>
        </servlet>
        <servlet-mapping>
            <servlet-name>barService</servlet-name>
            <url-pattern>/bar.do</url-pattern>
        </servlet-mapping>
    </web-app>

index.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName()
            + ":" + request.getServerPort() + path + "/";
%>
<%@page import="java.sql.*" %>
<!DOCTYPE>
<head>
<%--    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">--%>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <title>岗位信息展示</title>
    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/index.css"/>
    <!-- 使用单文件引入的方式使用ECharts.JS -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/echarts.min.js"></script>
    <script src="assets/js/index.js"></script>
    <script src="assets/js/map/shandong.js"></script>
<%--    分页插件的引入--%>
    <script type="text/javascript" src="assets/js/jqPaginator.js"></script>

    <script type="text/javascript">

        $(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);
                })
            }
        })

    </script>

</head>
<body>
<!--头部-->
<div class="header">
    岗位信息展示
    <a href="javascript:;" class="a-access">
        <button class="button type1">
            退出
        </button>
    </a>
</div>
<!--主体-->
<div class="main clearfix">
    <div class="main-left">
        <div class="border-container">
            <div class="name-title">学历偏向(暂时静态)</div>
            <div id="radar"></div>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">
            <div class="name-title">学历需求与岗位数量(实现中)</div>
            <div id="graduateyear"></div>
            <ul class="three-pie clearfix">
                <li>
                    <div id="sexrate"></div>
                </li>
                <li>
                    <div id="householdrate"></div>
                </li>
            </ul>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
    </div>
    <div class="main-middle">
        <div class="border-container" id="scroll_table">
            <%  //Java语句
                try {
                    Class.forName("com.mysql.jdbc.Driver");  // 加载驱动
                    Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/job51",
                            "root", "123456");  ////获取Connection对象

                    if(con != null){
                        Statement stmt = null;
                        ResultSet rs = null;
                        String sql = "SELECT *FROM jobs;";  //查询语句
                        stmt = con.createStatement();
                        rs = stmt.executeQuery(sql);
            %>
            <table class="table table-kingdargen">
                <thead>
                <tr>
                    <th><%out.print("序号");%></th>
                    <th><%out.print("岗位");%></th>
                    <th><%out.print("公司名称");%></th>
                    <th><%out.print("工作地点");%></th>
                    <th><%out.print("薪资");%></th>
                </tr>
                </thead>
                <tbody id="kbTable">
                <%--                //这是一个循环，读取数据库中的数据--%>
                <% while (rs.next()) {%>
                <tr>
                    <td><%out.print(rs.getInt("job_id"));%></td>
                    <td><%out.print(rs.getString("job_name"));%></td>
                    <td><%out.print(rs.getString("company_name"));%></td>
                    <td><%out.print(rs.getString("work_addr"));%></td>
                    <td><%out.print(rs.getString("salary"));%></td>
                </tr>
                <%--                    //循环结束--%>
                <%}%>
                </tbody>
            </table>
            <%
                    }else{
                        out.print("Connection fail！");
                    }
                }catch (Exception e) {
                    //e.printStackTrace();
                    out.print("Connection Exception！");
                }
            %>
<%--            添加分页导航层--%>
<%--            <div class="col-md-6"  style="text-align: center;margin-top: 20px;">--%>
<%--                <ul id="pagination"></ul>--%>
<%--            </div>--%>

            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>

    </div>
    <div class="main-right">
        <div class="border-container">
            <div class="name-title">学历要求(暂时静态)</div>
            <div id="courserate"></div>

            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">

            <div class="name-title">岗位发布数量</div>
            <div id="changedetail"></div>

            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">

            <ul>
                <div class="name-title">发布时间</div>
                <div id="professionrate"></div>
            </ul>

            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
    </div>
</div>

</body>

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
$(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<result.length; i++) {
                        option.xAxis[0].data.push(result[i].name);
                    }
                    //初始化series[0]的data
                    option.series[0].data = [];
                    for (var i=0; i<result.length; 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} <br/>{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 < option.series[0].data.length; i++){
                    if(name==oa[i].name){
                        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} <br/>{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 < option.series[0].data.length; i++){
                    if(name==oa[i].name){
                        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} <br/>{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 < option.series[0].data.length; i++){
                    if(name==oa[i].name){
                        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} <br/>{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 < option.series[0].data.length; i++){
                    if(name==oa[i].name){
                        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 : '<ul class="pagination lastspan"></ul>',
//             first : '<li class="first"><a href="javascript:void(0);">首页</a></li>',
//             prev : '<li class="prev"><a href="javascript:void(0);">&laquo;</a></li>',
//             next : '<li class="next"><a href="javascript:void(0);">&raquo;</a></li>',
//             last : '<li class="last"><a href="javascript:void(0);">尾页</a></li>',
//             page : '<li class=""><a href="javascript:void(0);">{{page}}</a></li>',
//             onPageChange : function(num) {
//                 search(num);
//             }
//         });
// }

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
/* 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就行,剩下的两个不要下载),算了吃饭去,下午继续弄,你先收藏一下

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视频教程(推荐)