关于java:疫情地图公众号二

• 接下来咱们进行疫情数据的剖析与读取，并通过前后端程序的交互，将其部署到阿里云上。

阿里云服务器搭建流程
1.如果是新用户，能够抉择白嫖的形式，咱们先抉择七天的这个，一个月的留下来不便当前持续白嫖。新用户白嫖请点击这里：https://free.aliyun.com/?spm=…

抉择这个收费试用七天的。
2.依照须要设置地区、操作系统、带宽等。

3.购买胜利后开始配置平安组。
抉择更多→网络和平安组→平安组配置

抉择手动增加设置端口范畴和受权对象。在这里咱们要留神0.0.0.0/0示意任何人都能够拜访，因而你能够应用本人的ip地址。


4.获取默认账户和明码




并依据外网面板地址进入宝塔控制面板。
5.tomcat装置

6.装置后设置端口号



7.进入tomcat装置的文件夹

8.将你编写的将你编写的index.jsp,control.js文件上传到webapps/ROOT文件夹中 , 即可通过ip地址来拜访你的JSP。

• 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);

• 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 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>

最终后果展现