Java爬蟲項目(四 可視化)(崗位爬取並展示)WebMagic+MySQL+Echarts+IDEA

原創 星夜欢宇 2020-06-15 05:15

四:使用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視頻教程(推薦)

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

看不懂正則表達式？試試可視化工具吧！

1. 前言 正則表達式是一種用來匹配字符串的強有力工具。設計思想是用一種描述性的語言來給字符串定義一個規則，凡是符合規則的字符串我們就認爲它“匹配”了，否則該字符串就是不合法的。 日常開發中常常會使用正則表達式，例如：對數據格式進行校

原創 2024-05-24 23:57:40

鴻蒙原生應用再新丁！學習強國 入局鴻蒙

鴻蒙原生應用再新丁！學習強國 入局鴻蒙 來自 #HarmonyOS#  微博5月23日消息 中央宣傳部宣傳輿情研究中心宣佈，將基於HarmonyOS NEXT鴻蒙星河版啓動“學習強國”App鴻蒙原生應用開發！“學習強國”App將爲鴻蒙生態帶

原創 2024-05-24 23:43:49

一鍵自動化博客發佈工具,用過的人都說好(公衆號篇)

之前收到很多朋友的要求，說是需要一個公衆號的自動發佈工具。 現在，它來了。 前提條件 前提條件當然是先下載 blog-auto-publishing-tools這個博客自動發佈工具,地址如下：https://github.com/ddean

原創 2024-05-24 21:38:52

智能的PHP開發工具PhpStorm v2024.1全新發布——支持PHPUnit 11.0

PhpStorm是一個輕量級且便捷的PHP IDE，其旨在提高用戶效率，可深刻理解用戶的編碼，提供智能代碼補全，快速導航以及即時錯誤檢查。可隨時幫助用戶對其編碼進行調整，運行單元測試或者提供可視化debug功能。 立即獲取PhpStorm

原創 2024-05-24 12:20:21

Buzz庫網絡爬蟲實例：快速爬取百度搜索實時熱點

前言 隨着互聯網的發展，信息獲取已經成爲了人們日常生活和工作中的重要一環。而在信息獲取的過程中，網絡爬蟲作爲一種自動化的數據採集工具，爲我們提供了極大的便利。本文將介紹如何利用PHP編寫一個簡單而高效的網絡爬蟲，實現快速爬取百度搜索的實

原創 2024-05-24 00:08:55

鴻蒙原生應用再新丁！芒果TV 入局鴻蒙

 鴻蒙原生應用再新丁！芒果TV 入局鴻蒙 來自 #HarmonyOS#  微博5月21日消息 深受年輕人喜愛的@芒果TV 宣佈完成鴻蒙原生應用Beta版開發🎉芒果TV獨家精品內容結合HarmonyOS NEXT創新能力，將爲用戶帶來更加便捷

原創 2024-05-23 23:43:35

DevExpress WinForms中文教程 - HTML & CSS支持的實戰應用(二)

DevExpress WinForms擁有180+組件和UI庫，能爲Windows Forms平臺創建具有影響力的業務解決方案。DevExpress WinForms能完美構建流暢、美觀且易於使用的應用程序，無論是Office風格的界面，還

原創 2024-05-23 12:20:11

Python實現大麥網搶票的四大關鍵技術點解析

前言 隨着互聯網的普及和發展，線上購票已經成爲人們生活中不可或缺的一部分。然而，在搶購熱門演出門票時，往往會遇到搶票難、搶票快的問題，有時候一秒鐘的延遲就意味着與心儀的演出擦肩而過。爲了解決這個問題，技術愛好者們開始探索利用Python

原創 2024-05-23 00:18:04

hadoop-2單節點和hive安裝

1、下載hadoop-x.y.x.tar.gz 2、解壓：tar -zxvf hadoop-2.y.x.tar.gz 3、配置環境變量：$JAVA_HOME、$HADOOP_HOME、$PATH 4、修改配置：$HADOOP_HOME/et

原創 2024-05-24 23:51:33

對話阿里云云原生產品負責人李國強：推進可觀測產品與OpenTelemetry開源生態全面融合

5 月 22 日，在最新一期的飛天發佈時刻上，阿里雲宣佈多款可觀測產品全面升級，其中一項是應用實時監控服務 ARMS 在業內率先推進了與 OpenTelemetry 開源生態的全面融合，極大豐富了可觀測的數據類型及規模，大幅增強了 ARMS

原創 2024-05-24 21:13:50

複雜SQL治理實踐

一、前言 軟件在持續的開發和維護過程中，會不斷添加新功能和修復舊的缺陷，這往往伴隨着代碼的快速增長和複雜性的提升。若代碼庫沒有得到良好的管理和重構，就可能積累大量的技術債務，包括不一致的設計、冗餘代碼、過時的庫和框架以及不再使用的功能。

京東雲開發者 2024-05-24 11:56:56

昔日輝煌不再，PHP老矣，尚能飯否？

導語 | 近期 TIOBE 最新指數顯示，PHP 的流行度降至了歷史最低，排在第 17 名，同時，在年度 Stack Overflow 開發者調查報告中，PHP 在開發者中的受歡迎程度已經從之前的約 30% 萎縮至現在的 18%。“P

原創 2024-05-23 23:48:42

Spring項目中使用NIO並行調用http接口指南

1-背景 後臺BFF層服務爲了SEO，涉及大量對底層數據的聚合，如果按照過程化編程，串行執行請求數據再聚合會造成很高的延遲，因此我們往往大量使用多線程技術並行化多個查詢，來減少單個請求的響應時間。 多線程一定程度上也能達成通過並行化提升

原創 2024-05-23 11:10:25

大廠B端/G端數據可視化項目如何做設計評審

根據自己多年的B端/G端數據可視化項目設計經驗，總結了這篇數據可視化項目如何做設計評審的文章。內容側重於數據可視化項目，但對於非可視化項目的設計評審也是通用的。文中介紹的流程和方法，尤其是通過STAR法則來闡述自己設計思路的創意，是我在實際

原創 2024-05-24 23:57:43

低代碼與 Echarts 融合：開啓智能可視化的創新浪潮

前言 在當今數字化時代，數據的價值愈發凸顯，企業和組織需要有效地利用數據來作出戰略決策和優化業務流程。可視化是一種強大的工具，可以將複雜的數據以直觀的方式展現出來，幫助用戶更好地理解和分析數據。近年來，低代碼開發平臺和 Echarts 可視

原創 2024-05-24 10:45:38