全国疫情柱状图
我用的是info表格，表格中是全国各个省份在一个时间点的确诊人数；由于没有看清时间设计成了需要输入时间开始和结尾的样式了；
开始写一个jsp来将时间上传到servlet中
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <!DOCTYPE html>
4 <html>
5 <head>
6 <meta charset="UTF-8">
7 <title>查询界面</title>
8 </head>
9 <body>
10 <form action="searchservlet"target="show"method="post">
11 请输入查询的起始日期：<input type="text" name="beginyear">
12 请输入要查询的截至日期：<input type="text" name="endyear">
13 <input type="submit" value="提交">
14 </form>
15 </body>
16 </html>
searchservlet
import java.io.IOException;
import java.util.ArrayList;
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.google.gson.Gson;
@WebServlet("/searchservlet")
public class searchservlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String beginyearString=request.getParameter("beginyear");
String endyearString=request.getParameter("endyear");
List<Data>list=new ArrayList<Data>();
DataDao dataDao=new DataDao();
list=dataDao.search1(beginyearString, endyearString);
if (list!=null) {
System.out.print("查询成功");
request.setAttribute("list", list);
request.getRequestDispatcher("show.jsp").forward(request, response);
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
然后再dao层写入SQL语句；
Daopackage echart; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import com.mysql.jdbc.Statement; import com.sun.org.apache.xpath.internal.operations.And; public class DataDao { public List<Data> search1(String beginyear,String endyear){ int num=0; List<Data>list=new ArrayList<Data>(); Connection con=null; java.sql.Statement psts=null; ResultSet rs=null; try { con=DataDB.getCon(); String sql="select * from info where Date between '"+beginyear+"' and '"+endyear+"'"; System.out.print(sql); psts=con.createStatement(); rs=psts.executeQuery(sql); while(rs.next()){ //把数据库里面的数值传到界面 String id=rs.getString("Id"); String date=rs.getString("Date"); 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"); Data data=new Data(id,date,province,city,confirmed_num,yisi_num,cured_num,dead_num);//通过构造函数进行赋值 list.add(data);//将赋值的数添加到这个集合中 } } catch (SQLException e) { e.printStackTrace(); } return list; } public static void main(String[] args) { DataDao dataDao=new DataDao(); List<Data>list=dataDao.search1("2020-02-08 02:28:59","2020-02-08 02:28:59"); int size=list.size(); System.out.print(size); } }
然后servlet将函数运行完跳转到show.jsp界面
1 <%@ page language="java" contentType="text/html; charse=tUTF-8" 2 pageEncoding="UTF-8"%> 3 <%@page import="java.util.List"%> 4 <%@page import="echart.Data"%> 5 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 6 <!DOCTYPE html> 7 <html> 8 <head> 9 <meta charset="UTF-8"> 10 <title>信息显示页面</title> 11 </head> 12 <!-- 引入 echarts.js --> 13 <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> 14 <script type="text/javascript"> 15 // List<Data>list=request.getAttribute("list"); 16 // var names=new Array(); 17 // var chartData=new Array(); 18 // var length=list.length; 19 // for(i=0;i<length;i++){ 20 // names.pust(list[i].city); 21 // chartData.push(list[i].confirmed_num); 22 // } 23 </script> 24 25 </head> 26 <body> 27 28 29 <% request.setCharacterEncoding("utf-8"); 30 List <Data> provinces =(List<Data>) request.getAttribute("list"); 31 int i=0;%> 32 <div align="center"> 33 <!-- 为ECharts 准备一个具备大小（宽高）的DOM容器 --> 34 <div id="main" align="center" style="width: 1000px;height:600px;" > 35 <script type="text/javascript"> 36 var myChart = echarts.init(document.getElementById('main')); 37 var option = { //这里 option 表示使用 json 数据格式的配置来绘制图表 38 dataset: { 39 40 title: { 41 text: '全国各省确诊人数' 42 }, 43 tooltip: {}, 44 legend: { 45 data:['确诊人数'], 46 width:'auto', 47 height:'auto' 48 }, 49 50 source: [ 51 [ '省份','确诊人数'], 52 <% 53 //获取request域中的数据 54 if(provinces!=null){ 55 for(Data province:provinces){i++; 56 %> 57 ['<%=province.getProvince()%>','<%=province.getConfirmed_num()%>'], 58 <% 59 if(i>33)break; 60 } 61 62 } 63 %> 64 ] 65 }, 66 grid: {containLabel: true}, 67 xAxis: { 68 type: 'category'}, 69 yAxis: {},//配置在外轴显示的项 70 series: [ 71 { 72 name: '确诊人数', 73 type: 'bar', 74 encode: { 75 // 将 "amount" 列映射到 X 轴。 76 x: '省份', 77 // 将 "product" 列映射到 Y 轴。 78 y: '确诊人数' 79 } 80 }] 81 }; 82 83 // 使用刚指定的配置项和数据显示图表。 84 myChart.setOption(option); 85 </script> 86 </div> 87 88 89 </div> 90 91 <table> 92 <tr> 93 <td>省份</td> 94 <td>确诊人数</td> 95 <td>时间</td> 96 </tr> 97 <c:forEach items="${list }" var="list"> 98 <tr> 99 <td>${list.province }</td> 100 <td>${list.confirmed_num }</td> 101 <td>${list.date }</td> 102 </tr> 103 </c:forEach> 104 </table> 105 106 </body> 107 </html>
刚开始的时候没有一点的 思路，不知道该怎么用java来设计柱壮图，后来冷静下来，也是像曾删改查一样，先查找到，然后再用echarts设计柱状图；
echarts可以参考这里学习https://www.runoob.com/echarts/echarts-setup.html
在这周的学习中还是有所收获的，还有下面的两个任务，继续加油！
大体思路
1.在servlet中对获得的数据进行格式化转化（利用Gson将封装的信息转换成json的形式）
2.学习echarts的相关事件，在折线的基础上学习点击事件，并且利用里面的tooltip相关知识点，完成显示框和并悬停显示详细信息
3.在阶段二的基础上，使用ajax直接从数据库中获取各省份下的各个市的有关疫情的数据
1 package com.dao; 2 3 import java.sql.PreparedStatement; 4 import java.sql.ResultSet; 5 import java.sql.SQLException; 6 import java.util.ArrayList; 7 import java.util.List; 8 import com.bean.Bean; 9 import com.db.DB; 10 import com.sun.corba.se.pept.transport.Connection; 11 12 13 14 15 public class Dao { 16 17 //阶段一按着时间段进行查询 18 public List<Bean> CheckTime1(String firsttime,String lasttime){ 19 20 java.sql.Connection con=null; 21 PreparedStatement psts=null; 22 ResultSet rs=null; 23 String tablename="info"; 24 System.out.println("-------"); 25 DB db=new DB(); 26 27 try { 28 con=db.getCon(); 29 //String sql="select * from info where Date between '"+firsttime+"' and '"+lasttime+"'"; 30 String sql="select * from info where Date between '"+firsttime+"' and '"+lasttime+"'"; 31 32 psts=con.prepareStatement(sql); 33 //psts.setString(1,firsttime); 34 //psts.setString(2, lasttime); 35 rs=psts.executeQuery(); 36 List<Bean> list=new ArrayList<Bean>(); 37 while(rs.next()){ 38 39 String date=rs.getString("Date"); 40 String province=rs.getString("Province"); 41 String city=rs.getString("city"); 42 String confirmed_num=rs.getString("Confirmed_num"); 43 String cured_num=rs.getString("Cured_num"); 44 String dead_num=rs.getString("Dead_num"); 45 46 Bean data=new Bean(date,province,city,confirmed_num,cured_num,dead_num); 47 list.add(data); 48 } 49 return list; 50 }catch (SQLException e) { 51 // TODO Auto-generated catch block 52 e.printStackTrace(); 53 } 54 return null; 55 } 56 57 58 //阶段二按着时间点进行查询 59 public List<Bean> search(String data){ 60 int num=0; 61 DB db=new DB(); 62 List<Bean>list=new ArrayList<Bean>(); 63 Connection con=null; 64 java.sql.Statement psts=null; 65 ResultSet rs=null; 66 try { 67 con=(Connection) db.getCon(); 68 String sql="select * from info1 where Date ='"+data+"'"; 69 System.out.print(sql); 70 psts=((java.sql.Connection) con).createStatement(); 71 rs=psts.executeQuery(sql); 72 while(rs.next()){ 73 // String id=rs.getString("Id"); 74 String date=rs.getString("Date"); 75 String province=rs.getString("Province"); 76 String city=rs.getString("City"); 77 String confirmed_num=rs.getString("Confirmed_num"); 78 // String yisi_num=rs.getString("Yisi_num"); 79 String cured_num=rs.getString("Cured_num"); 80 String dead_num=rs.getString("Dead_num"); 81 82 Bean data1=new Bean(date,province,city,confirmed_num,cured_num,dead_num); 83 list.add(data1); 84 System.out.println("第二阶段dao"); 85 86 } 87 } catch (SQLException e) { 88 e.printStackTrace(); 89 } 90 return list; 91 } 92 //阶段三 93 public static List searchPro(String data,String province) { 94 int num=0; 95 List<Bean>list=new ArrayList<Bean>(); 96 Connection con=null; 97 java.sql.Statement psts=null; 98 ResultSet rs=null; 99 DB db=new DB(); 100 try { 101 con=(Connection) db.getCon(); 102 String sql="select * from info1 where Date ='"+data+"' and Province ='"+province+"'"; 103 System.out.print(sql); 104 psts=((java.sql.Connection) con).createStatement(); 105 rs=psts.executeQuery(sql); 106 while(rs.next()){ 107 // String id=rs.getString("Id"); 108 String date=rs.getString("Date"); 109 String city=rs.getString("City"); 110 String confirmed_num=rs.getString("Confirmed_num"); 111 // String yisi_num=rs.getString("Yisi_num"); 112 String cured_num=rs.getString("Cured_num"); 113 String dead_num=rs.getString("Dead_num"); 114 115 Bean pro=new Bean(date,province,city,confirmed_num,cured_num,dead_num); 116 list.add(pro); 117 118 System.out.println("第三阶段dao"); 119 } 120 } catch (SQLException e) { 121 e.printStackTrace(); 122 } 123 return list; 124 125 } 126 127 128 public static void main(String[] args) { 129 Dao dataDao=new Dao(); 130 //List<information>list=dataDao.search("2020-02-08 02:28:59"); 131 List<Bean>list=dataDao.searchPro("2020-02-08 02:28:59","湖北省"); 132 int size=list.size(); 133 System.out.print(size); 134 135 } 136 137 } 138 139 Dao.java
package com.servlet; import java.io.IOException; import java.util.ArrayList; 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.bean.Bean; import com.dao.Dao; import com.google.gson.Gson; /** * Servlet implementation class InfoServlet */ @WebServlet("/InfoServlet") public class BeanServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public BeanServlet() { super(); // TODO Auto-generated constructor stub } /** * @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"); response.setCharacterEncoding("UTF-8"); String dataString=request.getParameter("time"); List<Bean>list=new ArrayList<Bean>(); Dao dataDao=new Dao(); list=dataDao.search(dataString); if(list!=null) { Gson gson = new Gson(); String json = gson.toJson(list); System.out.println(json); response.getWriter().write(json); } } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
1 package com.servlet; 2 3 import java.io.IOException; 4 import java.sql.SQLException; 5 import java.util.ArrayList; 6 import java.util.List; 7 8 import javax.servlet.ServletException; 9 import javax.servlet.annotation.WebServlet; 10 import javax.servlet.http.HttpServlet; 11 import javax.servlet.http.HttpServletRequest; 12 import javax.servlet.http.HttpServletResponse; 13 14 import com.bean.Bean; 15 import com.bean.City; 16 import com.dao.Dao; 17 import com.google.gson.Gson; 18 19 /** 20 * Servlet implementation class proServlet 21 */ 22 @WebServlet("/proServlet") 23 public class CityServlet extends HttpServlet { 24 private static final long serialVersionUID = 1L; 25 26 /** 27 * @see HttpServlet#HttpServlet() 28 */ 29 public CityServlet() { 30 super(); 31 // TODO Auto-generated constructor stub 32 } 33 34 /** 35 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) 36 */ 37 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 38 // TODO Auto-generated method stub 39 request.setCharacterEncoding("UTF-8"); 40 response.setCharacterEncoding("UTF-8"); 41 String method = request.getParameter("method"); 42 if(method.equals("d")) { 43 try { 44 d(request, response); 45 } catch (SQLException e) { 46 e.printStackTrace(); 47 } 48 }else if(method.equals("city")) { 49 try { 50 city(request, response); 51 } catch (SQLException e) { 52 e.printStackTrace(); 53 } 54 } 55 } 56 /** 57 * @param request 58 * @param response 59 */ 60 private void d(HttpServletRequest request, HttpServletResponse response)throws SQLException, ServletException, IOException { 61 // TODO Auto-generated method stub 62 String province = request.getParameter("province"); 63 String time = "2020-02-12 10:14:15"; 64 Dao dao=new Dao(); 65 List<Bean> list = dao.searchPro(time,province); 66 List<City> data = new ArrayList<City>(); 67 for(int i=1; i<list.size();i++) { 68 City city = new City(); 69 city.setProvince(list.get(i).getCity()); 70 city.setConfirmed_num(list.get(i).getConfirmed_num()); 71 data.add(city); 72 } 73 Gson gson = new Gson(); 74 String json = gson.toJson(data); 75 System.out.println(json); 76 response.getWriter().write(json); 77 } 78 79 /** 80 * @param request 81 * @param response 82 */ 83 private void city(HttpServletRequest request, HttpServletResponse response)throws SQLException, ServletException, IOException { 84 // TODO Auto-generated method stub 85 String province = request.getParameter("province"); 86 String time = "2020-02-12 10:14:15"; 87 Dao dao=new Dao(); 88 List<Bean> list = dao.searchPro(time,province); 89 List<City> data = new ArrayList<City>(); 90 for(int i=1; i<list.size();i++) { 91 City city = new City(); 92 city.setProvince(list.get(i).getCity()); 93 city.setConfirmed_num(list.get(i).getConfirmed_num()); 94 data.add(city); 95 } 96 Gson gson = new Gson(); 97 String json = gson.toJson(data); 98 System.out.println(json); 99 request.setAttribute("list", json); 100 request.setAttribute("province", province); 101 request.getRequestDispatcher("show_province.jsp").forward(request, response); 102 } 103 104 105 /** 106 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) 107 */ 108 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 109 // TODO Auto-generated method stub 110 doGet(request, response); 111 } 112 113 }
1 show_china 2 3 <%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPEhtml><htmlstyle="height:100%"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/><base><title>全国疫情地图</title><scriptsrc="js/jquery-1.12.3.min.js"type="text/javascript"></script><scripttype="text/javascript"src="js/echarts.min.js"></script><scripttype="text/javascript"src="js/china.js"></script><scripttype="text/javascript"src="province-json"></script></head><bodystyle="height:100%;margin:0"><divclass="row"style="background-color:silver;height:50px;text-align:center;line-height:50px">查询的日期<inputtype="text"name="time"id="time"placeholder="yyyy-MM-ddhh:mm:ss"><inputtype="button"value="查询"onclick="tu()"></div><divid="main"style="height:100%"></div></body><style>*{margin:0;padding:0}html,body{width:100%;height:100%;}#main{width:600px;height:450px;margin:20pxauto;border:1pxsolid#ddd;}/*默认长宽比0.75*/</style><scripttype="text/javascript">functionrandomData(){returnMath.round(Math.random()*500);}vardt;varmydata1=newArray(0);functiontu(){time=$("#time").val();//alert(time.substring(0,2));$.ajax({url:"BeanServlet",//处理页面地址，表示ajax要用哪个页面处理async:true,type:"POST",//传值方式data:{"time":time},success:function(data){dt=data;for(vari=0;i<33;i++){vard={};d["province"]=dt[i].province;//.substring(0,2);d["confirmed_num"]=dt[i].confirmed_num;//d["yisi_num"]=dt[i].yisi_num;d["cured_num"]=dt[i].cured_num;d["dead_num"]=dt[i].dead_num;mydata1.push(d);}//varmdata=JSON.stringify(mydata1);varoptionMap={backgroundColor:'#FFFFFF',title:{text:'全国疫情地图',subtext:'',x:'center'},tooltip:{formatter:function(params){returnparams.province+'<br/>'+'确诊人数:'+params.confirmed_num+'<br/>'+'死亡人数:'+params['data'].dead_num+'<br/>'+'治愈人数:'+params['data'].cured_num;}//数据格式化},//左侧小导航图标visualMap:{min:0,max:35000,text:['多','少'],//取值范围的文字realtime:false,calculable:true,inRange:{color:['#f5bba7','#974236','#372a28']//取值范围的颜色},show:true//图注},//配置属性series:[{type:'map',mapType:'china',roam:false,//不开启缩放和平移zoom:1.23,//视角缩放比例label:{show:true,fontSize:'10',color:'rgba(0,0,0,0.7)'},itemStyle:{//外边框(底层地图)的一些属性borderColor:'rgba(0,0,0,0.2)',/*borderWidth:6,shadowBlur:10,shadowColor:'rgba(0,0,0,0.2)',*/},emphasis:{itemStyle:{//高亮时点的颜色areaColor:'#F3B329',//鼠标选择区域颜色shadowOffsetX:0,shadowOffsetY:0,shadowBlur:20,borderWidth:0,shadowColor:'rgba(0,0,0,0.5)'},},data:mydata1,nameMap:{'南海诸岛':'南海诸岛','北京':'北京市','天津':'天津市','上海':'上海市','重庆':'重庆市','河北':'河北省','河南':'河南省','云南':'云南省','辽宁':'辽宁省','黑龙江':'黑龙江省','湖南':'湖南省','安徽':'安徽省','山东':'山东省','新疆':'新疆维吾尔自治区','江苏':'江苏省','浙江':'浙江省','江西':'江西省','湖北':'湖北省','广西':'广西壮族自治区','甘肃':'甘肃省','山西':'山西省','内蒙古':"内蒙古自治区",'陕西':'陕西省','吉林':'吉林省','福建':'福建省','贵州':'贵州省','广东':'广东省','青海':'青海省','西藏':'西藏自治区','四川':'四川省','宁夏':'宁夏回族自治区','海南':'海南省','台湾':'台湾','香港':'香港','澳门':'澳门'}}]};//初始化echarts实例varmyChart=echarts.init(document.getElementById('main'));myChart.on('click',function(params){alert(params.name);/*varurl="servlet2?province="+params.name;*/varurl="CityServlet?method=city&province="+params.name+"&time="+time;window.location.href=url;});//使用制定的配置项和数据显示图表myChart.setOption(optionMap);},error:function(){alert("请求失败");},dataType:"json"});}</script></html>
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 4 <!DOCTYPE html> 5 <html> 6 <head> 7 <meta charset="UTF-8"> 8 <script src="js/jquery-1.12.3.min.js" type="text/javascript"></script> 9 <script type="text/javascript" src="js/echarts.min.js"></script> 10 <script type="text/javascript" src="js/china.js"></script> 11 <title>Insert title here</title> 12 </head> 13 <div id="main" style="height: 100%"></div> 14 <style> 15 *{margin:0;padding:0} 16 html,body{ 17 width:100%; 18 height:100%; 19 } 20 #main{ 21 width:600px; 22 height:450px; 23 margin: 20px auto; 24 border:1px solid #ddd; 25 } 26 /*默认长宽比0.75*/ 27 </style> 28 <body> 29 30 31 <script> 32 //初始化echarts实例 33 var myChart = echarts.init(document.getElementById('main')); 34 35 var province = "${province}"; 36 37 38 39 $.get("mapjson/"+ province +".json", function (geoJson) { 40 41 myChart.hideLoading(); 42 43 echarts.registerMap(province, geoJson); 44 45 myChart.setOption(option = { 46 title: { 47 text: province + '疫情地图', 48 subtext : '', 49 x : 'center' 50 }, 51 tooltip: { 52 trigger: 'item', 53 formatter: '{b}<br/>{c} (确诊 / 人)' 54 }, 55 toolbox: { 56 show: true, 57 orient: 'vertical', 58 left: 'right', 59 top: 'center', 60 feature: { 61 dataView: {readOnly: false}, 62 restore: {}, 63 saveAsImage: {} 64 } 65 }, 66 visualMap: { 67 min: 0, 68 max: 50000, 69 text : [ '多', '少' ],//取值范围的文字 70 realtime : false, 71 calculable : true, 72 inRange : { 73 color : [ '#f5bba7', '#974236', ' #372a28' ]//取值范围的颜色 74 }, 75 show:true//图注 76 }, 77 series: [ 78 { 79 name: province + '地区疫情情况', 80 type: 'map', 81 mapType: province, // 自定义扩展图表类型 82 roam: false,//不开启缩放和平移 83 label: { 84 show: true, 85 fontSize:'10', 86 color: 'rgba(0,0,0,0.7)' 87 }, 88 itemStyle : {//外边框(底层地图)的一些属性 89 borderColor : 'rgba(0, 0, 0, 0.2)', 90 /* borderWidth :6, 91 shadowBlur:10, 92 shadowColor: 'rgba(0, 0, 0, 0.2)', */ 93 94 }, 95 96 emphasis: { 97 itemStyle: { 98 99 // 高亮时点的颜色 100 areaColor: '#F3B329',//鼠标选择区域颜色 101 shadowOffsetX: 0, 102 shadowOffsetY: 0, 103 shadowBlur: 20, 104 borderWidth: 0, 105 shadowColor: 'rgba(0, 0 ,0, 0.5)' 106 }, 107 108 } 109 } 110 ] 111 }); 112 }); 113 114 115 116 $.ajax({ 117 url:"CityServlet?method=d", 118 async:true, 119 type:"POST", 120 data:{"province":province}, 121 dataType:"json", 122 success:function(data){ 123 alert(data.length); 124 var mydata1 = new Array(0); 125 for(var i=0;i<data.length;i++){ 126 var c = {}; 127 c["province"] = data[i].name+'市'; 128 c["confirmed_num"] = data[i].value; 129 mydata1.push(c); 130 } 131 132 myChart.setOption({ //加载数据图表 133 series: [{ 134 data: mydata1 135 }] 136 }); 137 }, 138 error:function(){ 139 alert("请求失败"); 140 }, 141 142 }); 143 144 145 146 147 </script> 148 149 150 </body> 151 </html>
