标签：
在项目中开发图表功能时用到了Echars和一个关于Echars的java类库（http://git.oschina.net/free/ECharts）。这个类库主要目的是方便在Java中构造ECharts中可能用到的数据结构，即我们可以直接在后端构造好一个Option对象（java对象），将其转换为JSON字符串后返回给前端。但是在Echarts中的Option配置项中，通常需要配置一些函数类型的参数，在后端构造的Option对象只能以拼接字符串的方式在传递函数类型的参数，这样拼接不仅繁琐，而且通过使用java提供的一些Json工具包将后台构造的Option对象转换为json字符串时容易出现错误。所以我对Echars进行了简单的封装，如下代码：
1 /** 2 * Created by liubaozhe on 2016/7/20. 3 */ 4 function EcharsFun(){ 5 this.cfg={ 6 echartsInitDom:null, //初始化DOM节点,jquery对象类型 （必选） 7 ajaxUrl:null, //ajax 提交路径（必选） 8 ajaxParam:{}, //ajax 参数（必选） 9 ajaxSuccess:null, //ajax请求成功回调函数 10 option :null,//option 对象参数 11 isResize:true //是否根据窗口大小改变图表大小 12 } 13 } 14 EcharsFun.prototype=$.extend({},{ 15 doAjax:function(){ 16 var that=this; 17 $.ajax({ 18 url: that.cfg.ajaxUrl, 19 type: "POST", 20 data:that.cfg.ajaxParam, 21 dataType :"json", 22 error: function(XMLHttpRequest, textStatus, errorThrown) { 23 that.error(XMLHttpRequest, textStatus, errorThrown); 24 }, 25 success: function(data){ 26 that._success(data); 27 }, 28 beforeSend: function() {//请求前回调函数 29 that.beforeSend(); 30 }, 31 complete:function(XMLHttpRequest, textStatus) { //请求完成回调函数 32 that.complete(XMLHttpRequest, textStatus); 33 } 34 }); 35 }, 36 beforeSend:function(){ 37 var that=this; 38 that._myChart.clear(); 39 that._myChart.showLoading({ 40 text: ‘正在努力的读取数据中...‘ //loading话术 41 }) 42 }, 43 complete:function(){ 44 var that=this; 45 that._myChart.hideLoading(); 46 }, 47 _success:function(data){ 48 var that=this; 49 var option={}; 50 if(data && data.option){ 51 option = $.parseJSON(data.option); 52 } 53 //如果option对象不为空，进行合并参数 54 if(!$.isEmptyObject(option)) { 55 $.extend(true,option, that.cfg.option); //合并option 56 } 57 //设置ajax回调函数 58 that.cfg.ajaxSuccess && that.cfg.ajaxSuccess(data); 59 //设置option 60 that._myChart.setOption(option,true); 61 }, 62 error:function (error) { 63 console.error("图表请求数据失败!"); 64 }, 65 initEcharts:function() { 66 var that = this; 67 that._myChart = echarts.init(that.cfg.echartsInitDom[0]); 68 }, 69 bindEvent:function(){ //绑定UI事件 70 var that=this; 71 if(that.cfg.isResize){ 72 window.onresize = that._myChart.resize; 73 } 74 }, 75 init:function(cfg){ 76 var that=this; 77 that._myChart=null; 78 $.extend(that.cfg,cfg); 79 that.initEcharts(); 80 that.doAjax(); 81 that.bindEvent(); 82 } 83 });
使用方法：
var echars = new EcharsFun();
echars.init({
echartsInitDom: $(‘#issue-total-bar‘),
ajaxUrl:createIssueTotalPie.do, //ajax 提交路径（必选）
ajaxParam: $(‘from‘).serializeObject(),
isResize: true //是否根据窗口大小改变图表大小
});
如果需要配置其他函数参数，和在前端Echarts option参数一样配置就行了，前端配置的参数优先级高，会覆盖生成的参数：
var echars = new EcharsFun();
echars.init({
echartsInitDom: $(‘#issue-total-bar‘),
ajaxUrl:createIssueTotalPie.do, //ajax 提交路径（必选）
ajaxParam: $(‘from‘).serializeObject(),
option: {
series: [
{
itemStyle: {
normal: {
label: {
formatter: function (params) {
return params.name + ‘:‘ + params.value + ‘\n占比:‘ + params.percent + ‘%‘;
}
}
},
emphasis: {
label: {
formatter: function (params) {
return params.percent + ‘%‘;
}
}
}
}
}
]
},
isResize: true //是否根据窗口大小改变图表大小
});
结束：欢迎指出我文中的错误和不足，在此先行谢过了☆⌒(*＾-゜)v
标签：
原文地址：http://www.cnblogs.com/liubaozhe/p/5679554.html
