如何使用Ajax更新echarts工作省份信息

第一步

设置点击事件，使用Ajax请求服务器

//入口          
$(function(){
//点击事件
				$("#province").click(function(){
					var provinceData=[];
					$.ajax({
						url:"<%=request.getContextPath()%>/WorkProvinceServlet",
						type:"get",
						dataType:"json",
						success:function(data){
//遍历List，将数据转换为一个对象数组
							$(data).each(function(i,v){
								var temp={name:v.name,value:v.size};//省份，统计数量
								provinceData.push(temp);
							});
                            //将处理过后的JSON传入getEchartsMap（）方法中，设置地图数据
							getEchartsMap(provinceData);
						}
					});
					
				});
			});

第二步

Servlet获取数据库中的数据

Servlet方法

@WebServlet("/WorkProvinceServlet")
public class WorkProvinceServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		System.out.println("WorkProvinceServlet");
		response.setContentType("text/plain");
		WorkProvinceService service=WorkProvinceService.getInstance();
		//统计学生在全国各省工作的信息
		List<ProvinceTest> l=service.getProvinces();
        //将List转为JSON
		response.getWriter().print(JSON.toJSON(l));
	}
       
   
}

Service方法

public class WorkProvinceService {
	private static WorkProvinceService service=null;
	private WorkProvinceService() {
		
	}
	public static WorkProvinceService getInstance() {
		if(service==null) {
			service=new WorkProvinceService();
		}
		return service;
	}
	public List<ProvinceTest> getProvinces() {
		return CommonDao.getInstance().selectProvincesByGrounp();
	}
}

Dao方法

public List<ProvinceTest> selectProvincesByGrounp() {
		List<ProvinceTest> L=new ArrayList<ProvinceTest>();
		Connection con = null;
		PreparedStatement stmt = null;
		ResultSet rs = null;
		try {
			// 获取连接
			con = DBUtils2.getConnection();
			// 定义SQL语句
			String sql = "select p.provinceid,p.province,count(*) count from RegistrationCardInfo r,province p\r\n" + 
					"       where r.province=p.provinceid\r\n" + 
					"       group by p.provinceid,p.province";
			// 获取PreparedStatement对象
			stmt = con.prepareStatement(sql);

			rs = stmt.executeQuery();
			while (rs.next()) {
				ProvinceTest p = new ProvinceTest();
				p.setName(rs.getString("province"));
				p.setSize(rs.getInt("count"));
				L.add(p);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return L;
	}

ProvineTest类

public class ProvinceTest {
	private String name;//省份名
	private Integer size;//数量
	public ProvinceTest() {
		super();
		// TODO Auto-generated constructor stub
	}
	public ProvinceTest(String name, Integer size) {
		super();
		this.name = name;
		this.size = size;
	}
}	

第三步

处理返回的数据

function getEchartsMap(provinceData) {			//工作省份地图
	var myChart = echarts.init(document.getElementById('map'));
	var app = {};
	option = null;
	var data = [
		{ name: '北京', value: 1000 },
		{ name: '郑州', value: 38 },
		{ name: '石家庄', value: 43 },
		{ name: '重庆', value: 54 },
		{ name: '西安', value: 54 },
		{ name: '上海', value: 54 }
	];
	
	var geoCoordMap = {
		'北京': [116.46, 39.92],
		'郑州': [113.65, 34.76],
		'石家庄': [114.48, 38.03],
		'重庆': [106.54, 29.59],
		'西安': [108.95, 34.27],
		'上海': [121.48, 31.22]
	};

	function convertData(data) {
		var res = [];
		for(var i = 0; i < data.length; i++) {
			var geoCoord = geoCoordMap[data[i].name];
			if(geoCoord) {
				res.push({
					name: data[i].name,
					value: geoCoord.concat(data[i].value)
				});
			}
		}
		return res;
	};
	//测试数据
	//alert(provinceData);
	
	option = {
		tooltip: {},
		visualMap: {
			show: false,
			inRange: {
				color: '#fff'
			}
		},
		geo: {
			map: 'china',
			roam: true,
			label: {
				normal: {
					show: true,
					textStyle: {
						color: '#929292',
						fontSize: 8
					}
				}
			},
			itemStyle: {
				normal: {
					borderColor: 'rgba(0, 0, 0, 0.2)'
				},
				emphasis: {
					areaColor: null,
					shadowOffsetX: 0,
					shadowOffsetY: 0,
					shadowBlur: 20,
					borderWidth: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		},
		series: [
			{
				type: 'scatter',
				coordinateSystem: 'geo',
				data: convertData(data),
				symbolSize: 15,
				symbol: 'image://images/pin_2.svg',
				symbolRotate: 0,
				itemStyle: {
					normal: {
						color: 'red'
					}
				}
			},
			{
				name: '就业地区',
				type: 'map',
				geoIndex: 0,
				data: provinceData//处理传入的数据！！！
			}
		]
		
		/*
		 * 之前的静态数据
		 { name: '北京', value: 1000 },
					{ name: '天津', value: 58 },
					{ name: '上海', value: 78 },
					{ name: '重庆', value: 53 },
					{ name: '河北', value: 27 },
					{ name: '河南', value: 58 },
					{ name: '云南', value: 58 },
					{ name: '辽宁', value: 58 },
					{ name: '黑龙江', value: 58 },
					{ name: '湖南', value: 58 },
					{ name: '安徽', value: 58 },
					{ name: '山东', value: 58 },
					{ name: '新疆', value: 58 },
					{ name: '江苏', value: 58 },
					{ name: '浙江', value: 58 },
					{ name: '江西', value: 58 },
					{ name: '湖北', value: 58 },
					{ name: '广西', value: 58 },
					{ name: '甘肃', value: 58 },
					{ name: '山西', value: 58 },
					{ name: '内蒙古', value: 58 },
					{ name: '陕西', value: 58 },
					{ name: '吉林', value: 58 },
					{ name: '福建', value: 58 },
					{ name: '贵州', value: 58 },
					{ name: '广东', value: 58 },
					{ name: '青海', value: 58 },
					{ name: '西藏', value: 58 },
					{ name: '四川', value: 58 },
					{ name: '宁夏', value: 58 },
					{ name: '海南', value: 58 },
					{ name: '台湾', value: 58 },
					{ name: '香港', value: 58 },
					{ name: '澳门', value: 1231231 }
		 */
	};
	if(option && typeof option === "object") {
		myChart.setOption(option, true);
	}
}