报表分组和饼图

　　　　　　　　　　　　　　　　报表分组和饼图

效果图：

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的封装：

饼状图的实现：

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

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

粘贴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