疫情管理中统计图表的制作.ppt

设计说明:选择合适的形式表达数据,尽量让数据内容直观形象,这是苏教版教材六年级下册“统计”教学的一个重要目标。

本设计以2020年发生在我国的新冠肺炎疫情发展为线索,有意识地选取部分疫情报告中的图表,有机引导学生学习用统计的眼光来分析疫情报告中的信息,学会选择合适的统计图来直观形象地表达数据,学会根据已有的数据作出科学的判断、估计或预测,从而体会统计知识、统计过程和统计方法在实际生活中的应用。

教学设计:一、苏州初期疫情———复习条形统计图,感受疫情的严峻形势1.呈现疫情严重信息。

师:同学们,今年年初,武汉市暴发了新冠肺炎疫情。

我们苏州也未能幸免,图1是截至2020年2月8日24:00苏州市新冠肺炎疫情分布图。

大家从这幅图中可以获得哪些信息?黄色橙色图1预设1:我发现苏州市疫情达到严重级别的区市是苏州工业园区、昆山市、吴中区和吴江区。

预设2:我看到表格里确诊人数最多的苏州工业园区已经达到24人,第二多的昆山市有16人。

预设3:从图中看出苏州市的疫情可以分成三个部分:红色部分为确诊5人以上的,涉及区市有4个;橙色部分是确诊3~5人的,涉及区市也有4个;黄色部分是确诊1~2人的,涉及区市只有2个。

2.提出数学问题。

师:从分布图上的不同颜色可以清楚地看出苏州市的疫情分布情况。

但是呈红色的4个区市的严重情况都一样吗?呈橙色的4个区市呢?你有什么数学的办法让大家看得更清楚呢?预设4:继续用不同的颜色区分,比如达到10人或10人以上的用紫色表示。

预设5:可以用条形统计图来表示各个区市确诊人数。

师:(追问)为什么是条形统计图,而不是别的统计图呢?预设6:通过条形图可以很清晰地看出各个区市确诊人数的多少。

3.复习画条形统计图。

教师引领学生复习画条形统计图:以区市为横轴,以累计确诊人数为纵轴,绘制条形统计图,这样就可以知道各区市的具体确诊病例情况了。

然后指导学生分别制作红色区域与橙色区域的统计图(如图2、图3)并分析。

