public String initMap (HttpServletRequest request) {
//Map dataMap = new IdentityHashMap();
List list = new ArrayList();
Option option = new GsonOption();//此处需要用GsonOption
EMap map = new EMap("PV");
option.title().text("O2O电商平台区域访问量").textAlign(X.left);
option.title().left("center");
option.tooltip().trigger(Trigger.item);
option.legend().orient(Orient.vertical).left("left");
option.legend().data(new Object[]{"PV","UV"}); //这里待优化,动态获取
map.mapLocation(new MapLocation(X.left, Y.top, 600));
map.selectedMode(SelectedMode.single);
map.itemStyle().normal().borderWidth(2).borderColor("skyblue").color("orange").label().show(true);
map.itemStyle().emphasis().borderWidth(2).borderColor("#fff").color("#32cd32").label().show(true).textStyle().color("#fff");
list = (List) areaVisitService.getAreaVisits();
Data data = null;
if (null!= list&&!list.isEmpty()) {
for (AreaVisitEntity areaVisits : list) {
data = new Data(areaVisits.getRegionAlias(),areaVisits.getPv());
//modelMap.put(areaVisits.getRegionAlias(), list.get(1).getPv());
data.itemStyle().normal().color("#32cd32").label().show(true).textStyle().color("#fff").fontSize(15);
data.itemStyle().emphasis().borderColor("yellow").color("#cd5c5c").label().show(false).textStyle().color("blue");
//map.markPoint().itemStyle().normal().color("skyblue");
map.data(data);
}
}
option.animation(true);
option.series(map);
JSONObject jsonObj = JSONObject.fromObject(option.toString()); //需要转成json否则绘图不成功
return jsonObj.toString();
}
2.页面进行交互以及渲染图表(注意红色部分顺序,否则绘图不成功)
//初始化图表
function drawEChart (){
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading({text: '图表数据正在努力加载...',});
$.ajax({
type : 'post',
url : 'areaVisitController.do?initMap', dataType: 'json', success : function(data){ //注意此处需要这样解析提取数据,否则会出错,具体有待研究 var data = eval("("+data+")"); myChart.setOption(data); myChart.hideLoading(); }, error : function (errMsg){ alert("图表请求数据失败,请稍后重新刷新!"); } }); } //init $(function(){ drawEChart(); });