Echarts可视化
四:使用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