第三周课堂测试第三阶段笔记

该阶段只要处理中国地图跳转到省市的地图即可。

在上一阶段的全国地图中加入点击事件的代码：

//点击事件,根据点击某个省份进入省份地图
     chart.on('click', function (params) {
         var url = "${pageContext.request.contextPath }/toChildMap?area=" + params.name;
         window.location.href = url;
     });

这里我要跳转到一个servlet，然后再跳转到子地图（其实直接跳转子地图也可以）

servlet代码：

package web;

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;

/**
 * Servlet implementation class toChildMap
 */
@WebServlet("/toChildMap")
public class toChildMap extends HttpServlet {
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");
        String area = request.getParameter("area");
        request.setAttribute("area", area);
        request.getRequestDispatcher("/childmap.jsp").forward(request, response);
    }

    /**
     * @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);
    }

}

接下来是省份地图的显示：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.min.css" />
<script src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath }/js/echarts.min.js"></script>
<script src="${pageContext.request.contextPath }/js/china.js"></script>
<title>Insert title here</title>

</head>
<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 800px;;height:600px;"></div>    
        
<script>
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
var area = "${area}";
$.get("${pageContext.request.contextPath }/js/mapjson/"+ area +".json", function (geoJson) {

    myChart.hideLoading();

    echarts.registerMap(area, geoJson);

    myChart.setOption(option = {
        title: {
            text: area + '地区疫情情况',
            subtext: '该数据仅供参考',
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (p / km2)'
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        visualMap: {
            min: 800,
            max: 50000,
            text: ['High', 'Low'],
            inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
            }
        },
        series: [
            {
                name: '香港18区人口密度',
                type: 'map',
                mapType: area, // 自定义扩展图表类型
                label: {
                    show: true
                }
            }
        ]
    });
});




//异步加载数据
$.ajax({
   type : "post",
   async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
   url : "${pageContext.request.contextPath }/getMapData",    //请求发送到TestServlet处
   success : function(resultJson) {
       var result= jQuery.parseJSON(resultJson);
       //请求成功时执行该函数内容，result即为服务器返回的json对象
       if (result) {
               chart.setOption({        //加载数据图表
                  series: [{
                      data: result
                  }]
              });
              
       }
  },
   error : function(errorMsg) {
       //请求失败时执行该函数
   alert("图表请求数据失败!");
   }
});



</script>


</body>
</html>

这里只需要按照官网给出的例子手动注册地图即可，关键的是需要有省份地图的json，此处我便是通过传递过来的省份名称来找json并注册地图从而显示的。

json：

（这里只修改了几个）

数据的展示便和全国疫情地图的信息一样，异步获取下数据即可。

跳转后：

第三周课堂测试第三阶段笔记

猜你喜欢