echarts地图下钻详细教程

Java开发千人交流群 677807540   大家可以一起讨论技术欢迎加入

1.js代码块

// ECharts 山东地图

(function($) {
    $.fn.strokerShandongMapCharts = function(options) {
    	var myChart = echarts.init(document.getElementById('main'));
	    //存储切换的每一级地图信息
	    var mapStack = [];
	    var cityMap = {
				"济南市" : "370100",
				"青岛市" : "370200",
				"淄博市" : "370300",
				"枣庄市" : "370400",
				"东营市" : "370500",
				"烟台市" : "370600",
				"潍坊市" : "370700",
				"济宁市" : "370800",
				"泰安市" : "370900",
				"威海市" : "371000", 
				"日照市" : "371100",
				"莱芜市" : "371200",
				"临沂市" : "371300",
				"德州市" : "371400",
				"聊城市" : "371500",
				"滨州市" : "371600",
				"菏泽市" : "371700"
			};
	    var timeFn = null;
	    var curMap = {};
	    //初始化为中国地图
	    loadMap('shandong', '山东');
	    /**
	       绑定用户切换地图区域事件
	       cityMap对象存储着地图区域名称和区域的信息(name-code)
	       当mapCode有值,说明可以切换到下级地图
	       同时保存上级地图的编号和名称  
	    */
	    myChart.on('mapselectchanged', function(params) {
	        clearTimeout(timeFn);
	        //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
	        timeFn = setTimeout(function(){
	            var name = params.batch[0].name;
	            var mapCode = cityMap[name];
	            if (!mapCode) {
	                alert('无此区域地图显示');
	                return;
	            }
	            //打开一个新的页面根据code显示地图
	            window.location.href = ("sdNewDiTu.action?method=getShi&cityId="+mapCode+"&cityName="+$.encodeUTF8(name));
	          //  loadMap(mapCode, name); 
	            //将上一级地图信息压入mapStack
	            mapStack.push({
	                mapCode: curMap.mapCode,
	                mapName: curMap.mapName
	            }); 
	        }, 250);   
	    });
	    /**
	       绑定双击事件，并加载上一级地图
	    */
	    /*myChart.on('dblclick', function(params) {
	        //当双击事件发生时，清除单击事件，仅响应双击事件
	        clearTimeout(timeFn);
	        var map = mapStack.pop();
	        if (!mapStack.length && !map) {
	            alert('已经到达最上一级地图了');
	            return;
	        }
	        loadMap(map.mapCode, map.mapName);
	    });*/
	    /**
	       加载地图：根据地图所在省市的行政编号，
	       获取对应的json地图数据，然后向echarts注册该区域的地图
	       最后加载地图信息
	       @params {String} mapCode:地图行政编号,for example['中国':'100000', '湖南': '430000']
	       @params {String} mapName: 地图名称
	    */
	    function loadMap(mapCode, mapName) {
	        $.getJSON($.getRootPath()+"/static_resources/js/echarts/3.0/map/" + mapCode + '.json', function (data) {
	             if (data) {
	                 echarts.registerMap(mapName, data);
	                 var option = {
	                		 textStyle: {
						        	color: "#4f7cd7",
						        	fontStyle: 'normal',
						        	fontWeight: 'bolder',
						        	fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
						        	fontSize: 15
					        	},
	                    tooltip: {
	                        trigger: 'item',
	                        formatter: '{b}'
	                    },
	                    series: [
	                        {
	                            name: '',
	                            type: 'map',
	                            mapType: mapName,
	                            selectedMode : 'multiple',
	                            label: {
	                                normal: {
	                                    show: true
	                                },
	                                emphasis: {
	                                    show: true
	                                }
	                            },
	                            data:[
	                            ]
	                        }
	                    ]
	                 };
	                 myChart.setOption(option);
	                 curMap = {
	                    mapCode: mapCode,
	                    mapName: mapName
	                 };     
	             } else {
	                 alert('无法加载该地图');
	             }       
	        });
	    }
    }
})(jQuery);

