假如从数据库读出以下数据，如何将数据展示在地图之上
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：移动事业部
