eCharts动态加载各省份的数据

Posted 2020-08-20 霓羽决奕

假如从数据库读出以下数据，如何将数据展示在地图之上

    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 = {
 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：移动事业部