Echarts生成广东省地图

前一段时间因为业务问题需要生成地图数据，所以使用了Echarts来作为生成的工具，以下是相关的一些使用经验：
首先Jsp页面：

<div class="map-box" id="mapdiv"></div>
	<script type="text/javascript"  src="<%=request.getContextPath()%>/basejs/welcomePage/jquery-3.2.1.js" ></script>
	<script type="text/javascript"	src="<%=request.getContextPath()%>/basejs/welcomePage/echarts.min.js"></script>
	<script type="text/javascript"	src="<%=request.getContextPath()%>/basejs/welcomePage/guangdong.js"></script>
	<script type="text/javascript"	src="<%=request.getContextPath()%>/basejs/welcomePage/echarts-gl.min.js"></script>
	<script type="text/javascript"	src="<%=request.getContextPath()%>/basejs/welcomePage/mainoption.js"></script>

需要的js文件基本可以从网上找到，需要哪个地区的就找哪个地区的。业务代码在mainoption.js里：

var myChart1;
$(document).ready(function() {
	$(window).resize(function() {
		myChart1.resize();
	});
	getMapDatas();
});

获取数据的方法：

function getMapDatas(){
	$.ajax({
		url : "/*后端地址*/"
		type : 'GET',
		dataType : "json",
		cache : false,
		timeout : 10000,
		success : function(result) {
			if(result.data.success){
				if(result.data.dm){
					if(result.data.dm.qsjs && result.data.dm.rawData){
						Map('mapdiv',result.data.dm.rawData,result.data.dm.qsjs);
					}else{
						alert("服务出错，获取统计信息失败！");
					}
				}else{
					alert("服务出错，获取统计信息失败！");
				}
       		}else{
       			alert(result.data.resMsg);
       		}
			return true;
		},
		error:function(){
			alert("系统出错！请联系管理员！");
		}
	});
}

/**
 * 根据传入的数据生成
 * @param id //需要生成map的容器地址
 * @param cityData //这里是要给每个城市设置的值，不是必选项
 * @param _number//额外需要的参数
 * @returns
 */
function Map(id,cityData,_number){     
    
//    function sortRule(a,b){return a.value-b.value;}
//    cityData.sort(sortRule);
//    var name=cityData.map(name=>name.name);

    myChart1 =  echarts.init(document.getElementById(id));

    var now =formatDateTime(new Date());
	var option = {
			backgroundColor: '#FFFFFF',
			title: {  
                text: '截止'+now,  
                subtext: '全省参训教师'+_number+"人",  
                x:50,
                y:50
            }, 
	        tooltip : {
	            trigger: 'item',
	            type:'cross',
	            /*   backgroundColor:"#ff7f50",//提示标签背景颜色
	             textStyle:{color:"#fff"}, //提示标签字体颜色
	             formatter:function(param){
	             return dt[param.dataIndex].name + "<br />" +dt[param.dataIndex].text;
	             } */
	            alwaysShowContent: false,
	            bordeRadius: 4,
	            borderWidth: 1,
	            borderColor: 'rgba(0,0,0,0.2)',
	            backgroundColor: 'rgba(255,255,255,0.9)',
	            padding: 0,
	            // position: "top",
	            textStyle: {
	                fontSize: 12,
	                color: '#333'
	            },
	 
	        },
	        visualMap: {
	            min: 0,
	            max: 600,
	            text:['High','Low'],
	            x:'left',
	            y:'center',
	            realtime: false,
	            calculable: true,
	            inRange: {
	                color: ['lightskyblue','yellow', 'orangered']
	            }
	        },
	        toolbox:{
	            show : true,
	            orient : 'vertical',
	            x: 'right',
	            y: 'center',
	            borderColor: '#FFF',       // 工具箱边框颜色
	            borderWidth: 0,            // 工具箱边框线宽，单位px，默认为0（无边框）
	            padding: 5,                // 工具箱内边距，单位px，默认各方向内边距为5，
	            showTitle: false,
	            feature : {
	                saveAsImage: { show : true,
	                    title : '保存为图片',
	                    type : 'jpeg'
	                },
	                restore: {show: true},
	            }
	        },
	        series: [{
	            name: '参训教师人数',
	            type: 'map',
	            map:'广东',
	            // symbol:'../images/shine.jpg',
	            //  symbolSize: 41,
	            roam:true,
	            label: {
	                normal: {
	                    show: true
	                },
	                emphasis: {
	                    show: true
	                }
	            },
	 
	            layoutCenter: ['50%', '50%'],   //属性定义地图中心在屏幕中的位置，一般结合layoutSize 定义地图的大小
//	            layoutSize: 450,
	            itemStyle:{
	                normal:{label:{show:true}},
	                emphasis:{label:{show:true}}
	            },
	            data:cityData
	        }]
	    };
	myChart1.setOption(option);

	myChart1.on('click',function(params){console.log(params);})

}