2.html代码块

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib uri="/WEB-INF/tld/c" prefix="c" %>
<%@ taglib uri="/WEB-INF/tld/fn" prefix="fn" %>
<%@ taglib prefix="p" tagdir="/WEB-INF/tags/ptags" %>
<%@ taglib uri="/WEB-INF/tld/fmt" prefix="fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    request.setAttribute("basePath", basePath);
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>山东省上报地图</title>
   <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="${basePath }static_resources/js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${basePath }static_resources/css/ChestpainShow/bootstrap.css">
    <script src="${basePath}static_resources/js/echarts/4.0/echarts.js"></script>
    <script type="text/javascript" src="${basePath}/static_resources/js/ChestpainShow/jquery-2.2.1.min.js"></script>
    <script type="text/javascript" src="${basePath}/static_resources/js/ChestpainShow/bootstrap.min.js"></script>
    <script src="${basePath}static_resources/js/jquery.extend.js"></script>
   <script type="text/javascript" src="${basePath}static_resources/js/sdchestpain/sdNewDiTu.js"></script>
   <script type="text/javascript" src="${basePath }static_resources/js/laydate/laydate.js"></script>
    <style type="text/css">
       
        input.form-control {
            text-align: center;
            padding: 10px 20px;
            font-size: 16px;
            color: #333
        }

        #city-picker3 {
            min-width: 360px;
        }

        #inDate, #search-input {
            height: 35px;
            border: 1px solid #ddd;
        }

        .table {
	    width: 99%;
	    height:100%;
	    margin-top: 1%;
	    }
		.table th{ 
			text-align: center;
		    color: white;
		    background: #46a2ff;
		    font-family: 微软雅黑;
	        font-weight: unset;
		}
		.table td{ 
			text-align: center;
		}
        .input-group {
            position: relative;
            margin: 13px;
            border-collapse: separate;
        }

        a.btn {
            padding-left: 15px;
            float: right;
            margin-top: 0px;
            color: black;
            margin-right: 13px;
        }

        .container-fluid {
            height: 91% !important;
        }
		#tablelist tbody {
			border:0px solid red;
           display:block;
           height:55%;
           overflow-y:auto;
        }

		#tablelist thead ,#tablelist tr {
		    display:table;
		    width:100%;
		    table-layout:fixed;
		}
		
    </style>
    <script type="text/javascript">

        $(function () {
//调用地图
        	$("#main").strokerShandongMapCharts({
        		
        	});

        });
        window.onload = function () {
        	$(".laydate").each(function() {

        		$(this).attr("readonly", "readonly");
        		$(this).css("background-color", "#fff");
        		laydate.render({
        			elem : this,//指定元素  表示当前的元素
        			type : 'month',
        			trigger : 'click',
        			theme : '#0099FF'
        		});

        	});


        }



    </script>
</head>
<body style="overflow-y:hidden;background-color: #f5f5f5;">
<form action="${basePath}sdNewDiTu.action?method=getSDData"
      method="post" class="form-inline" id="form0">
    <center>
<div class="row">
                <div class="box-tools pull-left">
                    <input id="cityId" name="cityId" class="form-control"
                           style="display: none"></input>
                    <div class="input-group" style="margin-left: 30px;">
                        <span class="input-group-addon" style="width: 80px;color: #0f0f0f">开始时间</span> <input
                            size="2" type="text" class="form-control laydate" style="width: 130px;color:#bebebe"
                            id="startTime" name="startTime" value="${startTime}">

                    </div>
                    <div class="input-group">
                        <span class="input-group-addon" style="width: 80px;color: #0f0f0f">结束时间</span> <input
                            size="2" type="text" class="form-control laydate" style="width: 130px;color:#bebebe"
                            id="endTime" name="endTime" value="${endTime}">

                    </div>
                    <button type="submit" class="btn " id="query"
                            style="margin-left: 99px; margin-top: 15px; margin-left: 40px; margin-bottom: 15px;
                            background-color: #409eff;color: white;border-radius:20px;width:100px">查询
                    </button>


                </div>


            </div>
        <div class="container-fluid" id="page-content">
            <div style="height: 80%;background-color: #ffffff">
            	<div id="main" style="height: 100%;"></div>
            </div>
            
            <div class="row" >
                <table class="table" id="tablelist"style="background-color: #ffffff">
                    <thead>
                    <tr>
                        <th>医院应上报数量</th>
                        <th>医院实际上报数量</th>
                    </tr>
                    </thead>
                    <tbody>
                   
                        <tr>
                            <td>${count}</td>
                            <td>${provinceList}</td>
                        </tr>
                   
                    <c:choose>
                        <c:when test="${empty provinceList}">
                            <tr>
                                <td colspan="5">暂无数据！</td>
                            </tr>
                        </c:when>
                    </c:choose> 
                    </tbody>
                </table>

            </div>
        </div>
     <c:if test="${start eq 1}">
			            <div style=" margin-top:0px;width:93%; border:1px 0xFFFFFF solid;position:fixed;bottom: 10px;right:3%;">
			                <p:pagefooter></p:pagefooter>
			            </div>
			        </c:if>
    </center>
</form>
</body>
</html>