sailxu00 2020-03-06
题目描述
问题分析
使用Echarts处理柱形图
源码
前台的目录结构
构建路径
后台的路径
后台的代码
package com.pjh.DBUtils; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import net.sf.json.JSONArray; import net.sf.json.JSONObject; public class DBUtils { private static String URL = "jdbc:mysql://localhost:3306/yiqing?useUnicode=true&characterEncoding=GB18030&useSSL=false&serverTimezone=GMT&allowPublicKeyRetrieval=true"; private static String username = "root"; private static String password = "123456"; public static Connection getConnection() { try { Class.forName("com.mysql.cj.jdbc.Driver"); return DriverManager.getConnection(URL, username, password); } catch (Exception e) { System.out.println("SQL CONNECTION FAILED!"); e.printStackTrace(); } return null; } public static String queryDataByDate(String date) { Connection connection = null; PreparedStatement preparedStatement = null; ResultSet resultSet = null; JSONArray jsonArray = new JSONArray(); String province = ""; String sql = "select * from info where Date like ‘"+date+"%‘ and City=‘‘"; try { connection = getConnection(); preparedStatement = connection.prepareStatement(sql); resultSet = preparedStatement.executeQuery(); while (resultSet.next()) { province += resultSet.getString("Province")+";"; } resultSet.close(); String string[] = province.split(";"); for (int i = 0; i < string.length; i++) { if (string[i].trim().equals("")) { continue; } sql = "select sum(Confirmed_num),sum(Yisi_num),sum(Cured_num),sum(Dead_num) from info where Date like ‘" +date+"%‘ and Province=‘"+string[i]+"‘"; preparedStatement = connection.prepareStatement(sql); resultSet = preparedStatement.executeQuery(); resultSet.next(); JSONObject jsonObject = new JSONObject(); jsonObject.put("name", string[i]); jsonObject.put("num", resultSet.getInt(1)); jsonObject.put("yisi", resultSet.getString(2)); jsonObject.put("cure", resultSet.getString(3)); jsonObject.put("dead", resultSet.getString(4)); resultSet.close(); sql = "select * from info where Date like ‘"+date+"%‘ and Province=‘"+string[i]+"‘"; preparedStatement = connection.prepareStatement(sql); resultSet = preparedStatement.executeQuery(); resultSet.next(); jsonObject.put("code", resultSet.getString("Code")); resultSet.close(); jsonArray.add(jsonObject); } return jsonArray.toString(); } catch (SQLException e) { e.printStackTrace(); return null; } } }
package com.pjh.servlet; import java.io.IOException; 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.pjh.DBUtils.DBUtils; /** * Servlet implementation class queryDataServlet */ @WebServlet("/queryDataServlet") public class queryDataServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public queryDataServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.getWriter().append("Served at: ").append(request.getContextPath()); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=UTF-8"); response.getWriter().write(DBUtils.queryDataByDate(request.getParameter("date"))); } }
前台的代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="layui/css/layui.css"> <script src="js/echarts.min.js"></script> <script src="js/jquery.min.js"></script> <style> #top { width: auto; height: 30px; text-align: center; margin: auto; padding-top: 5px; background-color: gray; } </style> <title>YiQing</title> </head> <body> <div id="top"> 请选择日期:<input type="date" name="date"><button>查询</button> </div> <div id="main" style="width: 100%;height:550px;overflow: auto;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById(‘main‘)); myChart.showLoading(); var names=[]; var nums=[]; $("button").click(function(){ names=[]; nums=[]; $(".head").empty(); $(".main").empty(); $.post( ‘http://localhost:8086/yiqing/queryDataServlet‘, {"date":$("input[name=date]").val()}, function(msg){ var json=JSON.parse(msg); var size=json.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:[‘确诊人数‘] }, grid: { y2: 150 }, xAxis: { type : ‘category‘, data: names, axisLabel:{ interval:0, rotate:-17, } }, 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> <table class="layui-table"> <thead class="head"> </thead> <tbody class="main"></tbody> </table> </body> </html>
结果样例