报表分组和饼图

墨蓝 2021-10-29 13:38 316阅读 0赞

报表分组和饼图

效果图：

![1743215-20190815222243006-139516615.png][]

Donmain层的配置：

private Long id; //编号 private String supplier; //供应商名称 private String buyer; //采购员名称 private String product; //产品名称 private String productType; //产品分类 private Date vdate; //交易时间 private BigDecimal num; //采购数量 private BigDecimal price; //价格 private BigDecimal amount; //小计 = 价格*数量 private Integer status; private String groupField = ""; //分组字段 //构造方法简介建立关系 public PurchaseBillItemVo(Purchasebillitem item){ this.id=item.getId(); this.supplier=item.getBill().getSupplier().getName(); this.buyer=item.getBill().getBuyer().getUsername(); this.product=item.getProduct().getName(); this.productType=item.getProduct().getTypes().getName(); this.vdate=item.getBill().getVdate(); this.num=item.getNum(); this.price=item.getPrice(); this.amount=item.getAmount(); this.status=item.getBill().getStatus(); } //分组 public PurchaseBillItemVo(Purchasebillitem item,String groupBy){ this.id = item.getId(); this.supplier = item.getBill().getSupplier().getName(); this.buyer = item.getBill().getBuyer().getUsername(); this.product = item.getProduct().getName(); this.productType = item.getProduct().getTypes().getName(); this.vdate = item.getBill().getVdate(); this.num = item.getNum(); this.price = item.getPrice(); this.amount = item.getAmount(); this.status = item.getBill().getStatus(); //根据传入的条件 进行分组 if("o.bill.supplier.name".equals(groupBy)){ this.groupField = this.supplier; }else if("o.bill.buyer.username".equals(groupBy)){ this.groupField = this.buyer; }else if("MONTH(o.bill.vdate)".equals(groupBy)){ //this.groupField = this.vdate; 7 8 this.groupField = (DateUtils.toCalendar(this.vdate).get(Calendar.MONTH)+1)+"月"; }else{ this.groupField = this.supplier; } } //无参 public PurchaseBillItemVo (){} public String getGroupField() { //设置分组字段 默认按照供应商分组 // this.groupField = this.supplier; return groupField; } public void setGroupField(String groupField) { this.groupField = groupField; }

Service层方法的：

//分组方法的实现  
@Override  
public List<PurchaseBillItemVo> findItems(PurchasebillitemQuery itemQuery) \{  
  
List<Purchasebillitem> items = purchasebillitemRepository.findByQuery(itemQuery);  
  
 List<PurchaseBillItemVo> itemsvolist = new ArrayList<>();  
  
 for (Purchasebillitem item : items) \{  
PurchaseBillItemVo itemVo = new PurchaseBillItemVo(item,itemQuery.getGroupBy());  
 itemsvolist.add(itemVo);  
 \}  
  
return itemsvolist;  
\}

流程：点击报表加载数据进去conreoller层调用service的方法进行分组查询  返回json数据  前端页面自动封装

controller层map的封装：![1743215-20190815222700551-1092439380.png][]

饼状图的实现：

定义两个按钮分别为2D  3D定义在高级查询下面

![1743215-20190815222826496-241275302.png][]

引入饼状图需要的配置文件：

![1743215-20190815222932840-231351905.png][]

粘贴JS代码进行查询封装：

$(function(){
        
    //定义form表单 var searchForm = $("#searchForm"); var purchasebillitemDialog = $("#purchasebillitemDialog"); $("a[data-method]").on('click',function(){ //获取 data-method属性 <a data-method="seacher"> var methodName = $(this).data("method"); //动态调用方法 itsource["seacher"] itsource[methodName](); }); //对象 var itsource = { search:function(){ //该方法返回一个 JSON Object，返回对象中的每个数据都表示一个表单控件值。 var param = searchForm.serializeObject(); //发送查询数据库 --加载表格 发送请求 /purchasebillitem/page $('#purchasebillitemDatagrid').datagrid('load',param); }, charts3D:function(){ //发送ajax请求到后台查询的数据 var param = searchForm.serializeObject(); $.post("/purchaseBillItem/findAllGraphic",param,function(result){ Highcharts.chart('purchasebillitemDialog', { chart: { type: 'pie', options3d: { enabled: true, alpha: 45, //倾斜角度 beta: 0 } }, title: { text: '比例图' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', depth: 35,//深度 dataLabels: { enabled: true, format: '{point.name}' } } }, series: [{ type: 'pie', name: '消费比例', data:result }] }); }) //2D图表 --打开对话框 purchasebillitemDialog.dialog('center').dialog('open'); }, //2D事件 charts2D:function(){ var param = searchForm.serializeObject(); $.post("/purchaseBillItem/findAllGraphic",param,function(result){ Highcharts.chart('purchasebillitemDialog', { chart: { type: 'pie', options3d: { enabled: true, alpha: 0, //倾斜角度 beta: 0 } }, title: { text: '比例图' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', depth: 35,//

转载于:https://www.cnblogs.com/1999wang/p/11361016.html

[1743215-20190815222243006-139516615.png]: /images/20211029/576abd22e2b24735b7297cd552234417.png
[1743215-20190815222700551-1092439380.png]: /images/20211029/0b37f61b9cbc413590bf2449b352cc4e.png
[1743215-20190815222826496-241275302.png]: /images/20211029/0e0747af919040698c0127e957ce128e.png
[1743215-20190815222932840-231351905.png]: /images/20211029/39da5ce8072748e8a2883fb7ad9c6f42.png