day02 疫情可视化项目上线

最新推荐文章于 2022-06-27 23:45:42 发布

你在狗叫什么、

最新推荐文章于 2022-06-27 23:45:42 发布

阅读量298

点赞数

本文链接：https://blog.csdn.net/awodwde/article/details/109784241

版权

1、读取疫情数据

接口地址： https://zaixianke.com/yq/all

读取的代码如下：

package com.it.reflect;

import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;
import java.util.Scanner;
/**
 * 获取疫情数据
 * @author 10953
 *
 */
public class Demo {

	public static void main(String[] args) throws Exception {
		URL u1 = new URL("https://zaixianke.com/yq/all");
		URLConnection conn = u1.openConnection();
		InputStream is = conn.getInputStream();
		BufferedReader br = new BufferedReader(new InputStreamReader(is, "UTF-8"));
		String text = br.readLine();
		System.out.println(text);
		br.close();
	}
}

读取的结果：是JSON数据

还需要准备一些前端的代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page
	import="java.net.URL,java.net.URLConnection,java.io.InputStream,java.io.InputStreamReader,java.io.BufferedReader"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>疫情地图</title>
<script type="text/javascript">
	
<%
			URL u1 = new URL("https://zaixianke.com/yq/all");
			URLConnection conn = u1.openConnection();
			InputStream is = conn.getInputStream();
			BufferedReader br = new BufferedReader(new InputStreamReader(is, "UTF-8"));
			String text = br.readLine();
			System.out.println(text);
			br.close();
			%>
			var data = <%=text%>
	
</script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script>
<script src="http://cdn.zaixianke.com/china.js"></script>
<script src="http://cdn.zaixianke.com/world.js"></script>
</head>
<body>
	<div id="main" style="width: 100%; height: 600px;"></div>
	<br>
	<div style="text-align: center">
		<a style="color: #333" class="control" align="center"
			href="javascript:updateMap(0)">国内累计</a> <a style="color: #333"
			class="control" align="center" href="javascript:updateMap(1)">国内新增</a>
		<a style="color: #333" class="control" align="center"
			href="javascript:updateMap(2)">全球累计</a> <a style="color: #333"
			class="control" align="center" href="javascript:updateMap(3)">全球新增</a>
	</div>
	<script src="control.js"></script>
</body>
</html>

主要是处理后端，所以前端的代码直接使用现成的

control.js代码在网盘

链接：https://pan.baidu.com/s/16aRWKyadIGGNASzC5vS3sA
提取码：2rhv