关于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进行了简单的封装，如下代码：

 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