全球疫情统计APP图表展示：
将该任务分解成三部分来逐个实现：
①爬取全球的疫情数据存储到云服务器的MySQL上
②在web项目里添加一个servlet，通过参数的传递得到对应的json数据
③设计AndroidAPP，通过时间和地名来访问服务器上的对应的servlet来获取json数据，然后将它与图表联系
第一步：由前面的web项目的积累，爬取全球的数据就很容易，利用Python爬虫爬取丁香医生上的数据，存储到服务器上的MySQL
t path import requests from bs4 import BeautifulSoup import json import pymysql import numpy as np import time url = 'https://ncov.dxy.cn/ncovh5/view/pneumonia?from=timeline&isappinstalled=0' #请求地址 headers = {'user-agent':'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36'}#创建头部信息 response = requests.get(url,headers = headers) #发送网络请求 #print(response.content.decode('utf-8'))#以字节流形式打印网页源码 content = response.content.decode('utf-8') soup = BeautifulSoup(content, 'html.parser') listB = soup.find_all(name='script',attrs={"id":"getListByCountryTypeService2true"}) world_messages = str(listB)[95:-21] world_messages_json = json.loads(world_messages) # print(listB) # print(world_messages) worldList = [] for k in range(len(world_messages_json)): worldvalue = (world_messages_json[k].get('id'),time.strftime('%Y-%m-%d %H:%M:%S',time.localtime(time.time())), world_messages_json[k].get('continents'),world_messages_json[k].get('provinceName'), world_messages_json[k].get('cityName'),world_messages_json[k].get('currentConfirmedCount'), world_messages_json[k].get('suspectedCount'),world_messages_json[k].get('curedCount'),world_messages_json[k].get('deadCount'),world_messages_json[k].get('locationId'), world_messages_json[k].get('countryShortCode'),) worldList.append(worldvalue) db = pymysql.connect("139.129.221.11", "root", "fengge666", "yiqing", charset='utf8') cursor = db.cursor() #sql_clean_world = "TRUNCATE TABLE world_map" sql_world = "INSERT INTO world_map values (%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s)" worldTuple = tuple(worldList) # # try: # cursor.execute(sql_clean_world) # db.commit() # except: # print('执行失败，进入回调1') # db.rollback() try: cursor.executemany(sql_world,worldTuple) db.commit() except: print('执行失败，进入回调3') db.rollback() db.close()
第二步：在之前的web项目里增加一个worldServlet来通过传递过来的参数（时间，地名）来获取服务器里数据库的信息，然后以json的数据格式返回。
et; 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.google.gson.Gson; import Bean.World; import Dao.predao; /** * Servlet implementation class worldServlet */ @WebServlet("/worldServlet") public class worldServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public worldServlet() { 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.setContentType("text/html;charset=utf-8"); response.setCharacterEncoding("utf-8"); String date=request.getParameter("date"); String name=request.getParameter("name"); //System.out.println("666:"+date+" "+name); predao dao=new predao(); World bean=dao.findworld(date,name); //if(bean==null) // System.out.println("world为空"); Gson gson = new Gson(); String json = gson.toJson(bean); response.getWriter().write(json); //System.out.println(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); }
第三步：Android端的设计，也要细分成两部分。第一部分设计界面的样式以及图表的展示，第二部分就是实现Android端访问远程服务器里的数据获取对应的信息，然后再配置到Android的图表里。
第一部分实现界面的设计，以及图表。
xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:id="@+id/tv_time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:text="时间" android:textSize="25dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <EditText android:id="@+id/et_time" android:layout_width="250dp" android:layout_height="46dp" android:layout_marginEnd="100dp" android:layout_marginRight="100dp" android:gravity="center" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="@+id/tv_time" /> <TextView android:id="@+id/tv_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="99dp" android:paddingTop="110dp" android:text="国家名" android:textSize="25dp" app:layout_constraintBottom_toTopOf="@+id/chartshow_wb" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <EditText android:id="@+id/et_name" android:layout_width="250dp" android:layout_height="60dp" android:gravity="center" android:paddingLeft="120dp" app:layout_constraintBottom_toBottomOf="@+id/bt_ly" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="@+id/bt_ly" app:layout_constraintTop_toTopOf="@+id/tv_time" /> <LinearLayout android:id="@+id/bt_ly" android:layout_width="409dp" android:layout_height="209dp" android:layout_marginTop="16dp" android:gravity="center_horizontal" android:paddingTop="150dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.0" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> <Button android:id="@+id/linechart_bt" style="?android:attr/buttonStyleSmall" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="折线图" /> <Button android:id="@+id/barchart_bt" style="?android:attr/buttonStyleSmall" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="柱状图" /> <Button android:id="@+id/piechart_bt" style="?android:attr/buttonStyleSmall" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="饼状图" /> </LinearLayout> <WebView android:id="@+id/chartshow_wb" android:layout_width="408dp" android:layout_height="0dp" android:layout_gravity="center" android:layout_marginBottom="4dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/tv_name"> </WebView> </androidx.constraintlayout.widget.ConstraintLayout>
界面有三部分组成：其一是时间选择框和地名选择，其二就是三个按钮（折线，柱状，圆饼），其三就是webview来展示我们的图表界面
图表的设计，首先要将echart.min.js放在AndroidStudio里的assets里，然后再放入自己的图表html代码，通过json数据来给图表进行赋值。同样在主页面对webview进行一堆设置，允许运行脚本，设置它的loadURL，然后设计三个按钮的点击方式，同时启动不同的脚本。
<!DOCTYPE html> <!-- release v4.3.6, copyright 2014 - 2017 Kartik Visweswaran --> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Android使用Echarts示例</title> </head> <body> <div id="main" style=" 100%; height: 350px;"></div> <script src="./echarts.min.js"></script> <script type="text/javascript"> window.addEventListener("resize",function(){ option.chart.resize(); }); //初始化路径 var myChart; // 通用属性定义 var options = { title : { text : "Echart测试" }, tooltip : { show : false }, toolbox : { show : false }, }; function doCreatChart(type,jsondata){ // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); if(type=='line'||type=='bar') { // 指定图表的配置项和数据 options = { title: { text: '人数' }, tooltip: {}, legend: { data:['疫情状况'] }, xAxis: { data: ["确诊","疑似","治愈","死亡"] }, yAxis: {}, series: [{ name: '患者数', type: type, data: jsondata }] }; }else{ options = { series : [ { type:type, radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'确诊'}, {value:310, name:'疑似'}, {value:234, name:'治愈'}, {value:135, name:'死亡'} ] } ] }; } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(options); } </script> </body> </html>
第二部分就是通过Android端的http访问来获取服务器端的json数据，在将该数据传到图表的数据格式里。
xample.yiqing; import android.app.Activity; import android.app.DatePickerDialog; import android.os.Bundle; import android.util.Log; import android.view.View; import android.webkit.WebView; import android.widget.Button; import android.widget.DatePicker; import android.widget.EditText; import org.json.JSONObject; import java.io.ByteArrayOutputStream; import java.io.InputStream; import java.net.HttpURLConnection; import java.net.URL; import java.util.Calendar; public class MainActivity extends Activity implements View.OnClickListener { private EditText meditText,etname; private Button linechart_bt,barchart_bt,piechart_bt; private WebView chartshow_wb; private String name; private String data; private world bean; private String[] url; private String[] json = {new String()}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); bean=new world(); } private void getJson(final String address) { new Thread(new Runnable(){ @Override public void run() { HttpURLConnection connection = null; try { URL url = new URL(address); Log.d("address",address); connection=(HttpURLConnection) url.openConnection(); connection.setRequestMethod("GET"); connection.setConnectTimeout(10000); connection.setReadTimeout(5000); connection.connect(); int code=connection.getResponseCode(); if(code==200){ Log.i("accept:","链接成功"); InputStream is=connection.getInputStream(); String state = getStringFromInputStream(is); JSONObject jsonObject = new JSONObject(state); //String json=jsonObject.toString(); bean.setConfirmed(jsonObject.getString("confirmed")); bean.setCured(jsonObject.getString("cured")); bean.setDead(jsonObject.getString("dead")); bean.setSuspected(jsonObject.getString("suspected")); json[0] ="["+bean.getConfirmed()+","+bean.getSuspected()+","+bean.getCured()+","+bean.getDead()+"]"; //Log.i(etname.getText().toString(),json[0]); } } catch (Exception e) { e.printStackTrace(); }finally{ if(connection!=null){ connection.disconnect(); } } } }).start(); } private static String getStringFromInputStream(InputStream is) throws Exception{ ByteArrayOutputStream baos=new ByteArrayOutputStream(); byte[] buff=new byte[1024]; int len=-1; while((len=is.read(buff))!=-1){ baos.write(buff, 0, len); } is.close(); String html=baos.toString(); baos.close(); return html; } /** * 初始化页面元素 */ private void initView(){ linechart_bt=(Button)findViewById(R.id.linechart_bt); barchart_bt=(Button)findViewById(R.id.barchart_bt); piechart_bt=(Button)findViewById(R.id.piechart_bt); etname=(EditText) findViewById(R.id.et_name); meditText=(EditText) findViewById(R.id.et_time); meditText.setOnClickListener(this); linechart_bt.setOnClickListener(this); barchart_bt.setOnClickListener(this); piechart_bt.setOnClickListener(this); chartshow_wb=(WebView)findViewById(R.id.chartshow_wb); //进行webwiev的一堆设置 //开启本地文件读取（默认为true，不设置也可以） chartshow_wb.getSettings().setAllowFileAccess(true); //开启脚本支持 chartshow_wb.getSettings().setJavaScriptEnabled(true); chartshow_wb.loadUrl("file:///android_asset/echarts.html"); name=etname.getText().toString().trim(); data=meditText.getText().toString().trim(); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.et_time: Calendar calendar = Calendar.getInstance(); DatePickerDialog datePickerDialog=new DatePickerDialog(MainActivity.this, new DatePickerDialog.OnDateSetListener() { @Override public void onDateSet(DatePicker view, int year, int month, int dayOfMonth) { if(month<10) MainActivity.this.meditText.setText(year + "-" +"0"+(month+1) + "-" + dayOfMonth); else MainActivity.this.meditText.setText(year + "-" + (month+1) + "-" + dayOfMonth); } },calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH), calendar.get(Calendar.DAY_OF_MONTH)); datePickerDialog.show(); break; case R.id.linechart_bt: url = new String[]{"http://139.129.221.11/yiqing/worldServlet?date="}; url[0] = url[0] + meditText.getText().toString()+"&name="+etname.getText().toString(); getJson(url[0]); //Log.i("json:",json[0]); //String json="["+bean.getConfirmed()+","+bean.getSuspected()+","+bean.getCured()+","+bean.getDead()+"]"; Log.i("jsonline:",json[0]); chartshow_wb.loadUrl("javascript:doCreatChart('line',"+json[0]+");"); //Toast.makeText(MainActivity.this,"折线图",Toast.LENGTH_SHORT).show(); break; case R.id.barchart_bt: url = new String[]{"http://139.129.221.11/yiqing/worldServlet?date="}; url[0] = url[0] + meditText.getText().toString()+"&name="+etname.getText().toString(); getJson(url[0]); chartshow_wb.loadUrl("javascript:doCreatChart('bar',"+json[0]+");"); break; case R.id.piechart_bt: url = new String[]{"http://139.129.221.11/yiqing/worldServlet?date="}; url[0] = url[0] + meditText.getText().toString()+"&name="+etname.getText().toString(); getJson(url[0]); chartshow_wb.loadUrl("javascript:doCreatChart('pie',"+json[0]+");"); break; default: break; }