疫情地图公众号项目（二）

头像
楠怪
    阅读 13 分钟
    • 接下来我们进行疫情数据的分析与读取，并通过前后端程序的交互，将其部署到阿里云上。

    阿里云服务器搭建流程
    1.如果是新用户，可以选择白嫖的方式，我们先选择七天的这个，一个月的留下来方便以后继续白嫖。自行注册登陆后，新用户白嫖请点击这里：https://free.aliyun.com/?spm=...
    image
    2.按照需要设置地域、操作系统、带宽等。
    image
    3.购买成功后开始配置安全组。

    • 选择更多→网络和安全组→安全组配置

    image

    • 点击配置规则后进入

    image

    • 选择手动添加设置端口范围和授权对象。在这里我们要注意0.0.0.0/0表示任何人都可以访问，因此你可以使用自己的ip地址。

    image
    4.在浏览器中输入ecs服务器的公网ip:8888, 根据提示自定义你的管理员账号和密码。
    如果不存在账号密码自定义页面, 可以按照下图流程获取默认账户和密码
    image
    image
    image
    输入 bt default获取默认账户密码
    image
    5.根据外网面板地址进入进入宝塔控制面板。
    6.进入宝塔控制面板后 , 进入软件商店,搜索tomcat后点击安装。
    7.设置端口号。
    image
    注意：设置完保存后要重启。
    8.将你编写的将你编写的index.jsp,control.js文件上传到webapps/ROOT文件夹中 , 即可通过ip地址来访问你的JSP。

    • index.jsp源代码：
    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%> <%@page import="java.net.URL,java.net.URLConnection,java.io.InputStream,java.io.BufferedReader,java.io.InputStreamReader" %> <!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>疫情地图</title>
<script type="text/javascript"> <%
                //1. 创建一个url对象。u1
                URL u1 = new URL("https://zaixianke.com/yq/all");
                //2、（建立连接），通过网址u1,打开网络连接，并得到连接对象conn
                URLConnection conn = u1.openConnection();
                //3、(获取数据传输的流),通过连接对象conn，获取输入流is
                InputStream is = conn.getInputStream();
                //4、将输入流is，装饰为一次能读取一行的  缓冲字符输入流
                BufferedReader br = new BufferedReader(new InputStreamReader(is,"UTF-8"));
                //5、读取内容
                String text1 = br.readLine();
                System.out.println(text1);
                //6、关闭流
                br.close();
        %> var data = <%=text1 %> </script>
<script class="lazy" data-src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script> 
<script src="http://cdn.zaixianke.com/china.js"></script>
<script src="http://cdn.zaixianke.com/world.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:600px;"></div> <br>
<div style="text-align:center">
        <a style="color:#333" class="control" align="center" href="javascript:updateMap(0)">国内累计</a>
        <a style="color:#333" class="control" align="center" href="javascript:updateMap(1)">国内新增</a>
        <a style="color:#333" class="control" align="center" href="javascript:updateMap(2)">全球累计</a>
        <a style="color:#333" class="control" align="center" href="javascript:updateMap(3)">全球新增</a>
</div>
<script src="control.js"></script>
</body>
</html>
    • control.js源代码：
    var myChart = echarts.init(document.getElementById('main'));