全国疫情统计可视化（图表）题⽬描述问题分析 使⽤Echarts处理柱形图源码 前台的⽬录结构 构建路径 后台的路径 后台的代码1 package com.pjh.DBUtils;23 import java.sql.Connection;4 import java.sql.DriverManager;5 import java.sql.PreparedStatement;6 import java.sql.ResultSet;7 import java.sql.SQLException;89 import net.sf.json.JSONArray;10 import net.sf.json.JSONObject;1112public class DBUtils {1314private static String URL = "jdbc:mysql://localhost:3306/yiqing?useUnicode=true&characterEncoding=GB18030&useSSL=false&serverTimezone=GMT&allowPublicKeyRetrieval=true";15private static String username = "root";16private static String password = "123456";1718public static Connection getConnection() {19try {20 Class.forName("com.mysql.cj.jdbc.Driver");21return DriverManager.getConnection(URL, username, password);22 } catch (Exception e) {23 System.out.println("SQL CONNECTION FAILED!");24 e.printStackTrace();25 }26return null;27 }2829public static String queryDataByDate(String date) {30 Connection connection = null;31 PreparedStatement preparedStatement = null;32 ResultSet resultSet = null;33 JSONArray jsonArray = new JSONArray();3435 String province = "";36 String sql = "select * from info where Date like '"+date+"%' and City=''";37try {38 connection = getConnection();39 preparedStatement = connection.prepareStatement(sql);40 resultSet = preparedStatement.executeQuery();41while (resultSet.next()) {42 province += resultSet.getString("Province")+";";43 }44 resultSet.close();45 String string[] = province.split(";");46for (int i = 0; i < string.length; i++) {47if (string[i].trim().equals("")) {48continue;49 }50 sql = "select sum(Confirmed_num),sum(Yisi_num),sum(Cured_num),sum(Dead_num) from info where Date like '"51 +date+"%' and Province='"+string[i]+"'";52 preparedStatement = connection.prepareStatement(sql);53 resultSet = preparedStatement.executeQuery();54 resultSet.next();55 JSONObject jsonObject = new JSONObject();56 jsonObject.put("name", string[i]);57 jsonObject.put("num", resultSet.getInt(1));58 jsonObject.put("yisi", resultSet.getString(2));59 jsonObject.put("cure", resultSet.getString(3));60 jsonObject.put("dead", resultSet.getString(4));61 resultSet.close();62 sql = "select * from info where Date like '"+date+"%' and Province='"+string[i]+"'";63 preparedStatement = connection.prepareStatement(sql);64 resultSet = preparedStatement.executeQuery();65 resultSet.next();66 jsonObject.put("code", resultSet.getString("Code"));67 resultSet.close();68 jsonArray.add(jsonObject);69 }70return jsonArray.toString();71 } catch (SQLException e) {72 e.printStackTrace();73return null;74 }75 }76 }1 package com.pjh.servlet;23 import java.io.IOException;4 import javax.servlet.ServletException;5 import javax.servlet.annotation.WebServlet;6 import javax.servlet.http.HttpServlet;7 import javax.servlet.http.HttpServletRequest;8 import javax.servlet.http.HttpServletResponse;910 import com.pjh.DBUtils.DBUtils;1112/**13 * Servlet implementation class queryDataServlet14*/15 @WebServlet("/queryDataServlet")16public class queryDataServlet extends HttpServlet {17private static final long serialVersionUID = 1L;1819/**20 * @see HttpServlet#HttpServlet()21*/22public queryDataServlet() {23 super();24// TODO Auto-generated constructor stub25 }2627/**28 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)29*/30protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {31 response.getWriter().append("Served at: ").append(request.getContextPath());32 }3334/**35 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)36*/37protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {38 request.setCharacterEncoding("utf-8");39 response.setContentType("text/html;charset=UTF-8");40 response.getWriter().write(DBUtils.queryDataByDate(request.getParameter("date")));41 }4243 } 前台的代码1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">6 <link rel="stylesheet" href="layui/css/layui.css">7 <script src="js/echarts.min.js"></script>8 <script src="js/jquery.min.js"></script>9 <style>10 #top {11 width: auto;12 height: 30px;13 text-align: center;14 margin: auto;15 padding-top: 5px;16 background-color: gray;17 }18 </style>19 <title>YiQing</title>20 </head>21 <body>2223 <div id="top">24请选择⽇期：<input type="date" name="date"><button>查询</button>25 </div>2627 <div id="main" style="width: 100%;height:550px;overflow: auto;"></div>28 <script type="text/javascript">29var myChart = echarts.init(document.getElementById('main'));30 myChart.showLoading();31var names=[];32var nums=[];33 $("button").click(function(){34 names=[];35 nums=[];36 $(".head").empty();37 $(".main").empty();38 $.post(39'http://localhost:8086/yiqing/queryDataServlet',40 {"date":$("input[name=date]").val()},41 function(msg){42var json=JSON.parse(msg);43var size=json.length;44for(i=0;i<size;i++){45 names.push(json[i].name);46 nums.push(parseInt(json[i].num));47 }4849 myChart.hideLoading();50var option = {51 title: {52 text: $("input[name=date]").val()+'确诊⼈数'53 },54 tooltip: {},55 legend: {56 data:['确诊⼈数']57 },58 grid: {59 y2: 15060 },61 xAxis: {62 type : 'category',63 data: names,64 axisLabel:{65 interval:0,66 rotate:-17,67 }68 },69 yAxis: {},70 series: [{71 name: '确诊⼈数',72 type: 'bar',73 data: nums74 }]75 };76 myChart.setOption(option);77 tr="<tr><th>省份</th><th>确诊⼈数</th><th>疑似⼈数</th><th>治愈⼈数</th><th>死亡⼈数</th><th>编码</th></tr>";78 $('.head').append(tr);79for(i=0;i<size;i++)80 $('.main').append("<tr></tr>");81 $('.main tr').each(function(i){82 $(this).append("<td>"+json[i].name+"</td>");83 $(this).append("<td>"+json[i].num+"</td>");84 $(this).append("<td>"+json[i].yisi+"</td>");85 $(this).append("<td>"+json[i].cure+"</td>");86 $(this).append("<td>"+json[i].dead+"</td>");87 $(this).append("<td>"+json[i].code+"</td>");88 })89 }9091 )92 })93 </script>94 <table class="layui-table">95 <thead class="head">96 </thead>97 <tbody class="main"></tbody>98 </table>99 </body>100 </html>结果样例。