体温上报APP——体温统计地图可视化 - 戈瑾

要求

可以通过地图的形式来直观显示全班体温的大致分布情况，还可以查看具体省份的体温统计情况。

用颜色深浅代表各个省市的人数，并按各个省市统计体温正常、未上报、异常的人数。

实现

需要下载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>

posted on 2021-03-20 09:19 戈瑾阅读(307) 评论(0) 收藏举报

刷新页面返回顶部