今天把昨天极限测试未完成的可视化操作做了一下，用的是echart，做的是柱状图。
下面是操作流程和步骤以及代码：
先展示一下效果：
代码部分：
前端html界面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="echarts.js"></script>
<script src="js/jquery.min.js"></script>
<body>
<div id="main" style="height:500%;"></div>
<button onclick="getdata()">点击</button>
<div id="main" style="height:500%;"></div>
</body>
<script>
var sale_nbr= new Array(0);
var cnt= new Array(0);
var round= new Array(0);
function getdata(){
var url = "servlet?method=setdata&randnum=" + Math.random();
$.ajax({
type: "get",
url: url,
data: [],
dataType: "json",
success: function(result){
fenli(result)
showbar()
},
error: function(){
alert("错误");
}
});
}
function showbar() {
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {
type: 'category',
data: sale_nbr
},
yAxis: {
type: 'value'
},
series: [
{
data:cnt,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
},
{
data:round,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
option && myChart.setOption(option);
}
function fenli(data){
for(i in data){
sale_nbr.push(data[i].sale_nbr)
cnt.push(data[i].cnt)
round.push(data[i].round)
}
}
</script>
</html>
dao层：
package com.test;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.LinkedHashMap;
import java.util.Map;
import java.util.stream.Collectors;
public class Dao {
public ArrayList<BarBean> select_all(){
Connection conn = null;
Statement stmt=null;
ResultSet rst = null;
try{
conn = DBUtil.getConnection();
stmt = conn.createStatement();
String sql = "select sale_nbr,cnt,round from jieguo01 where day_id='2021-09-01'";
rst = stmt.executeQuery(sql);
ArrayList<BarBean> array = new ArrayList<BarBean>();
while(rst.next())
{
BarBean bar = new BarBean();
bar.setSale_nbr(rst.getString("sale_nbr"));
bar.setCnt(rst.getString("cnt"));
bar.setRound(rst.getString("round"));
array.add(bar);
}
stmt.close();
rst.close();
return array;
}catch(SQLException e){
System.out.println("Error");
return new ArrayList<BarBean>();
}
}
public static Map<String,Integer> getrc()
{
int tnumi=0;
String sql="select * from bar ";
Map<String, Integer>map= new HashMap<String, Integer>();
Map<String, Integer>results= new LinkedHashMap<String, Integer>();
Connection conn =DBUtil.getConnection();
Statement st=null;
ResultSet rs=null;
try {
st=conn.createStatement();
st.executeQuery(sql);
rs=st.executeQuery(sql);
while(rs.next())
{
String keywords=rs.getString("name");
keywords=keywords.substring(1, keywords.length());
String[] split = keywords.split(" ");
for(int i=0;i<split.length;i++)
{
if(map.get(split[i])==null)
{
map.put(split[i],1);
}
else
{
map.replace(split[i], map.get(split[i])+1);
}
}
tnumi++;
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
DBUtil.close(rs, st, conn);
map.entrySet()
.stream()
.sorted((p1, p2) -> p2.getValue().compareTo(p1.getValue()))
.collect(Collectors.toList())
.forEach(ele -> results.put(ele.getKey(), ele.getValue()));
return results;
}
}
bean层：
package com.test;
public class BarBean {
public String getDay_id() {
return day_id;
}
public void setDay_id(String day_id) {
this.day_id = day_id;
}
public String getSale_nbr() {
return sale_nbr;
}
public void setSale_nbr(String sale_nbr) {
this.sale_nbr = sale_nbr;
}
public String getCnt() {
return cnt;
}
public void setCnt(String cnt) {
this.cnt = cnt;
}
public String getRound() {
return round;
}
public void setRound(String round) {
this.round = round;
}
public String day_id,sale_nbr,cnt,round;
public BarBean(){
}
public BarBean(String day_id, String sale_nbr, String cnt, String round) {
super();
this.day_id = day_id;
this.sale_nbr = sale_nbr;
this.cnt = cnt;
this.round = round;
}
}
servlet层：
package com.test;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
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 net.sf.json.JSONArray;
import net.sf.json.JSONObject;
/**
* Servlet implementation class servlet
*/
@WebServlet("/servlet")
public class Servlet extends HttpServlet {
private static final long serialVersionUID = 1L;
Dao dao=new Dao();
public void setdata(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
System.out.println("调用了方法");
JSONArray json=new JSONArray();
List<BarBean> list = dao.select_all();
for(int i=0;i<list.size();i++) {
JSONObject ob=new JSONObject();
ob.put("sale_nbr", list.get(i).getSale_nbr());
ob.put("cnt", list.get(i).getCnt());
ob.put("round", list.get(i).getRound());
json.add(ob);
}
System.out.println(json.toString());
PrintWriter out = response.getWriter();
//out.write("[120, 200, 150, 80, 70, 110, 130]");
System.out.println(list.size());
response.getWriter().write(json.toString());
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("utf-8");
String method=request.getParameter("method");
if(method.equals("setdata")) {
try {
setdata(request,response);
} catch (ServletException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}