function updateMap(num){
            $(".control").show();
            $(".control:eq("+num+")").hide();
            myChart.clear();
            var opt = null;
            switch(num){
                case 0:{
                    opt = {
                            // 设置标题和副标题及副标题跳转链接
                            title: {
                                text:'新冠疫情-国内累计数据',
                                sublink: 'https://www.kaikeba.com'
                            },
                            // 数据提示框
                            tooltip: {
                                trigger: 'item', // item放到数据区域触发
                                formatter: function (params, ticket, callback) {
                                    if(params.data)
                                        return params.name+'<br/>'+params.data.value+' (人)';
                                    else
                                        return params.name+'<br/>无疫情信息';
                                }
                            },
                            // 视觉映射方案:
                            // visualMap默认是连续映射，我们也可以设置为分段型，对于分布范围广的数据
                            // 使用透明度来区分疫情严重情况
                            visualMap: {
                                type: 'piecewise',
                                pieces: [
                                    {gt: 2000, color: 'darkred'},                        // (1500, Infinity]
                                    {gt: 1300, lte: 2000, color: 'red', colorAlpha: 1},  // (1000, 1500]
                                    {gt: 800, lte: 1300, color: 'red', colorAlpha: 0.8},
                                    {gt: 500, lte: 800, color: 'red', colorAlpha: 0.6},
                                    {gt: 200, lte: 500, color: 'red', colorAlpha: 0.4},
                                    {gt: 50, lte: 200, color: 'red', colorAlpha: 0.3},
                                    {lt: 50, color: 'red', colorAlpha: 0.2}          // (-Infinity, 100)
                                ],
                            },
                    
                            // 具体数据
                            series: [
                                {
                                    name: '国内各省确诊病例', // 系列名称
                                    zoom:1.2,//地图大小
                                    type: 'map', // 系列类型，地图
                                    map: 'china', // 要使用的地图，即上面注册的地图名称
                                    roam: true, // 开启鼠标缩放和平移漫游
                                    label: { // 图形上的文本标签，地图默认显示数据名
                                        show: true,
                                        formatter: '{b}', // b是数据名，c是数据值
                                        fontSize: 8
                                    },
                                    data: data.data,
                                }
                            ]
                        };
                    
                }
                break;
                case 1:{
                    opt = {
                            // 设置标题和副标题及副标题跳转链接
                            title: {
                                text: '新冠疫情-国内新增数据',
                                subtext: '数据来源--开课吧',
                                sublink: 'https://www.kaikeba.com'
                            },
                            // 数据提示框
                            tooltip: {
                                trigger: 'item', // item放到数据区域触发
                                formatter:  function (params, ticket, callback) {
                                    if(params.data)
                                        return params.name+'<br/>'+params.data.value+' (人)';
                                    else
                                        return params.name+'<br/>无疫情信息';
                                }
                            },
                    
                            // 视觉映射方案:
                            // visualMap默认是连续映射，我们也可以设置为分段型，对于分布范围广的数据
                            // 使用透明度来区分疫情严重情况
                            visualMap: {
                                type: 'piecewise',
                                pieces: [
                                    {gt: 50, color: 'darkred'},                        // (1500, Infinity]
                                    {gt: 30, lte: 50, color: 'red', colorAlpha: 1},  // (1000, 1500]
                                    {gt: 20, lte: 30, color: 'red', colorAlpha: 0.8},
                                    {gt: 10, lte: 20, color: 'red', colorAlpha: 0.6},
                                    {gt: 5, lte: 10, color: 'red', colorAlpha: 0.4},
                                    {gt: 1, lte: 5, color: 'red', colorAlpha: 0.3},
                                    {lt: 1, color: 'red', colorAlpha: 0.0}          // (-Infinity, 100)
                                ],
                            },
                    
                            // 具体数据
                            series: [
                                {
                                    name: '国内各省确诊病例', // 系列名称
                                    zoom:1.2,//地图大小
                                    type: 'map', // 系列类型，地图
                                    map: 'china', // 要使用的地图，即上面注册的地图名称
                                    roam: true, // 开启鼠标缩放和平移漫游
                                    label: { // 图形上的文本标签，地图默认显示数据名
                                        show: true,
                                        formatter: '{b}', // b是数据名，c是数据值
                                        fontSize: 8
                                    },
                                    data: data.today,
                                }
                            ]
                        };    
                }
                break;
                case 2:{
                    opt = {
                        // 设置标题和副标题及副标题跳转链接
                        title: {
                          text: '新冠疫情-全球累计数据',
                          subtext: '数据来源--开课吧',
                          sublink: 'https://www.kaikeba.com'
                        },
                        // 数据提示框
                        tooltip: {
                          trigger: 'item', // item放到数据区域触发
                          //formatter: '{b}<br/>{c} (人)' // 提示数据格式br表示换行，地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
                          formatter:function (params, ticket, callback) {
                            if(params.data)
                              return params.name+'<br/>'+params.data.value+' (人)';
                            else
                              return params.name+'<br/> 未公布感染人数';
                          }
                        },
                        // 视觉映射方案1：,疫情颜色根据传染病疫情等级分类为5个级别：黄色-橙色-深橙色-红色-深红色
                        // 为了是视觉分布更好，可以添加更多的颜色范围，然后适当调小max的值，因为美国和其它国家相差太大
                        /**/
                        visualMap: {
                          min: 1, // 颜色映射对应的最小值，即对应下面的lightskyblue
                          max: 500000, // 颜色映射对应的最大值，即对应下面的orangered
                          text: ['严重', '轻微'], // 映射图上下标记文本
                          realtime: true, // 是否显示拖拽手柄，映射条可以拖拽调整要映射的范围
                          calculable: true, // 拖拽时，是否实时更新地图
                          inRange: {
                            color: ['rgba(222,0,0,0.2)','rgba(160,0,0,1)'] // 颜色映射范围，最小值，过渡值，最大值
                          }
                        },
                    
                        
                    
                    
                        // 具体数据
                        series: [
                          {
                            name: '全球各国确诊病例', // 系列名称
                            zoom:1.2,//地图大小
                            type: 'map', // 系列类型，地图
                            map: 'world', // 要使用的地图，即上面注册的地图名称
                            roam: true, // 开启鼠标缩放和平移漫游
                            label: { // 图形上的文本标签，地图默认显示数据名
                              show: true,
                              fontSize:8,
                              //formatter: '{b}', // b是数据名，c是数据值
                              formatter:function (params, ticket, callback) {
                                //公布了数据 且 数据累计数据大于5万的显示国家名称
                                if(params.data && params.data.value>50000) {
                                  return params.name;
                                }else{
                                  return '';
                                }
                              }
                            },
                            data: data.g_data,
                          }
                        ]
                      };
                }
                break;
                case 3:{
                    opt = {
                        // 设置标题和副标题及副标题跳转链接
                        title: {
                          text: '新冠疫情-全球新增数据',
                          subtext: '数据来源--开课吧',
                          sublink: 'https://www.kaikeba.com'
                        },
                        // 数据提示框
                        tooltip: {
                          trigger: 'item', // item放到数据区域触发
                          formatter:function (params, ticket, callback) {
                            if(params.data)
                              return params.name+'<br/>'+params.data.value+' (人)';
                            else
                              return params.name+'<br/> 未公布感染人数';
                          }
                        },
                        // 视觉映射方案1：,疫情颜色根据传染病疫情等级分类为5个级别：黄色-橙色-深橙色-红色-深红色
                        // 为了是视觉分布更好，可以添加更多的颜色范围，然后适当调小max的值，因为美国和其它国家相差太大
                        /**/
                        visualMap: {
                          min: 0, // 颜色映射对应的最小值，
                          max: 20000, // 颜色映射对应的最大值
                          text: ['严重', '轻微'], // 映射图上下标记文本
                          realtime: true, // 是否显示拖拽手柄，映射条可以拖拽调整要映射的范围
                          calculable: true, // 拖拽时，是否实时更新地图
                          inRange: {
                            color: ['rgba(160,0,0,0)','rgba(160,0,0,1)'] // 颜色映射范围，最小值，过渡值，最大值
                          }
                        },
                        // 具体数据
                        series: [
                          {
                            name: '全球各国新增病例', // 系列名称
                            zoom:1.2,//地图大小
                            type: 'map', // 系列类型，地图
                            map: 'world', // 要使用的地图，即上面注册的地图名称
                            roam: true, // 开启鼠标缩放和平移漫游
                            label: { // 图形上的文本标签，地图默认显示数据名
                              show: true,
                              fontSize:8,
                              //formatter: '{b}', // b是数据名，c是数据值
                              formatter:function (params, ticket, callback) {
                                //公布了数据 且 数据累计数据大于5万的显示国家名称
                                if(params.data && params.data.value>1000 || params.name == '中国') {
                                  return params.name;
                                }else{
                                  return '';
                                }
                              }
                            },
                            data: data.g_today,
                          }
                        ]
                      };
                }
                break;
            }
             myChart.setOption(opt);
        }
        updateMap(0);

    最终结果
    image

    java
    楠怪
    1 声望1 粉丝

    在校学生，希望能够在秃头的路上越走越远。。。

    « 上一篇
    疫情地图公众号项目（一）
    下一篇 »
    疫情地图公众号加快访问速度（补充）

    引用和评论

    推荐阅读
    头像
    数据库复试

    楠怪阅读 1.3k

    头像
    Java8的新特性

    codecraft赞 36阅读 31.5k评论 1

    头像
    Java11的新特性

    codecraft赞 28阅读 22.3k评论 3

    头像
    Java5的新特性

    codecraft赞 13阅读 26.1k

    头像
    Java9的新特性

    codecraft赞 20阅读 18.5k

    头像
    Java13的新特性

    codecraft赞 17阅读 13.6k

    头像
    Java7的新特性

    codecraft赞 10阅读 21.1k

    0 条评论
    得票最新