要求
可以通过地图的形式来直观显示全班体温的大致分布情况,还可以查看具体省份的体温统计情况。
用颜色深浅代表各个省市的人数,并按各个省市统计体温正常、未上报、异常的人数。
实现
需要下载echart的相关插件
echart.html文件:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>疫情地图展示</title> 6 <script src="js/echarts.min.js"></script> 7 <script src="js/china.js"></script> 8 <style> 9 *{margin:0;padding:0} 10 html,body{ 11 width:100%; 12 height:100%; 13 } 14 #main{ 15 width:380px; 16 height:250px; 17 margin: 40px auto; 18 border:1px solid #ddd; 19 } 20 </style> 21 </head> 22 <body> 23 <div id="main"></div> 24 <script type="text/javascript"> 25 var dataList=[ 26 {name:"南海诸岛",value:0}, 27 {name: '北京', value: 0}, 28 {name: '天津', value: 0}, 29 {name: '上海', value: 0}, 30 {name: '重庆', value: 0}, 31 {name: '河北', value: 35}, 32 {name: '河南', value: 0}, 33 {name: '云南', value: 0}, 34 {name: '辽宁', value: 2}, 35 {name: '黑龙江', value: 1}, 36 {name: '湖南', value: 0}, 37 {name: '安徽', value: 0}, 38 {name: '山东', value: 1}, 39 {name: '新疆', value: 0}, 40 {name: '江苏', value: 0}, 41 {name: '浙江', value: 1}, 42 {name: '江西', value: 0}, 43 {name: '湖北', value: 0}, 44 {name: '广西', value: 0}, 45 {name: '甘肃', value: 0}, 46 {name: '山西', value: 2}, 47 {name: '内蒙古', value: 0}, 48 {name: '陕西', value: 1}, 49 {name: '吉林', value: 0}, 50 {name: '福建', value: 0}, 51 {name: '贵州', value: 0}, 52 {name: '广东', value: 1}, 53 {name: '青海', value: 0}, 54 {name: '西藏', value: 0}, 55 {name: '四川', value: 1}, 56 {name: '宁夏', value: 2}, 57 {name: '海南', value: 0}, 58 {name: '台湾', value: 0}, 59 {name: '香港', value: 0}, 60 {name: '澳门', value: 0} 61 ] 62 var myChart = echarts.init(document.getElementById('main')); 63 option = { 64 title: { 65 show:true, 66 text: '疫情分布图', 67 subtext: '', 68 x:'center' 69 }, 70 tooltip: { 71 formatter:function(params,ticket, callback){ 72 return params.seriesName+'<br />'+params.name+':'+params.value 73 }//数据格式化 74 }, 75 //左侧小导航图标 76 visualMap: { 77 min: 0, 78 max: 50, 79 left: 'left', 80 top: 'bottom', 81 text: ['高','低'],//取值范围的文字 82 inRange: { 83 color: ['#e0ffff', '#006edd']//取值范围的颜色 84 }, 85 show:true//图注 86 }, 87 geo: { 88 map: 'china', 89 roam: false,//不开启缩放和平移 90 zoom:1.23,//视角缩放比例 91 label: { 92 normal: { 93 show: true, 94 fontSize:'10', 95 color: 'rgba(0,0,0,0.7)' 96 } 97 }, 98 itemStyle: { 99 normal:{ 100 borderColor: 'rgba(0, 0, 0, 0.2)' 101 }, 102 emphasis:{ 103 areaColor: '#F3B329',//鼠标选择区域颜色 104 shadowOffsetX: 0, 105 shadowOffsetY: 0, 106 shadowBlur: 20, 107 borderWidth: 0, 108 shadowColor: 'rgba(0, 0, 0, 0.5)' 109 } 110 } 111 }, 112 series : [ 113 { 114 name: '上报人数', 115 type: 'map', 116 geoIndex: 0, 117 data:dataList 118 } 119 ] 120 }; 121 myChart.setOption(option); 122 myChart.on('click', function (params) { 123 alert(params.name); 124 }); 125 126 /* setTimeout(function () { 127 myChart.setOption({ 128 series : [ 129 { 130 name: '信息量', 131 type: 'map', 132 geoIndex: 0, 133 data:dataList 134 } 135 ] 136 }); 137 },1000)*/ 138 </script> 139 </body> 140 141 </html>
EchartActivity.java文件:
1 package com.example.application; 2 3 import android.content.Intent; 4 import android.net.Uri; 5 import android.os.Bundle; 6 import android.webkit.WebView; 7 import android.webkit.WebViewClient; 8 9 import androidx.appcompat.app.AppCompatActivity; 10 11 public class EchartActivity extends AppCompatActivity { 12 private WebView chartshow_web; 13 protected void onCreate(Bundle savedInstanceState) { 14 super.onCreate(savedInstanceState); 15 setContentView(R.layout.activity_echart); 16 17 chartshow_web=(WebView)findViewById(R.id.chartshow_web); 18 chartshow_web.getSettings().setAllowFileAccess(true); 19 chartshow_web.getSettings().setJavaScriptEnabled(true); 20 chartshow_web.loadUrl("file:///android_asset/echart.html"); 21 22 23 24 new Thread(new Runnable() { 25 @Override 26 public void run() { 27 try{ 28 Thread.sleep(2000); 29 } catch (InterruptedException e){ 30 e.printStackTrace(); 31 } 32 } 33 }).start(); 34 } 35 36 37 }
activity_echart.xml文件:
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:orientation="vertical" android:layout_width="match_parent" 4 android:layout_height="match_parent"> 5 6 <WebView 7 android:id="@+id/chartshow_web" 8 android:layout_width="match_parent" 9 android:layout_height="match_parent"/> 10 </LinearLayout>
结果展示:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>疫情地图展示</title> <script src="js/echarts.min.js"></script> <script src="js/china.js"></script> <style> *{margin:0;padding:0} html,body{ width:100%; height:100%; } #main{ width:380px; height:250px; margin: 40px auto; border:1px solid #ddd; } </style></head><body> <div id="main"></div> <script type="text/javascript"> var dataList=[ {name:"南海诸岛",value:0}, {name: '北京', value: 0}, {name: '天津', value: 0}, {name: '上海', value: 0}, {name: '重庆', value: 0}, {name: '河北', value: 35}, {name: '河南', value: 0}, {name: '云南', value: 0}, {name: '辽宁', value: 2}, {name: '黑龙江', value: 1}, {name: '湖南', value: 0}, {name: '安徽', value: 0}, {name: '山东', value: 1}, {name: '新疆', value: 0}, {name: '江苏', value: 0}, {name: '浙江', value: 1}, {name: '江西', value: 0}, {name: '湖北', value: 0}, {name: '广西', value: 0}, {name: '甘肃', value: 0}, {name: '山西', value: 2}, {name: '内蒙古', value: 0}, {name: '陕西', value: 1}, {name: '吉林', value: 0}, {name: '福建', value: 0}, {name: '贵州', value: 0}, {name: '广东', value: 1}, {name: '青海', value: 0}, {name: '西藏', value: 0}, {name: '四川', value: 1}, {name: '宁夏', value: 2}, {name: '海南', value: 0}, {name: '台湾', value: 0}, {name: '香港', value: 0}, {name: '澳门', value: 0} ] var myChart = echarts.init(document.getElementById('main')); option = { title: { show:true, text: '疫情分布图', subtext: '', x:'center' }, tooltip: { formatter:function(params,ticket, callback){ return params.seriesName+'<br />'+params.name+':'+params.value }//数据格式化 }, //左侧小导航图标 visualMap: { min: 0, max: 50, left: 'left', top: 'bottom', text: ['高','低'],//取值范围的文字 inRange: { color: ['#e0ffff', '#006edd']//取值范围的颜色 }, show:true//图注 }, geo: { map: 'china', roam: false,//不开启缩放和平移 zoom:1.23,//视角缩放比例 label: { normal: { show: true, fontSize:'10', color: 'rgba(0,0,0,0.7)' } }, itemStyle: { normal:{ borderColor: 'rgba(0, 0, 0, 0.2)' }, emphasis:{ areaColor: '#F3B329',//鼠标选择区域颜色 shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }, series : [ { name: '上报人数', type: 'map', geoIndex: 0, data:dataList } ] }; myChart.setOption(option); myChart.on('click', function (params) { alert(params.name); });
/* setTimeout(function () { myChart.setOption({ series : [ { name: '信息量', type: 'map', geoIndex: 0, data:dataList } ] }); },1000)*/ </script></body>
</html>