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

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

在这里插入图片描述

2.首先了解一下Echarts

echarts基础页面备份

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>职业仓</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <!-- 引入主题 -->
    <script src="https://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按照自己的需求写)

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

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

<?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

<%@ 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

$(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(会直接公布源码,感兴趣可以仔细看)

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