echarts java 动态加载数据_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 deptname, List cash) throwsIOException {2 //正则表达式

3 List provic = newArrayList();4 List toCash = newArrayList();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) throwsIOException {29 Map params = newHashMap();30 params.put("provic", provic);31 params.put("toCash", toCash);32 doEchart(params);33 }34 private void doEchart(Map map) throwsIOException {35 HttpServletResponse response =ServletActionContext.getResponse();36 response.setContentType("text/json; charset=utf-8");37 JSONObject json = newJSONObject();38 json.putAll(map);39 response.getWriter().println(json.toString());40 }

5.在前端通过ajax来获取数据，进行数据的展示，代码如下：

1 /**2 * 该插件为显示地图的插件，动态加载3 */

4 functionsetMapUnion(deptId) {5 /**6 * ajax获取联通事业部的所有项目组的销售额7 */

8 var o1 = $("#acctmonth").val();9 var o2 = $("#maxMonth").val();10 var parData ={11 acctmonth : o1,12 maxMonth : o2,13 deptId : deptId14 };15 var par =JSON.stringify(parData);16 /**17 * @author Administrator18 * @params:参数设置：为地图各省份提供数据.19 */

20 varprovic;21 vartoCash;22 $.ajax({23 url : "CompanyFeeBusinessNew!setMapUnion.action",24 data : {25 par : par26 },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' ], functionDrawEchart(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 returnres;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：移动事业部