Java爬虫+Mysql+Echarts实现全国疫情数据实时可视化
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Java爬虫+Mysql+Echarts实现全国疫情数据实时可视化，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含20410字，纯文字阅读大概需要30分钟。
内容图文
前言： 源于需要四天实现的Java课设，之前完全没有学过Java，实现起来非常多的问题（痛苦面具）。Java爬虫到服务器的Mysql数据库组员实现，从一个方法类将Mysql数据库的数据返回了一个JSON数据，html网页也有组员修改过后的模板，所以按html模板所需要的JSON文件来修改，但是由于爬取的数据只有四项（省名，死亡病例，疑似病例，确诊病例），而模板用的JSON文件数据复杂，所以只修改这三个数据的绑定与展示，提取方法类返回的JSON文件的数据，使用Java类接收数据再实现数据转移，并且返回一个源于Mysql数据库数据的html可用的JSON文件，再由html调用即可实现爬取数据的展示。（疫情新闻的爬取其他组员实现）
数据库提取数据实现（服务器ID已屏蔽）
package test1;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONException;
import com.alibaba.fastjson.JSONObject;
import com.mysql.cj.xdevapi.JsonArray;
// JSON读取与转换
import java.io.*;
import java.util.ArrayList;
import java.util.List;
import java.sql.*;
public class Conn {
//private static String url ="jdbc:mysql://localhost:3306/mynews";
//解决乱码的问题
private static String url ="jdbc:mysql://***.**.**.***:****/***?useUnicode=true&characterEncoding=UTF-8";
private static String userName ="*****";
private static String password ="*******";
//静态代码块，在类加载时候执行，只会执行一次
static {
try {
//1、加载驱动，交给DriverManager管理
Class.forName("com.mysql.jdbc.Driver");
}catch (Exception ex){
ex.printStackTrace();
}
}
//获取connection
public static Connection getConnection(){
//Class.forName("com.mysql.jdbc.Driver");//放这里是有问题的。
try {
return DriverManager.getConnection(url,userName,password);
}catch (SQLException ex){
ex.printStackTrace();
return null;
}
}
public static void close(Connection conn){
try {
if(conn !=null)
conn.close();
}catch(SQLException ex){
ex.printStackTrace();
}
}
public static void close(Statement stmt){
try {
if(stmt !=null)
stmt.close();
}catch(SQLException ex){
ex.printStackTrace();
}
}
public static void close(ResultSet rs){
try {
if(rs !=null)
rs.close();
}catch(SQLException ex){
ex.printStackTrace();
}
}
public static void close(ResultSet rs,Statement stmt,Connection conn){
close(rs);
close(stmt);
close(conn);
}
/**
* 将resultSet转化为JSONObject
* @param rs
* @return
* @throws SQLException
* @throws JSONException
*/
/**
* 将resultSet转化为JSON数组
* @param rs
* @return
* @throws SQLException
* @throws JSONException
*/
public static JSONArray resultSetToJsonArry(ResultSet rs) throws SQLException,JSONException
{
// json数组
JSONArray array = new JSONArray();
// 获取列数
ResultSetMetaData metaData = rs.getMetaData();
int columnCount = metaData.getColumnCount();
// 遍历ResultSet中的每条数据
while (rs.next()) {
JSONObject jsonObj = new JSONObject();
// 遍历每一列
for (int i = 1; i <= columnCount; i++) {
String columnName =metaData.getColumnLabel(i);
String value = rs.getString(columnName);
jsonObj.put(columnName, value);
}
array.add(jsonObj);
}
return array;
}
public static void insert_convid19(String name,int nowConfirm,int suspect,int dead) throws Exception{
Connection conn = getConnection();
Statement stmt = conn.createStatement();
String sql="insert into convid19(name,dead,nowConfirm,suspect) value(\"%s\",%d,%d,%d);";
//System.out.println(sql);
sql=String.format(sql,name,nowConfirm,suspect,dead);
stmt.execute(sql);
close(stmt);
}
public static void insert_news(String title,String img,String content,String link) throws Exception{
Connection conn = getConnection();
Statement stmt = conn.createStatement();
String sql="insert into news(title,img,content,link) value(\"%s\",\"%s\",\"%s\",\"%s\");";
sql=String.format(sql,title,img,content,link);
stmt.execute(sql);
close(stmt);
}
public static JSONArray select_convid19() throws Exception{
Connection conn = getConnection();
Statement stmt = conn.createStatement();
ResultSet rs=stmt.executeQuery("select * from convid19;");
JSONArray jsonArray=new JSONArray();
jsonArray=resultSetToJsonArry(rs);
close(rs,stmt,conn);
return jsonArray;
}
public static JSONArray select_news() throws Exception{
Connection conn = getConnection();
Statement stmt = conn.createStatement();
ResultSet rs=stmt.executeQuery("select * from news;");
JSONArray jsonArray=new JSONArray();
jsonArray=resultSetToJsonArry(rs);
close(rs,stmt,conn);
return jsonArray;
}
public static void main(String[] args) throws Exception {
// JSONArray test=new JSONArray();
// test=select_convid19();
// System.out.println(test.toJSONString());
// for(int i=0;i<test.size();i++){
// System.out.print(test.getJSONObject(i).getString("name")+",");
// System.out.print(test.getJSONObject(i).getInteger("dead")+",");
// System.out.print(test.getJSONObject(i).getInteger("nowConfirm")+",");
// System.out.print(test.getJSONObject(i).getInteger("suspect")+"\n");
// }
//insert_news("asdas","asdsad","asdasdasd","asdasda");
}
}
select_news(); //返回新闻数据的JSON文件
select_convid19(); //返回疫情数据的JSON文件
数据在JSON文件间的转移（返回html可用JSON文件）
package test1;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;
import java.util.List;
import static test1.Conn.select_convid19;
import static test1.Conn.select_news;
public class turnjson {
//读取json数据文件
public static String readJsonData(String data) throws IOException {
//将项目根目录下的data.json内容读取为String（StringBuilder）
BufferedReader in = new BufferedReader(new FileReader(data));//读取json文件为BufferedReader对象
StringBuilder jsonString = new StringBuilder();//创建一个StringBuilder对象（相当于可动态添加字符的String，初始长度填多少无所谓）
String readingJsonTempString = in.readLine();//创建一个临时String并先读取第一行
while(readingJsonTempString != null) {
//System.out.println(readingJsonTempString);//输出刚刚读取的一行
jsonString.append(readingJsonTempString);//将刚刚读取的一行拼接进StringBuilder对象
jsonString.append("\n");//每增加一行文本后增加一个换行符
readingJsonTempString = in.readLine();//临时String保存读取的下一行
}
return jsonString.toString();
}
//data1 JSON -> java class
public static class pro {
private String name;
private String dead;
private String nowConfirm;
private String suspect;
public pro() {}
public pro(String name,String dead,String nowConfirm,String suspect) {
this.name = name;
this.dead = dead;
this.nowConfirm = nowConfirm;
this.suspect = suspect;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getDead() {
return dead;
}
public void setDead(String dead) {
this.dead = dead;
}
public String getNowConfirm() {
return nowConfirm;
}
public void setNowConfirm(String nowf) {
this.nowConfirm = nowf;
}
public String getSuspect() {
return suspect;
}
public void setSuspect(String suspect) {
this.suspect = suspect;
}
}
//data2 class
public static class protwo {
private long id;
private long createTime;
private long modifyTime;
private String tags;
private long countryType;
private String continents;
private String provinceId;
private String provinceName;
private String provinceShortName;
private String cityName;
private long currentConfirmedCount;
private long confirmedCount;
private long suspectedCount;
private long curedCount;
private long deadCount;
private String comment;
private long sort;
private String operator;
private long locationId;
private String countryShortCode;
public protwo() {}
public protwo(long id,long createTime,long modifyTime,String tags,long countryType,String continents,String provinceId,String provinceName,String provinceShortName,String cityName,long currentConfirmedCount,long confirmedCount,long suspectedCount,long curedCount,long deadCount,String comment,long sort,String operator,long locationId,String countryShortCode) {
this.id = id;
this.createTime = createTime;
this.modifyTime = modifyTime;
this.tags = tags;
this.countryType = countryType;
this.continents = continents;
this.provinceId = provinceId;
this.provinceName = provinceName;
this.provinceShortName = provinceShortName;
this.provinceShortName = provinceShortName;
this.cityName = cityName;
this.currentConfirmedCount = currentConfirmedCount;
this.confirmedCount = confirmedCount;
this.suspectedCount = suspectedCount;
this.curedCount = curedCount;
this.deadCount = deadCount;
this.comment = comment;
this.sort = sort;
this.operator = operator;
this.locationId = locationId;
this.countryShortCode = countryShortCode;
}
//String
public String getTags() { return tags; }
public void setTags(String tags) { this.tags = tags; }
public String getContinents() { return continents; }
public void setcontinents(String continents) { this.continents = continents; }
public String getProvinceId() { return provinceId; }
public void setProvinceId(String provinceId) { this.provinceId = provinceId; }
public String getProvinceName() { return provinceName; }
public void setProvinceName(String provinceName) { this.provinceName = provinceName; }
public String getProvinceShortName() { return provinceShortName; }
public void setprovinceShortName(String provinceShortName) { this.provinceShortName = provinceShortName; }
public String getCityName() { return cityName; }
public void setCityName(String cityName) { this.cityName = cityName; }
public String getComment() { return comment; }
public void setcomment(String comment) { this.comment = comment; }
public String getCountryShortCode() { return countryShortCode; }
public void setCountryShortCode(String countryShortCode) { this.countryShortCode = countryShortCode; }
public String getOperator() { return operator; }
public void setOperator(String operator) { this.operator = operator; }
// long
public long getId() { return id; }
public void setId(long id) { this.id = id; }
public long getCreateTime() { return createTime; }
public void setCreateTime(long createTime) { this.createTime = createTime; }
public long getModifyTime() { return modifyTime; }
public void setModifyTime(long modifyTime) { this.modifyTime = modifyTime; }
public long getCountryType() { return countryType; }
public void setCountryType(long countryType) { this.countryType = countryType; }
public long getCurrentConfirmedCount() { return currentConfirmedCount; }
public void setCurrentConfirmedCount(long currentConfirmedCount) { this.currentConfirmedCount = currentConfirmedCount; }
public long getConfirmedCount() { return confirmedCount; }
public void setConfirmedCount(long confirmedCount) { this.confirmedCount = confirmedCount; }
public long getSuspectedCount() { return suspectedCount; }
public void setSuspectedCount(long suspectedCount) { this.suspectedCount = suspectedCount; }
public long getCuredCount() { return curedCount; }
public void setCuredCount(long curedCount) { this.curedCount = curedCount; }
public long getDeadCount() { return deadCount; }
public void setDeadCount(long deadCount) { this.deadCount = deadCount; }
public long getSort() { return sort; }
public void setSort(long sort) { this.sort = sort; }
public long getLocationId() { return locationId; }
public void setLocationId(long locationId) { this.locationId = locationId; }
}
//json数据的转换，返回html可用的json文件(实现数据源于数据库。
public static String select_turn() throws Exception {
//d1:数据库获取数据，d2:html使用的json板块
JSONArray Js = select_convid19();
String d1 = Js.toJSONString();
String d2 = readJsonData("data2.json");
//data1 解析
List<pro> pros = JSON.parseArray(d1,pro.class);
//data2 解析
JSONObject jsonObject = JSONObject.parseObject(d2);
String getFirstNode = jsonObject.getString("getListByCountryTypeService1");
List<protwo> protwos = JSON.parseArray(getFirstNode,protwo.class);
//绑定数据
for(protwo i : protwos) {
String proname = i.provinceShortName;
int tmp1 = 0,tmp2 = 0,tmp3 = 0;
for(pro j : pros) {
if(j.name.equals(proname)) {
tmp1 = Integer.parseInt(j.nowConfirm);
tmp2 = Integer.parseInt(j.dead);
tmp3 = Integer.parseInt(j.suspect);
break;
}
}
i.currentConfirmedCount = tmp1;
i.deadCount = tmp2;
i.suspectedCount = tmp3;
i.tags = ("确诊" + (Integer.toString((int)i.currentConfirmedCount)) + "例");
}
//基于数据库修改完毕的JSON数据
String ListproJSON = JSON.toJSONString(protwos);
//获取新JSON
StringBuilder tmpOne = new StringBuilder();
tmpOne.append("{\"getListByCountryTypeService1\":");
tmpOne.append(ListproJSON);
tmpOne.append(",\"getAreaStat\":");
tmpOne.append(jsonObject.getString("getAreaStat"));
tmpOne.append(",\"getStatisticsService\":");
tmpOne.append(jsonObject.getString("getStatisticsService"));
tmpOne.append("}");
return tmpOne.toString();
}
public static void main(String[] args) throws Exception {
}
}
Echarts的对数据的实现板块
主要实现数据显示
chinamap.js，chinamap1.js，chinamap2.js：
var myChart = echarts.init(document.querySelector('#chinamap'))
// fetch xmlhttprequest
// fetchfetch(请求url)不需要引入任何的文件
fetch('1.json')
.then(res => res.json()) // 把可读数据流转为json格式
.then(res => {
console.log(res) // 获取到的疫情数据
var getListByCountryTypeService = res.getListByCountryTypeService1
// 将接口返回的数据进行处理 转为echarts认可的数据
var filterData = []
getListByCountryTypeService.forEach(item => {
filterData.push({
name: item.provinceShortName,
value:item.currentConfirmedCount
}) })
myChart.setOption({
title:{
text:'现有确诊病例'
},
tooltip: {
formatter:function(params){
return `地区：${params.name}<br/>现有确诊：${params.value || 0}人<br/>`
}//数据格式化
},
visualMap: [
{
type: 'piecewise', // continuous连续的 piecewise分段
pieces: [
{ gte: 10000 }, // (10000, Infinity]
{ gte: 1000, lte: 9999 }, // (1000, 9999]
{ gte: 100, lte: 999 }, // (100, 999]
{ gte: 10, lte: 99 }, // (10, 99]
{ gte: 0, lte: 9 }, // (0, 9]
{value:0}
],
inRange: {
color: ['#ffffff','#fdebcf', '#f59e83', '#e55a4e', '#cb2a2f', '#811c24']
}
}
],
geo: {
map: 'china',
roam: false,
zoom:1.23,
label: {
normal: {
show: true,
fontSize:'10',
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
areaColor: '#F3B329',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
name: '确诊人数',
type: 'map',
geoIndex: 0,
data:filterData
}
]
})
})
var myChart2 = echarts.init(document.querySelector('#chinamap2'))
// fetch xmlhttprequest
// fetchfetch(请求url)不需要引入任何的文件
fetch('1.json')
.then(res => res.json()) // 把可读数据流转为json格式
.then(res => {
console.log(res) // 获取到的疫情数据
var getListByCountryTypeService1 = res.getListByCountryTypeService1
// 将接口返回的数据进行处理 转为echarts认可的数据
var filterData2 = []
getListByCountryTypeService1.forEach(item => {
filterData2.push({
name: item.provinceShortName,
value: item.deadCount
}) })
myChart2.setOption({
title:{
text:'累计死亡病例'
},
tooltip: {
formatter:function(params){
return `地区：${params.name}<br/>累计死亡：${params.data?.value || 0}人<br/>`
}//数据格式化
},
visualMap: [
{
type: 'piecewise', // continuous连续的 piecewise分段
pieces: [
{ gte: 10000 }, // (10000, Infinity]
{ gte: 1000, lte: 9999 }, // (1000, 9999]
{ gte: 100, lte: 999 }, // (100, 999]
{ gte: 10, lte: 99 }, // (10, 99]
{ gte: 0, lte: 9 }, // (0, 9]
{value:0}
],
inRange: {
color: ['#ffffff','#fdebcf', '#f59e83', '#e55a4e', '#cb2a2f', '#811c24']
}
}
],
geo: {
map: 'china',
roam: false,//不开启缩放和平移
zoom:1.23,//视角缩放比例
label: {
normal: {
show: true,
fontSize:'10',
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
areaColor: '#F3B329',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
name: '死亡人数',
type: 'map',
geoIndex: 0,
data:filterData2
}
]
})
})
var myChart1 = echarts.init(document.querySelector('#chinamap1'))
// fetch xmlhttprequest
// fetchfetch(请求url)不需要引入任何的文件
fetch('1.json')
.then(res => res.json()) // 把可读数据流转为json格式
.then(res => {
console.log(res) // 获取到的疫情数据
var getListByCountryTypeService1 = res.getListByCountryTypeService1
// 将接口返回的数据进行处理 转为echarts认可的数据
var filterData1 = []
getListByCountryTypeService1.forEach(item => {
filterData1.push({
name: item.provinceShortName,
value: item.suspectedCount,
}) })
myChart1.setOption({
title:{
text:'疑似确诊病例'
},
tooltip: {
formatter:function(params){
return `地区：${params.name}<br/>疑似确诊：${params.value || 0}人`
}//数据格式化
},
visualMap: [
{
type: 'piecewise', // continuous连续的 piecewise分段
pieces: [
{ gte: 10000 }, // (10000, Infinity]
{ gte: 1000, lte: 9999 }, // (1000, 9999]
{ gte: 100, lte: 999 }, // (100, 999]
{ gte: 10, lte: 99 }, // (10, 99]
{ gte: 0, lte: 9 }, // (0, 9]
{value:0}
],
inRange: {
color: ['#ffffff','#fdebcf', '#f59e83', '#e55a4e', '#cb2a2f', '#811c24']
}
}
],
geo: {
map: 'china',
roam: false,//不开启缩放和平移
zoom:1.23,//视角缩放比例
label: {
normal: {
show: true,
fontSize:'10',
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
areaColor: '#F3B329',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
name: '确诊人数',
type: 'map',
geoIndex: 0,
data:filterData1
}
]
})
})
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新冠肺炎实时数据统计</title>
<link rel="stylesheet" type="text/css" href="CSS/daohanglan.css">
<link rel="stylesheet" type="text/css" href="CSS/zhengti.css">
<link rel="stylesheet" type="text/css" href="CSS/zuoyoulan.css">
<link rel="stylesheet" type="text/css" href="CSS/dibu.css">
<link rel="stylesheet" type="text/css" href="CSS/biaoge.css">
<link rel="stylesheet" type="text/css" href="CSS/shurukuang.css">
<link rel="stylesheet" type="text/css" href="CSS/xiangying.css">
<link rel="stylesheet" type="text/css" href="CSS/huandengpian.css">
<style>
img {
position:absolute;
}
</style>
</head>
<body>
<div class="header">
<div id="times"></div>
<h1 style="text-shadow: 2px 2px #8888ff;">新冠肺炎实时热点新闻</h1>
</div>
<div class="topnav">
<a href="index.html">首页</a>
<a href="news1.html">新闻1</a>
<a href="news2.html">新闻2</a>
<a href="news3.html">新闻3</a>
<a href="news4.html">新闻4</a>
<a href="news5.html">新闻5</a>
<a href="news6.html">新闻6</a>
<a href="news7.html">新闻7</a>
<a href="news8.html">新闻8</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="p1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="p2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="p3.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">?</a>
<a class="next" onclick="plusSlides(1)">?</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<div class="card">
<h2>疫情</h2>
<h5 id="显示日期"></h5>
<table>
<tr>
<tr>
<td>现有确诊病例</td>
<td id="现有确诊病例"></td>
</tr>
<tr>
<td>现有疑似病例</td>
<td id="现有疑似病例"></td>
</tr>
<tr>
<td>死亡病例</td>
<td id="死亡病例"></td>
</tr>
</tr>
</table>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>疫情地图</h2>
<div id="chinamap" style="width: 600px;height: 450px;margin: 0px auto"> </div>
<div id="chinamap1" style="display: none;width: 600px;height: 450px;margin: 0px auto"> </div>
<div id="chinamap2" style="display: none;width: 600px;height: 450px;margin: 0px auto"> </div>
<script src="JS/echarts.min.js"></script>
<script src="JS/china.js"></script>
<script src="JS/chinamap.js"></script>
<script src="JS/chinamap1.js"></script>
<script src="JS/chinamap2.js"></script>
<button type="button" onclick="divSW()">现有确诊病例</button>
<button type="button" onclick="divSW1()">疑似确诊病例</button>
<button type="button" onclick="divSW2()">累计死亡病例</button>
<script>
var dv = document.getElementById( "chinamap" );
var dv1 = document.getElementById( "chinamap1" );
var dv2 = document.getElementById( "chinamap2" );
function divSW() {
dv.style.display = "block";
dv1.style.display = "none";
dv2.style.display = "none";
}
function divSW1() {
dv.style.display = "none";
dv1.style.display = "block";
dv2.style.display = "none";
}
function divSW2() {
dv.style.display = "none";
dv1.style.display = "none";
dv2.style.display = "block";
}
</script>
</div>
</div>
</div>
<script src="JS/huandengpian.js" type="text/javascript"></script>
<script src="JS/qgbg.js" type="text/javascript"></script>
<script>
//得到时间并写入div
function getDate(){
//获取当前时间
var date = new Date();
//格式化为本地时间格式
var date1 = date.toLocaleString();
//获取div
document.getElementById("times").innerHTML=date1;
}
//使用定时器每秒向div写入当前时间
setInterval("getDate()",1000);
</script>
</body>
</html>
可视化结果显示：
内容总结
以上是互联网集市为您收集整理的Java爬虫+Mysql+Echarts实现全国疫情数据实时可视化全部内容，希望文章能够帮你解决Java爬虫+Mysql+Echarts实现全国疫情数据实时可视化所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】