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调用

 private void switchParams(List<String> deptname, List cash) throws IOException {
         // 正则表达式
         List provic = new ArrayList();
         List toCash = new ArrayList();
         for (int i = 0; i < province.length; i++) {
             String regex = province[i];
             Boolean flag = false;
             for (int j = 0; j < deptname.size() && j < cash.size(); j++) {
                 String str = deptname.get(j);
                 if (str.contains(regex)) {
                     provic.add(regex);
                     toCash.add(cash.get(j));
                     flag = true;
                 }
                 if (flag) {
                     break;
                 } else {
                 }
             }
             if(!flag){
                 provic.add(regex);
                 toCash.add(0);
             }
         }
         setParams(provic,toCash);
     }

     private void setParams(List provic, List toCash) throws IOException {
         Map params = new HashMap();
         params.put("provic", provic);
         params.put("toCash", toCash);
         doEchart(params);
     }
         private void doEchart(Map map) throws IOException {
         HttpServletResponse response =      ServletActionContext.getResponse();
         response.setContentType("text/json; charset=utf-8");
         JSONObject json = new JSONObject();
         json.putAll(map);
         response.getWriter().println(json.toString());
     }

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

 /**
  * 该插件为显示地图的插件，动态加载
  */
 function setMapUnion(deptId) {
     /**
      * ajax获取联通事业部的所有项目组的销售额
      */
     var o1 = $("#acctmonth").val();
     var o2 = $("#maxMonth").val();
     var parData = {
         acctmonth : o1,
         maxMonth : o2,
         deptId : deptId
     };
     var par = JSON.stringify(parData);
     /**
      * @author Administrator
      * @params:参数设置：为地图各省份提供数据.
      */
     var provic;
     var toCash;
     $.ajax({
         url : "CompanyFeeBusinessNew!setMapUnion.action",
         data : {
             par : par
         },
         cache : true,
         async : false,
         type : "post",
         success : function(result) {
             provic = result.provic;
             toCash = result.toCash;
         }
     });
     // ----------参数的转换
     var text = null;
     if (deptId == '5271') {
         text = '联通事业部分分省份项目组销售额';
     } else if (deptId == '7658') {
         text = '电信事业部分分省份项目组销售额';
     } else {
         text = '移动事业部分分省份项目组销售额';
     }
     $("#map").css('width', $("#map").width());
     require.config({
         paths : {
             echarts : '/pure/resources/echarts'
         }
     });
     require([ 'echarts', 'echarts/chart/map' ], function DrawEchart(ec) {
         var myChart = ec.init(document.getElementById("map"));
         mapParams = {
             title : {
                 text : text,
                 // subtext: '纯属虚构',
                 left : 'center'
             },
             tooltip : {
                 trigger : 'item'
             },
             legend : {
                 orient : 'vertical',
                 left : 'left',
                 data : [ '销售额' ]
             },
             toolbox : {
                 show : true,
                 orient : 'vertical',
                 left : 'right',
                 top : 'center',
                 feature : {
                     dataView : {
                         readOnly : false
                     },
                     restore : {},
                     saveAsImage : {}
                 }
             },
             visualMap : {
                 min : 0,
                 max : 5000000,
                 text : [ 'High', 'Low' ],
                 realtime : false,
                 calculable : true,
                 inRange : {
                     color : [ 'lightskyblue', 'yellow', 'orangered' ]
                 }
             },
             dataRange : {
                 min : 0,
                 max : 2500000,
                 x : 'left',
                 selectedMode : false,
                 y : 'bottom',
                 text : [ 'High', 'Low' ], // 文本，默认为数值文本
                 calculable : true,
                 color : [ '#EE6363', '#CCCCCC' ]
             },
             series : [ {
                 name : '销售额',
                 type : 'map',
                 mapType : 'china',
                 roam : false,
                 label : {
                     normal : {
                         show : true
                     },
                     emphasis : {
                         show : true
                     }
                 },
                 data : (function() {
                     var res = [];
                     var len = provic.length;
                     while (len--) {
                         res.push({
                             name : provic[len],
                             value : toCash[len]
                         });
                     }
                     return res;
                 })(),
                 itemStyle : {
                     normal : {
                         color : '#BF3EFF',
                         borderWidth : 0.5,
                         borderColor : 'black',
                         /* color: 'orange', */
                         label : {
                             show : false
                         }
                     }
                 }
             } ]
         };
         myChart.setOption(mapParams);
     });
 }

6.最后，展示效果：(可以根据deptId来动态切换显示图例)：

图1：联通事业部
  

图2：电信事业部：

图3：移动事业部