首页 > 代码库 > eCharts动态加载各省份的数据
eCharts动态加载各省份的数据
假如从数据库读出以下数据,如何将数据展示在地图之上
1.部门的名称数据:
List deptname=[联通事业部-上海联通项目组, 联通事业部-河南联通项目组, 联通事业部-贵州联通项目组, 联通事业部-黑龙江联通项目组, 联通事业部-总部项目中心, 联通事业部-河北联通项目组, 联通事业部-北京联通项目组, 联通事业部-西藏联通项目组, 联通事业部-湖北联通项目组, 联通事业部-江苏联通项目组, 联通事业部-宝马业务拓展部, 联通事业部-浙江联通项目组, 联通事业部-重庆联通项目组, 联通事业部-内蒙联通项目组, 联通事业部-四川联通项目组, 联通事业部-海南联通项目组, 联通事业部-研究院项目部, 联通事业部-宁夏联通项目组, 联通事业部-云南联通项目组, 联通事业部-吉林联通项目组, 联通事业部-甘肃联通项目组]
2.对应的销售额数据:
List cash:=[5953755, 3822674.83, 2561747.31, 2144649.95, 1674165.5, 1477500, 1456919.64, 1199760, 1126992, 1043040, 1007000, 959140, 950000, 915840, 584532.4, 350000, 282000, 263990.88, 251500, 240786, 128260]
问题:
如何将一一对应的数据展示在地图上?
deptname的数据一一对应cash的数据
3.java代码处理对应关系
3.1定义常量省份
private static final String[] province = { "江苏", "青海", "四川", "海南", "陕西", "甘肃", "云南", "湖南", "湖北", "黑龙江", "贵州", "山东", "江西", "河南", "河北", "山西", "安徽", "福建", "浙江", "广东", "吉林", "辽宁", "台湾", "新疆", "广西", "宁夏", "内蒙古", "西藏", "北京", "天津", "上海", "重庆", "香港", "澳门","南海诸岛"};
4.通过以下代码实现转换,并存入2个List中,方便echarts调用
1 private void switchParams(List<String> deptname, List cash) throws IOException { 2 // 正则表达式 3 List provic = new ArrayList(); 4 List toCash = new ArrayList(); 5 for (int i = 0; i < province.length; i++) { 6 String regex = province[i]; 7 Boolean flag = false; 8 for (int j = 0; j < deptname.size() && j < cash.size(); j++) { 9 String str = deptname.get(j); 10 if (str.contains(regex)) { 11 provic.add(regex); 12 toCash.add(cash.get(j)); 13 flag = true; 14 } 15 if (flag) { 16 break; 17 } else { 18 } 19 } 20 if(!flag){ 21 provic.add(regex); 22 toCash.add(0); 23 } 24 } 25 setParams(provic,toCash); 26 } 27 28 private void setParams(List provic, List toCash) throws IOException { 29 Map params = new HashMap(); 30 params.put("provic", provic); 31 params.put("toCash", toCash); 32 doEchart(params); 33 } 34 private void doEchart(Map map) throws IOException { 35 HttpServletResponse response = ServletActionContext.getResponse(); 36 response.setContentType("text/json; charset=utf-8"); 37 JSONObject json = new JSONObject(); 38 json.putAll(map); 39 response.getWriter().println(json.toString()); 40 }
5.在前端通过ajax来获取数据,进行数据的展示,代码如下:
1 /** 2 * 该插件为显示地图的插件,动态加载 3 */ 4 function setMapUnion(deptId) { 5 /** 6 * ajax获取联通事业部的所有项目组的销售额 7 */ 8 var o1 = $("#acctmonth").val(); 9 var o2 = $("#maxMonth").val(); 10 var parData =http://www.mamicode.com/ { 11 acctmonth : o1, 12 maxMonth : o2, 13 deptId : deptId 14 }; 15 var par = JSON.stringify(parData); 16 /** 17 * @author Administrator 18 * @params:参数设置:为地图各省份提供数据. 19 */ 20 var provic; 21 var toCash; 22 $.ajax({ 23 url : "CompanyFeeBusinessNew!setMapUnion.action", 24 data : { 25 par : par 26 }, 27 cache : true, 28 async : false, 29 type : "post", 30 success : function(result) { 31 provic = result.provic; 32 toCash = result.toCash; 33 } 34 }); 35 // ----------参数的转换 36 var text = null; 37 if (deptId == ‘5271‘) { 38 text = ‘联通事业部分分省份项目组销售额‘; 39 } else if (deptId == ‘7658‘) { 40 text = ‘电信事业部分分省份项目组销售额‘; 41 } else { 42 text = ‘移动事业部分分省份项目组销售额‘; 43 } 44 $("#map").css(‘width‘, $("#map").width()); 45 require.config({ 46 paths : { 47 echarts : ‘/pure/resources/echarts‘ 48 } 49 }); 50 require([ ‘echarts‘, ‘echarts/chart/map‘ ], function DrawEchart(ec) { 51 var myChart = ec.init(document.getElementById("map")); 52 mapParams = { 53 title : { 54 text : text, 55 // subtext: ‘纯属虚构‘, 56 left : ‘center‘ 57 }, 58 tooltip : { 59 trigger : ‘item‘ 60 }, 61 legend : { 62 orient : ‘vertical‘, 63 left : ‘left‘, 64 data : [ ‘销售额‘ ] 65 }, 66 toolbox : { 67 show : true, 68 orient : ‘vertical‘, 69 left : ‘right‘, 70 top : ‘center‘, 71 feature : { 72 dataView : { 73 readOnly : false 74 }, 75 restore : {}, 76 saveAsImage : {} 77 } 78 }, 79 visualMap : { 80 min : 0, 81 max : 5000000, 82 text : [ ‘High‘, ‘Low‘ ], 83 realtime : false, 84 calculable : true, 85 inRange : { 86 color : [ ‘lightskyblue‘, ‘yellow‘, ‘orangered‘ ] 87 } 88 }, 89 dataRange : { 90 min : 0, 91 max : 2500000, 92 x : ‘left‘, 93 selectedMode : false, 94 y : ‘bottom‘, 95 text : [ ‘High‘, ‘Low‘ ], // 文本,默认为数值文本 96 calculable : true, 97 color : [ ‘#EE6363‘, ‘#CCCCCC‘ ] 98 }, 99 series : [ { 100 name : ‘销售额‘, 101 type : ‘map‘, 102 mapType : ‘china‘, 103 roam : false, 104 label : { 105 normal : { 106 show : true 107 }, 108 emphasis : { 109 show : true 110 } 111 }, 112 data : (function() { 113 var res = []; 114 var len = provic.length; 115 while (len--) { 116 res.push({ 117 name : provic[len], 118 value : toCash[len] 119 }); 120 } 121 return res; 122 })(), 123 itemStyle : { 124 normal : { 125 color : ‘#BF3EFF‘, 126 borderWidth : 0.5, 127 borderColor : ‘black‘, 128 /* color: ‘orange‘, */ 129 label : { 130 show : false 131 } 132 } 133 } 134 } ] 135 }; 136 myChart.setOption(mapParams); 137 }); 138 }
6.最后,展示效果:(可以根据deptId来动态切换显示图例):
图1:联通事业部
图2:电信事业部:
图3:移动事业部
eCharts动态加载各省份的数据
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。