ECharts饼图和柱状图简单应用介绍（结合echart3.jar开发）

前端代码引入JS

	<!-- echarts图表 -->
	<script type="text/javascript" src="rwtj/echarts.min.js"></script>

加载后台的数据代码，并生成图表

var swfltjChart = echarts.init(document.getElementById('swfltj_chart'));
	swfltjChart.clear();
	swfltjChart.showLoading({text: '正在努力的读取数据中...'});
	$.ajax({
		asyn:false,
    	type: 'post',  
    	contentType: "text/html;charset=UTF-8",
      	url: _path+"/rwsjtj/pie.do?lx=swfltj"+param,					      
      	error: function (XMLHttpRequest, textStatus, errorThrown) {  //请求失败处理函数
      	    alert(textStatus);  
      	},  
      	success:function(rtn){ //请求成功后处理函数。
      	    var option = eval("("+rtn+")");
      	    swfltjChart.setOption(option);
      		swfltjChart.hideLoading(); 
      	}  
  	});

后台java代码的需要引入，具体的jar可以从下载

import com.github.abel533.echarts.Option;
import com.github.abel533.echarts.axis.CategoryAxis;
import com.github.abel533.echarts.axis.ValueAxis;
import com.github.abel533.echarts.code.Orient;
import com.github.abel533.echarts.code.Tool;
import com.github.abel533.echarts.json.GsonOption;
import com.github.abel533.echarts.option.EffectOption;
import com.github.abel533.echarts.option.NoDataLoadingOption;
import com.github.abel533.echarts.series.Bar;
import com.github.abel533.echarts.series.Effect;
import com.github.abel533.echarts.series.Pie;

后台的部分代码：

