ECharts - Java类库使用

构建区域数据echart有两种实现方案

1. 在前台写大量的javascript，然后把变量通过ajax或者遍历集合的方式插进去生成图表。

2.通过echart-java库构建后台处理数据对象，然后ajax交互生成图表。

优缺点分析

a.通过javascipt构建区域数据报表，主要工作在前端写javascript开发难度不大，根据官方提供案例很快上手，但这样子一旦某一页面的图表一多，就会异常混乱，且大量javascript不太容易维护。

b.ehcart-java 构建区域数据报表，主要在后端处理组装数据，需要对java core 比较熟悉开发方便，便于做成相应组件提供给其它服务使用，前端通过ajax交互，但开发相对慢点。

echart-java 库构建区域数据报表

1.ehcart-java 是开源项目，可以从com.github.abel533获取以及相应javadoc文档

2.构建Map

1.在后台进行完美封装传回一个option在前台接收了并set进option即可。API调用demo。

public String initMap (HttpServletRequest request) {
//Map<String,Long> dataMap = new IdentityHashMap<String,Long>();
List<AreaVisitEntity> list = new ArrayList<AreaVisitEntity>();
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<AreaVisitEntity>) 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.页面进行交互以及渲染图表（注意红色部分顺序，否则绘图不成功）
<div class="easyui-layout" fit="true">
<div region="center" style="padding: 1px;"></div>
<div id="main" style="float:left;height:500px;width:620px;padding:0px;"></div>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript" src="plug-in/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//初始化图表
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();
});
</script>
</div>