第一步

设置点击事件，使用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;@Overrideprotected 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转为JSONresponse.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);}
}

如何使用Ajax更新echarts工作省份信息相关推荐

MVC 音乐商店第 8 部分：购物车与 Ajax 更新
MVC 音乐商店是介绍,并分步说明了如何使用 ASP.NET MVC 和 Visual Studio 为 web 开发教程应用程序. MVC 音乐商店是一个轻量级的示例存储实现它卖音乐专辑在线,并实现 ...
ASP.NET MVC 音乐商店 - 8. 使用 Ajax 更新的购物车
ASP.NET MVC 音乐商店 - 8. 使用 Ajax 更新的购物车在这个项目中,我们将允许用户在没有注册登录的情况下将专辑加入购物车,但是,在完成结账的时候必须完成注册工作.购物和结账将会被分 ...
Web前端-Ajax-02-实例:根据省份id查询省份信息
Web前端-Ajax-02-实例:根据省份id查询省份信息 1.需求用户在文本框输入省份的编号id,在其他文本框中显示其对应的省份名称.省份简称以及省会. 2.准备工作 2.1创建数据库与数据表 2 ...
笔记-项目管理基础知识-项目信息（工作绩效信息、绩效数据、绩效报告）
项目信息 ▲▲▲▲▲ 工作绩效数据在执行项目工作的过程中,从每个正在执行的活动中收集到的原始观察结果和测量值.如:工作完成百分比.质量和技术绩效测量值.进度活动的开始和结束日期.变更请求的数量.缺陷 ...
ajax调用fastreport,使用Ajax更新ASP.Net MVC项目中的报表对象
Ajax技术显著加快了Web应用程序的速度.另外,视觉效果方面也有提升.大家都同意,每次点击按钮时整个页面都会被刷新这一点不太友好.如果你的网速不是很快,那么这个过程会很烦人,因为所有的元素都会先消失 ...
辨析工作绩效数据、工作绩效信息、工作绩效报告
工作绩效数据.工作绩效信息.工作绩效报告辨析工作绩效数据在执行项目的工作过程中,从每个正在执行的活动中收集到的原始观察结果和测量值. 例如:工作完成百分比,质量和技术绩效测量值,进度活动的开始和结 ...
在Asp.net MVC使用thickbox实现调用页面的Ajax更新
在MVC模式中,通常都是Controller处理请求并生成数据,选择一个合适的View来显示结果给用户.虽然Asp.net MVC已经有非常丰富的ActionResult来满足不同情况下的需求,但是有 ...
svn更新路径，解决办法详细步骤，eclipse里面的更新方法，svn废弃位置，Windows环境，svn服务器地址换了，如何更新本地工作目录
svn更新路径,解决办法详细步骤,eclipse里面的更新方法,svn废弃位置,Windows环境,svn服务器地址换了,如何更新本地工作目录参考文章: (1)svn更新路径,解决办法详细步骤,ec ...
ajax表格内容加按钮,单击按钮时，如何触发jquery数据表fnServerData通过AJAX更新表？...
我正在将datatables插件与服务器端数据一起使用,并使用AJAX更新表. 我的dataTables设置如下所示: tblOrders = parameters.table.dataTable( ...

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

第一步

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

第二步

Servlet获取数据库中的数据

Servlet方法

Service方法

Dao方法

ProvineTest类

第三步

处理返回的数据

如何使用Ajax更新echarts工作省份信息相关推荐

最新文章

热门文章