/**
     * 饼图 
     * @return
     */
    @RequestMapping(value = "/pie.do")
    @ResponseBody
    public String pie(HttpServletRequest request){
        //需要的数据
        String title = "事务分类统计";
        String lx  = UtilComm.trim(request.getParameter("lx"));
        String qsrq = request.getParameter("qsrq");
        String jsrq = request.getParameter("jsrq");
        String bmid = request.getParameter("bmid");
        if("zbswtj".equals(lx))
        {
        	title = "在办事务统计";
        }
        Map<String,Integer> dataMap = new HashMap<String, Integer>();
        if("zbswtj".equals(lx))
        {
        	dataMap = rwsjtjService.getRwztTj(qsrq, jsrq, bmid);
        }
        else
        {
        	dataMap = rwsjtjService.getSwflTj(qsrq, jsrq, bmid);
        }
         
        Object[] searchs = new Object[dataMap.size()] ;
        
        //创建option对象
        Option option = new GsonOption();

        //设置标题  二级标题  标题位置
        // option.title().text(title).subtext("二级标题").x("center");
        
        option.title().text(title).x("left");//将标题传入即可 并且支持链式调用 设置显示位置 居左
        
        //设置工具栏 展示  能标记
        option.toolbox().show(true).feature(Tool.mark,
                Tool.magicType);

        //设置显示工具格式
        option.tooltip().show(true);

        //填充数据
        Pie pie = new Pie();//创建饼图对象

        //设置饼图的标题 半径、位置
        //pie.name(title).radius("55%").center("50%","50%");
        
        //填充数据
        int i =0;
        for(String key : dataMap.keySet()){
            Map<String,Object> map = new HashMap<String, Object>();
            map.put("value",dataMap.get(key));//填充饼图数据
            String name ="";
            if("zbswtj".equals(lx))
            {
            	if(key.equals("100_cq"))
            	{
            		name="在办（已超期）";
            	}
            	else if(key.equals("100_wcq"))
            	{
            		name="在办（未超期）";
            	}
            	else
            	{
            		name =CacheUtils.getCommZtmcVal(key);
            	}
            }
            else
            {
            	name = (String)CacheUtils.getPtRwfl(key).get("MCMB");
            }
            map.put("name",name);//填充饼图数据对应的搜索引擎
            pie.data(map);
            searchs[i]=name;
            i++;
        }
        //设置图例  图例位置  图例对齐方式 竖列对齐
        option.legend().data(searchs).x("right").y("center").orient(Orient.vertical);
        option.series(pie); //设置数据
        
        NoDataLoadingOption noDataLoadingOption =new NoDataLoadingOption();
        Effect effect = new Effect();
        effect.setShow(true);
        EffectOption effectOption = new EffectOption();
        effectOption.setEffect(0);
        noDataLoadingOption.setEffect(effect);
        noDataLoadingOption.setText("暂无数据");
        option.noDataLoadingOption(noDataLoadingOption);
        
        return option.toString();
}
    
    
    /**
     * 柱状图  
     * @return
     */
    @RequestMapping(value = "/bar.do")
    @ResponseBody()
    public String bar(HttpServletRequest request){
    	 String lx  = UtilComm.trim(request.getParameter("lx"));
    	  String qsrq = request.getParameter("qsrq");
          String jsrq = request.getParameter("jsrq");
          String bmid = request.getParameter("bmid");
        //标题
        String title = "办理人办理事务统计";
        if("fqrswtj".equals(lx))
        {
        	title = "发起人提交事务统计";
        }
        Map<String,Integer> dataMap = new HashMap<String, Integer>();
        if("fqrswtj".equals(lx))
        {
        	dataMap = rwsjtjService.getTjrrTj(qsrq, jsrq, bmid,"");
        }
        else
        {
        	dataMap = rwsjtjService.getCbrrTj(qsrq, jsrq, bmid,"");
        }
        
        //####开始构建option对象 ######
        //1.创建option对象    有两种方式 一种是直接创建option但是在封装好option之后要使用json转换工具进行格式的转换
        //这里使用第二种方式直接构建GsonOption 通过toString方法可转换成json
        Option option = new GsonOption();
        //2.设置标题  可选
        option.title().text(title).x("left");//将标题传入即可 并且支持链式调用 设置显示位置 居左
        if(dataMap.size()==0)
        {
        	NoDataLoadingOption noDataLoadingOption =new NoDataLoadingOption();
        	Effect effect = new Effect();
        	effect.setShow(true);
        	EffectOption effectOption = new EffectOption();
        	effectOption.setEffect(0);
        	noDataLoadingOption.setEffect(effect);
        	noDataLoadingOption.setText("暂无数据");
        	option.noDataLoadingOption(noDataLoadingOption);
        	return option.toString();
        }
        //3.设置图例  可选
        option.legend().data("总数","在办").x("right").y("center").orient(Orient.vertical);;
        //4.设置工具栏  可选
        option.toolbox().show(true).feature(Tool.mark,
                Tool.magicType); //设置可标记
        //5.设置显示工具
        option.tooltip().show(true) ;//设置显示的格式 当鼠标放到柱状图上时的显示格式

        //7.设置y轴 这里不给指定数据  自动调整
        ValueAxis valueAxis = new ValueAxis();
        option.yAxis(valueAxis);

        //8.填充柱状图数据
        Bar bar = new Bar();
        bar.name("总数");
        Object[] dimSet =new Object [dataMap.size()];
        int i=0;
        for(String key : dataMap.keySet()){
            Map<String,Object> map = new HashMap<String, Object>();
            map.put("value",dataMap.get(key));
            String name = CacheUtils.getUserNameVal(key);
            map.put("name",name);
            bar.data(map);//指定路段装入指定数据
            dimSet[i++]=name;
        }
        
        
        Map<String,Integer> dataMapZb = new HashMap<String, Integer>();
        if("fqrswtj".equals(lx))
        {
        	dataMapZb = rwsjtjService.getTjrrTj(qsrq, jsrq, bmid,"ZB");
        }
        else
        {
        	dataMapZb = rwsjtjService.getCbrrTj(qsrq, jsrq, bmid,"ZB");
        }
        Bar bar2 = new Bar();
        bar2.name("在办");
        for(String key : dataMap.keySet()){
            Map<String,Object> map = new HashMap<String, Object>();
            map.put("value",  dataMapZb.get(key)==null?"0":dataMapZb.get(key));
            String name = CacheUtils.getUserNameVal(key);
            map.put("name",name);
            bar2.data(map);//指定路段装入指定数据
        }
        
        
        //6.设置x轴数据
        CategoryAxis categoryAxis = new CategoryAxis();
        categoryAxis.data(dimSet);
        option.xAxis(categoryAxis);
        
        //装入数据表中
        option.series(bar,bar2);
        
    
        
        //option进行json格式处理
        String result = option.toString();
        return result ;
    }

用了echart3.jar后java组装数据根据简单清晰。整个过程非常简单。效果图如下
前端和后台应用的包资源可以从https://download.csdn.net/download/yinbaicheng/10610857 下载。

ECharts饼图和柱状图简单应用介绍（结合echart3.jar开发）

猜你喜欢