可视化:echarts初使用

本次项目,在老师的指导下学会了在navacat中导入sql文件,还学会了echarts的使用,当然是从Echarts的官网:https://echarts.apache.org/examples/zh/editor.html?c=bar-stack寻找的模板,之后为了传值,自学了json的用法,虽然还不是太懂,也不是很熟练,但是一步一步的能传值了,下面是源代码:

柱状图页面:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="echarts/echarts.min.js"></script>
<script src="Jquery[1].js"></script>
</head>
<body>
<input type="date" name="date"><button>查询</button>
<div id="main" style="width: 600px;height:400px;overflow: auto;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var names=[];
var nums=[];
$("button").click(function(){
$.post(
'http://localhost:8080/class.ksh.test/search',
{"courses":$("input[name=Date]").val()},
function(msg){
var json=courses.parse(msg);
var size=courses.length;
for(i=0;i<size;i++){
names.push(json[i].name);
nums.push(parseInt(json[i].num));
}

myChart.hideLoading();
// 指定图表的配置项和数据
var option = {
title: {
text: $("input[name=date]").val()+'确诊人数'
},
tooltip: {},
legend: {
data:['确诊人数']
},
xAxis: {
data: names
},
yAxis: {},
series: [{
name: '确诊人数',
type: 'bar',
data: nums
}]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
tr="<tr><th>省份</th><th>确诊人数</th><th>疑似人数</th><th>治愈人数</th><th>死亡人数</th><th>编码</th></tr>";
$('.head').append(tr);
for(i=0;i<size;i++)
$('.main').append("<tr></tr>");
$('.main tr').each(function(i){
$(this).append("<td>"+json[i].name+"</td>");
$(this).append("<td>"+json[i].num+"</td>");
$(this).append("<td>"+json[i].yisi+"</td>");
$(this).append("<td>"+json[i].cure+"</td>");
$(this).append("<td>"+json[i].dead+"</td>");
$(this).append("<td>"+json[i].code+"</td>");
})
}

)
})
</script>
</body>
</html>

java代码(部分没用到的不贴了):

servlet:

package com.hjf.servlet;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.hjf.entity.Course;
import com.hjf.entity.Course1;
import com.hjf.service.CourseService;

@WebServlet("/CourseServlet")
public class CourseServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

CourseService service = new CourseService();

/**
* 方法选择
*/
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
String method = req.getParameter("method");

if ("search".equals(method)) {
add(req, resp);
}

private void search(HttpServletRequest req, HttpServletResponse resp) throws IOException, ServletException{
req.setCharacterEncoding("utf-8");
String Date = req.getParameter("Date");
List<Course> courses = service.search(Date);
System.out.println(courses);
if(courses == null) {
req.setAttribute("courses", "查询失败,此月份无信息");
req.getRequestDispatcher("search.jsp").forward(req,resp);
} else {
req.setAttribute("courses", courses);
req.getRequestDispatcher("searchlist.jsp").forward(req,resp);
req.getRequestDispatcher("try.html").forward(req,resp);
}
}

Course:

package com.hjf.dao;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import com.hjf.entity.Course;
import com.hjf.entity.Course1;
import com.hjf.util.DBUtil;


public class Course {

private String Province;
private String Confirmed_num;
private String City;
private String Yisi_num;
private String Cured_num;
private String Dead_num;
private String Code;

public String getProvince() {
return Province;
}
public void setProvince(String Province) {
this.Province = Province;
}
public String getConfirmed_num() {
return Confirmed_num;
}
public void setConfirmed_num(String confirmed_num) {
this.Confirmed_num = confirmed_num;
}
public String getCity() {
return City;
}
public void setCity(String city) {
this.City = city;
}
public String getYisi_num() {
return Yisi_num;
}
public void setYisi_num(String yisi_num) {
this.Yisi_num = yisi_num;
}
public String getCured_num() {
return Cured_num;
}
public void setCured_num(String cured_num) {
this.Cured_num = cured_num;
}
public String getDead_num() {
return Dead_num;
}
public void setDead_num(String dead_num) {
this.Dead_num = dead_num;
}
public String getCode() {
return Code;
}
public void setCode(String code) {
this.Code = code;
}

public Course(String Province, String City, String Confirmed_num, String Yisi_num, String Cured_num,
String Dead_num, String Code) {
this.Province=Province;
this.City=City;
this.Confirmed_num=Confirmed_num;
this.Yisi_num=Yisi_num;
this.Cured_num=Cured_num;
this.Dead_num=Dead_num;
this.Code=Code;

}

}

Dao:

public List<Course> search(String Date) {
String sql = "select * from info1 where Date ='"+Date+"'";

List<Course> list = new ArrayList<>();
Connection conn = DBUtil.getConn();
Statement state = null;
ResultSet rs = null;

try {
state = conn.createStatement();
rs = state.executeQuery(sql);
Course bean = null;
while (rs.next()) {
String Province = rs.getString("Province");
String City = rs.getString("City");
String Confirmed_num = rs.getString("Confirmed_num");
String Yisi_num = rs.getString("Yisi_num");
String Cured_num = rs.getString("Cured_num");
String Dead_num = rs.getString("Dead_num");
String Code = rs.getString("Code");
bean = new Course(Province,City,Confirmed_num,Yisi_num,Cured_num,Dead_num,Code);
list.add(bean);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(rs, state, conn);
}
System.out.println(list);
return list;
}

service:

package com.hjf.service;

import java.util.List;

import com.hjf.dao.CourseDao;
import com.hjf.entity.Course;
import com.hjf.entity.Course1;

public class CourseService {

public List<Course> search(String Date) {
return cDao.search(Date);
}

}

JDBCUtil:

package com.a;

import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;

public class JDBCUtils {
//静态语句块
static {
//JDBCUtils.calss获得对象
//getClassLoader()类加载器
//getResourceAsStream("db.properties")加载资源文件放到输入流中
InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("db.properties");
//创建Properties类型对象
Properties p = new Properties();
//加载流文件
try {
p.load(is);
String driver = p.getProperty("driver");
//加载驱动
Class.forName(driver);
System.out.println("驱动加载成功");

} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

}

}

DBUtil:

package com.hjf.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;


public class DBUtil {

public static String db_url = "jdbc:mysql://localhost:3306/erqiu?characterEncoding=utf8";
public static String db_user = "root";
public static String db_pass = "zhangxinyue520";

public static Connection getConn () {
Connection conn = null;

try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(db_url, db_user, db_pass);
} catch (Exception e) {
e.printStackTrace();
}

return conn;
}

public static void close (Statement state, Connection conn) {
if (state != null) {
try {
state.close();
} catch (SQLException e) {
e.printStackTrace();
}
}

if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}

public static void close (ResultSet rs, Statement state, Connection conn) {
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}

if (state != null) {
try {
state.close();
} catch (SQLException e) {
e.printStackTrace();
}
}

if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}

public static void main(String[] args) throws SQLException {
Connection conn = getConn();
PreparedStatement pstmt = null;
ResultSet rs = null;
String sql ="select * from info1";
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
if(rs.next()){
System.out.println("欧了");
}else{
System.out.println("再试试");
}
}
}

JDBC:

package com.tjl.jdbc;

public class JDBC {
public static void main(String args[]) {
try {
Class.forName("com.mysql.jdbc.Driver");
System.out.println("驱动加载成功");
} catch (ClassNotFoundException e) {
e.printStackTrace();
System.out.println("驱动加载失败");
}
}

}

错误肯定还有很多,之后我会继续学习,改正不足,查找缺漏。

猜你喜欢

转载自www.cnblogs.com/zhangxinyue/p/12436218.html