eCharts动态加载各省份的数据
2016-11-18 17:05
330 查看
假如从数据库读出以下数据，如何将数据展示在地图之上
1.部门的名称数据:
2.对应的销售额数据:
问题：
如何将一一对应的数据展示在地图上？
deptname的数据一一对应cash的数据
3.java代码处理对应关系
3.1定义常量省份
4.通过以下代码实现转换，并存入2个List中，方便echarts调用
5.在前端通过ajax来获取数据，进行数据的展示，代码如下：
6.最后，展示效果：(可以根据deptId来动态切换显示图例)：
图1：联通事业部
图2：电信事业部：
图3：移动事业部
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：移动事业部
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ECharts Java 动态加载数据，echartsjava
- ECharts Java 动态加载数据，echartsjava
- echarts动态加载数据
- Echarts使用及动态加载图表数据 折线图X轴数据动态加载
- Echarts通过Ajax实现动态数据加载
- echarts画圆环统计图并加载动态数据 （ajax获取数据）
- echarts在.Net中使用实例(二) 使用ajax动态加载数据
- Echarts动态加载数据
- echarts动态加载折线图数据demo
- Echarts动态加载折线图X Y轴数据图表数据
- ECharts Java 动态加载数据，echartsjava
- ECharts动态加载数据（简单）
- echarts地图 json数据 和 后套动态数据加载
- Echarts的使用以及动态加载数据
- echarts在.Net中使用实例(二) 使用ajax动态加载数据
- Echarts使用及动态加载图表数据 折线图X轴数据动态加载
- echarts动态加载数据，显示柱状图，饼图图表
- Echarts实现饼状图数据动态加载
- Echarts动态加载地图数据(Dynamic load Echarts map data)