關於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