- 前端代码引入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开发)
最新推荐文章于 2024-08-21 17:29:12 发布