你的位置:首页 > Java教程

[Java教程]关于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(

  

使用方法:

 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