java echarts 类库_关于ECharts Java类库的一个jquery插件

在项目中开发图表功能时用到了Echars和一个关于Echars的java类库(http://git.oschina.net/free/ECharts)。这个类库主要目的是方便在Java中构造ECharts中可能用到的数据结构，即我们可以直接在后端构造好一个Option对象(java对象)，将其转换为JSON字符串后返回给前端。但是在Echarts中的Option配置项中，通常需要配置一些函数类型的参数，在后端构造的Option对象只能以拼接字符串的方式在传递函数类型的参数，这样拼接不仅繁琐，而且通过使用java提供的一些Json工具包将后台构造的Option对象转换为json字符串时容易出现错误。所以我对Echars进行了简单的封装，如下代码：

/*

* Created by liubaozhe on 2016/7/20.

*/

function EcharsFun(){

this.cfg={

echartsInitDom:null, //初始化DOM节点,jquery对象类型 (必选)

ajaxUrl:null, //ajax 提交路径(必选)

ajaxParam:{}, //ajax 参数(必选)

ajaxSuccess:null, //ajax请求成功回调函数

option :null,//option 对象参数

isResize:true //是否根据窗口大小改变图表大小

}

}

EcharsFun.prototype=$.extend({},{

doAjax:function(){

var that=this;

$.ajax({

url: that.cfg.ajaxUrl,

type: "POST",

data:that.cfg.ajaxParam,

dataType :"json",

error: function(XMLHttpRequest, textStatus, errorThrown) {

that.error(XMLHttpRequest, textStatus, errorThrown);

},

success: function(data){

that._success(data);

},

beforeSend: function() {//请求前回调函数

that.beforeSend();

},

complete:function(XMLHttpRequest, textStatus) { //请求完成回调函数

that.complete(XMLHttpRequest, textStatus);

}

});

},

beforeSend:function(){

var that=this;

that._myChart.clear();

that._myChart.showLoading({

text: '正在努力的读取数据中...' //loading话术

})

},

complete:function(){

var that=this;

that._myChart.hideLoading();

},

_success:function(data){

var that=this;

var option={};

if(data && data.option){

option = $.parseJSON(data.option);

}

//如果option对象不为空，进行合并参数

if(!$.isEmptyObject(option)) {

$.extend(true,option, that.cfg.option); //合并option

}

//设置ajax回调函数

that.cfg.ajaxSuccess && that.cfg.ajaxSuccess(data);

//设置option

that._myChart.setOption(option,true);

},

error:function (error) {

console.error("图表请求数据失败!");

},

initEcharts:function() {

var that = this;

that._myChart = echarts.init(that.cfg.echartsInitDom[0]);

},

bindEvent:function(){ //绑定UI事件

var that=this;

if(that.cfg.isResize){

window.onresize = that._myChart.resize;

}

},

init:function(cfg){

var that=this;

that._myChart=null;

$.extend(that.cfg,cfg);

that.initEcharts();

that.doAjax();

that.bindEvent();

}

});

使用方法：

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