echarts地图展现某个地区的数量

正好最近项目做了个这样的操作，先来一幅图

我这里的需求就是有个项目表，新增项目时会选择地点，查询地点名称和对应有几个项目值存到集合里，传到echarts自动绘制如上图

List<Map> maps = new ArrayList<Map>();
hqlTask = "from TblTaskBasicInformation "//使用hql查询查询表  表里有省的字段
List<TblTaskBasicInformation> informations = tblTaskBasicInformationService
						.findByHql(hqlTask);
for (TblTaskBasicInformation information : informations) {
if (information.getXmqtcddwCompanyProvince() != null) {
	// 查询省   Tblregion是表名，存储省市县的字段，在此就不列出各个字段了,因为后台的数据亲们测试时可以随便写自己想要的字段和数据，我的代码仅供参考
	String Sqldq = "select * from Tblregion where id="+ information.getXmqtcddwCompanyProvince();
	List<Object[]> objs = db.getData(Sqldq);//jdbc连接并查询方式
	Object[] obj = objs.get(0);
	// 查询显示图表的数据
	maps = selectDate(obj, maps);
   }
}
        JSONArray array = new JSONArray();	
        array = array.fromObject(maps);
	setAjaxData(array.toString());//传到前台，这是我们框架封装好的，前面用的是ajax，所以亲们可以自己自主选则怎么把数据传到前面

开始添加数据

public List<Map> selectDate(Object[] obj, List<Map> maps) {
		Map hashMap = new HashMap();
		// echarts 的js地图已经编译好了地区名称,看地图就知道、大多都是两个字、除了黑龙江和内蒙古，我们数据库存储的地名不相同，所以要截取
		String areaStr = "";
		if (obj[2].toString().equals("内蒙古自治区")
				|| obj[2].toString().equals("黑龙江省")) {
			areaStr = obj[2].toString().substring(0, 3);//地图里黑龙江和内蒙古才三个字，所以截取剩下三个
		} else {
			areaStr = obj[2].toString().substring(0, 2);
		}
		if (maps.size() > 0) {
			boolean iscz = true;
			for (int i = 0; i < maps.size(); i++) {
				// 地区去重复
				if (maps.get(i).get("name").equals(areaStr)) {
					// 转换int加项目数  进入此判断就代表着该地区存在重复
					String js = maps.get(i).get("value").toString();//就获取之前地区的value值
					hashMap.put("name", maps.get(i).get("name"));//想要覆盖之前一样的地区名和value值
					hashMap.put("value", Integer.parseInt(js) + 1);//进行项目加1操作
					// 先删除   重复的地区名称
					maps.remove(maps.get(i));
					iscz = false;//把变量变成false好进下面的else里面
				}
			}
			if (iscz) {
				// 没有重复加上地区
				hashMap.put("value", 1);
				hashMap.put("name", areaStr);
				maps.add(hashMap);
			} else {
				maps.add(hashMap);//加覆盖完毕的一个集合
			}
		} else {
			hashMap.put("value", 1);
			hashMap.put("name", areaStr);
			maps.add(hashMap);
		}
		return maps;
	}

用jdbc查询数据

	public static List<Object[]> getData(String sql) throws SQLException {
		Statement st = null;
		Connection con = null;
		List<Object[]> objList = new ArrayList<Object[]>();
		try {
			DBConnectionManager db = new DBConnectionManager();
			con = db.getConnection();
			st = con.createStatement();
			ResultSet resultSet = st.executeQuery(sql);

			while (resultSet.next()) {
				ResultSetMetaData rsmd = resultSet.getMetaData();
				int columnCount = rsmd.getColumnCount();
				Object[] obj = new Object[columnCount];
				for (int i = 0; i < columnCount; i++) {
					if (resultSet.getString(i + 1) != null
							&& !resultSet.getString(i + 1).equals("")) {
						obj[i] = resultSet.getString(i + 1);
					}
				}
				objList.add(obj);
			}
		} catch (Exception e) {
			st.close();
			con.close();
			e.printStackTrace();
		} finally {
			st.close();
			con.close();
		}
		return objList;
	}
	

html代码贴上来

<div id="main" style="width: 900px;height:400px;"></div>

前台js需要有echarts插件哦

我用ajax进入后台，数据再传回来

	$.ajax({
					url : "spatialAnalysis_kjfx.action",
					type : "post",
					dataType : "JSON",
					success : function(jsondata) {
						//假设第一个值最大，之后循环对比哪个数最大就赋值哪个
						max = jsondata[0].value;
						var nameData;
						var subtextData;
						var titleBT;
						//比较大小
						for ( var i = 0; i < jsondata.length; i++) {
							//console.log(jsondata[i])
							if (jsondata[i].value > max) {
								max = jsondata[i].value;
							}
						}
						/*if (tjx == "1") {
							titleBT = "国家重点研发计划项目牵头主持单位全国分布图";
							nameData = "项目主持单位分布";
							subtextData = "单位（个数）";
						}
						if (tjx == "2") {
							titleBT = "国家重点研发计划项目承担单位全国分布图";
							nameData = "项目承担单位分布";
							subtextData = "单位（个数）";
						}
						if (tjx == "3") {
							titleBT = "国家重点研发计划项目立项经费分布图";
							nameData = "项目立项经费分布";
							subtextData = "单位（万元）";
						}
						if (tjx == "4") {
							titleBT = "国家重点研发计划单位注册分布图";
							nameData = "单位注册分布";
							subtextData = "单位（个数）";
						}*/
						if(max==0){
							max=1;
						}
						$("#title").text(titleBT);
						//页面显示图表
						//$(".tjfx-map").show();
						$.get('js/echarts/china.json', function(yCjson) {
							echarts.registerMap('china', yCjson);
							// 基于准备好的dom，初始化echarts实例
							var myChart = echarts.init(document
									.getElementById('main'));
							option = {
								title : {
									text : '',
									subtext : subtextData,
									left : 'center'
								},
								tooltip : {
									trigger : 'item'
								},
								legend : {
									orient : 'vertical',
									left : 'left',
									data : [ nameData ]
								},
								visualMap : {
									min : 0,
									max : max,
									left : 'left',
									top : 'bottom',
									text : [ '高', '低' ], // 文本，默认为数值文本
									calculable : true
								},
								toolbox : {
									show : false,
									orient : 'vertical',
									left : 'right',
									top : 'center',
									feature : {
										dataView : {
											readOnly : false
										},
										restore : {},
										saveAsImage : {}
									}
								},
								series : [ {
									name : nameData,
									type : 'map',
									mapType : 'china',
									roam : false,
									label : {
										normal : {
											show : true
										},
										emphasis : {
											show : true
										}
									},
									data : jsondata
								} ]
							};
							// 使用刚指定的配置项和数据显示图表。
							myChart.setOption(option);
						})
					}
				})
			})//加载页面的括号

到这里就圆满结束了。其实也没那么难吧，只要多动脑就没有那么多难解决的事情啦！哈哈哈哈