需要的格式化时间方法：

function formatDateTime(date) {  
    var y = date.getFullYear();  
    var m = date.getMonth() + 1;  
    m = m < 10 ? ('0' + m) : m;  
    var d = date.getDate();  
    d = d < 10 ? ('0' + d) : d;  
    var h = date.getHours();
    h = h < 10 ? ('0' + h) : h;
    var minute = date.getMinutes();
    var second = date.getSeconds();
    minute = minute < 10 ? ('0' + minute) : minute;  
    second = second < 10 ? ('0' + second) : second; 
    return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;  
}

后端数据格式：

JSONObject jo=new JSONObject();
JSONObject dm=new JSONObject();
dm.put("qsjs", 1200000);//全省参训教师人数
dm.put("rawData", getRawData());
jo.put("success", true);
jo.put("dm", dm);
return jo;

getRawData方法的代码：

private List<JSONObject> getRawData() throws AppException {
		List<JSONObject> mplist=new ArrayList<JSONObject>();
		
		JSONObject zhjson=new JSONObject();
		zhjson.put("name", "珠海市");
		zhjson.put("value",150);
		mplist.add(zhjson);
		
		JSONObject gzjson = new JSONObject();
		gzjson.put("name", "广州市");
		gzjson.put("value",250);
		mplist.add(gzjson);
		
		JSONObject zjjson = new JSONObject();
		zjjson.put("name", "湛江市");
		zjjson.put("value",520);
		mplist.add(zjjson);
		
		JSONObject mmjson = new JSONObject();
		mmjson.put("name", "茂名市");
		mmjson.put("value", 130);
		mplist.add(mmjson);
		
		JSONObject yjjson = new JSONObject();
		yjjson.put("name", "阳江市");
		yjjson.put("value", 120);
		mplist.add(yjjson);
		
		JSONObject yfjson = new JSONObject();
		yfjson.put("name", "云浮市");
		yfjson.put("value", 120);
		mplist.add(yfjson);
		
		JSONObject zqjson = new JSONObject();
		zqjson.put("name", "肇庆市");
		zqjson.put("value", 100);
		mplist.add(zqjson);
		
		JSONObject jmjson = new JSONObject();
		jmjson.put("name", "江门市");
		jmjson.put("value", 450);
		mplist.add(jmjson);
		
		JSONObject zsjson = new JSONObject();
		zsjson.put("name", "中山市");
		zsjson.put("value", 80);
		mplist.add(zsjson);
		
		JSONObject fsjson = new JSONObject();
		fsjson.put("name", "佛山市");
		fsjson.put("value", 333);
		mplist.add(fsjson);
		
		JSONObject qyjson = new JSONObject();
		qyjson.put("name", "清远市");
		qyjson.put("value", 130);
		mplist.add(qyjson);
		
		JSONObject sgjson = new JSONObject();
		sgjson.put("name", "韶关市");
		sgjson.put("value", 140);
		mplist.add(sgjson);
		
		JSONObject hyjson = new JSONObject();
		hyjson.put("name", "河源市");
		hyjson.put("value", 120);
		mplist.add(hyjson);
		
		JSONObject mzjson = new JSONObject();
		mzjson.put("name", "梅州市");
		mzjson.put("value", 231);
		mplist.add(mzjson);
		
		JSONObject czjson = new JSONObject();
		czjson.put("name", "潮州市");
		czjson.put("value", 124);
		mplist.add(czjson);
		
		JSONObject jyjson = new JSONObject();
		jyjson.put("name", "揭阳市");
		jyjson.put("value", 156);
		mplist.add(jyjson);
		
		JSONObject stjson = new JSONObject();
		stjson.put("name", "汕头市");
		stjson.put("value", 112);
		mplist.add(stjson);
		
		JSONObject swjson = new JSONObject();
		swjson.put("name", "汕尾市");
		swjson.put("value", 128);
		mplist.add(swjson);
		
		JSONObject szjson = new JSONObject();
		szjson.put("name", "深圳市");
		szjson.put("value", 192);
		mplist.add(szjson);
		
		JSONObject dgjson = new JSONObject();
		dgjson.put("name", "东莞市");
		dgjson.put("value", 128);
		mplist.add(dgjson);
		
		JSONObject hzjson = new JSONObject();
		hzjson.put("name", "惠州市");
		hzjson.put("value", 187);
		mplist.add(hzjson);
		
		return mplist;
	}