版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
1.报表
1.1报表是什么？
报表：向上级报告情况的表格
1.2 为什么要有报表，学来有什么用?–实际应用场景？
老板想看一下 强经理 这个月的采购情况 --> 老板采取的决策，去做一些事情
使用场景：
(1)老板想看一下 强经理 这个月的采购情况
(2)看一下 航航 销售情况
（3）整年(整季度 整月)的营业额 利润 --财务人员
1.3 怎么去使用？
报表的种类：
(1) 数据表格 – excel表格
（2)图形表格 --各种各样的图形表格
3w
what 是什么
why 为什么
how 怎么
数据表格 报表 – easyui-datagrid-groupview
步骤：
(1) 创建一个类报表对象 PurchasebillitemVo(页面要展示的数据字段)
groupField – 分组字段
添加一个构造方法用来给PurchasebillitemVo这个字段赋值
(2)写了方法 findItems
先查询出purchsebillitem
在构造出 PurchasebillitemVo对象
(3)返回前台 --表格里面就进行展示
前台：
(1) 准备一个页面purchasebillitem.jsp -->(查询工具栏 分组的下拉)–》查询功能
(2) puchasebillitem.js 写了一个查询数据的方法 已经
表格的初始化设置的方法
排除错误：打印法
百度法
2.图形报表
数据展示的形式，看到不爽，如果图形展示，看到要舒服
做图形报表的框架–echarts highcharts 只需要传递数据
flash – 兼容性不是很好 容易崩溃 actionscript/javascript (flex)
html5 – canvas
不管是哪一个款报表，其实他的用法都差不多
思路：
(1) 下载
（2）引入
（3）看例子 --把我们需要的数据传递给组件 --它就会自动渲染图表
highcharts – 下载
任务 今日通关目标
第一关：数据表格
（1）datagrid-groupview
步骤：
后台：(1)创建PurchasebillitemVo
/**
* 数据表格对象
* List<PurchasebillitemVo>
*/
public class PurchasebillitemVo {
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 Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getSupplier() {
return supplier;
}
public void setSupplier(String supplier) {
this.supplier = supplier;
}
public String getBuyer() {
return buyer;
}
public void setBuyer(String buyer) {
this.buyer = buyer;
}
public String getProduct() {
return product;
}
public void setProduct(String product) {
this.product = product;
}
public String getProductType() {
return productType;
}
public void setProductType(String productType) {
this.productType = productType;
}
public Date getVdate() {
return vdate;
}
public void setVdate(Date vdate) {
this.vdate = vdate;
}
public BigDecimal getNum() {
return num;
}
public void setNum(BigDecimal num) {
this.num = num;
}
public BigDecimal getPrice() {
return price;
}
public void setPrice(BigDecimal price) {
this.price = price;
}
public BigDecimal getAmount() {
return amount;
}
public void setAmount(BigDecimal amount) {
this.amount = amount;
}
public Integer getStatus() {
return status;
}
public void setStatus(Integer status) {
this.status = status;
}
public String getGroupField() {
return groupField;
}
public void setGroupField(String groupField) {
this.groupField = groupField;
}
public PurchasebillitemVo(){}
//purchasebillitem 查询出来值
//groupBy 通过什么来分组
public PurchasebillitemVo(Purchasebillitem purchasebillitem, String groupBy){
this.id = purchasebillitem.getId();
this.buyer = purchasebillitem.getBill().getBuyer().getUsername();
this.supplier = purchasebillitem.getBill().getSupplier().getName();
this.product = purchasebillitem.getProduct().getName();
this.amount = purchasebillitem.getAmount();
this.num = purchasebillitem.getNum();
this.price = purchasebillitem.getPrice();
this.productType = purchasebillitem.getProduct().getTypes().getName();
this.status = purchasebillitem.getBill().getStatus();
this.vdate = purchasebillitem.getBill().getVdate();
//分组字段
this.groupField = this.supplier;
if(("o.bill.buyer.username").equals(groupBy)){
this.groupField = this.buyer;
}else if(("MONTH(o.bill.vdate)").equals(groupBy)){
//取到月份
int month = (DateUtils.toCalendar(vdate).get(Calendar.MONTH)+1);
this.groupField = month+"月";
}
/**
* if("o.bill.buyer.username".equals(groupBy)){
* groupField = this.buyer;
* }else if("MONTH(o.bill.vdate)".equals(groupBy)){
* groupField = (DateUtils.toCalendar(vdate).get(Calendar.MONTH)+1) + "月份";
* }else {
* groupField = this.supplier;
* }
*
*
*/
}
}
(2)构造方法用来封装数据
（3）多添加一个groupField分组字段
this.groupField = this.supplier;
if(("o.bill.buyer.username").equals(groupBy)){
this.groupField = this.buyer;
}else if(("MONTH(o.bill.vdate)").equals(groupBy)){
//取到月份
int month = (DateUtils.toCalendar(vdate).get(Calendar.MONTH)+1);
this.groupField = month+"月";
}
(4) service写了方法查询数据
@Service
public class PurchasebillitemServiceImpl extends BaseServiceImpl<Purchasebillitem,Long> implements IPurchasebillitemService {
@Autowired
private PurchasebillitemRepository purchasebillitemRepository;
//返回PurchasebillitemVo
@Override
public List<PurchasebillitemVo> findItems(PurchasebillitemQuery purchasebillitemQuery){
List<PurchasebillitemVo> itemVos = new ArrayList<>();
//查询采购明细
List<Purchasebillitem> items = purchasebillitemRepository.findByQuery(purchasebillitemQuery);
for (Purchasebillitem item : items) {
PurchasebillitemVo purchasebillitemVo = new PurchasebillitemVo(item, purchasebillitemQuery.getGroupBy());
itemVos.add(purchasebillitemVo);
}
return itemVos;
}
第二关：图形表格
（2）2D 3D饼图
核心–：拼接sql
public List<Object[]> findCharts(PurchasebillitemQuery purchasebillitemQuery ){
//拼接jpql的语句 where group
String jpql = "select "+purchasebillitemQuery.getGroupBy()+",sum(o.bill.totalAmount) from Purchasebillitem o " + purchasebillitemQuery.getWhereSql()+
" group by "+purchasebillitemQuery.getGroupBy();
System.out.println("jpql---------:"+jpql);
List<Object[]> result = purchasebillitemRepository.findByJpql(jpql, purchasebillitemQuery.getParams().toArray());
return result;
}
前台就拷贝
//编辑明细表格
var purchasebillitemGrid = $('#purchasebillitemGrid');
itsource = {
//高级查询
"search": function () {
//把form表单元素，直接封装成一个json对象
var jsonObj = $("#searchForm").serializeObject();
//加载datagrid
purchasebillitemGrid.datagrid('load', jsonObj);
},
"charts2D": function () {
//获取查询表单的参数
var params = $("#searchForm").serializeObject();
//发送ajax请求 到后台查询
//$.post()
$("#purchaseBillItemDialog").dialog("center").dialog("open");
$.post("/purchasebillitem/findCharts", params, function (result) {
//数据表格
Highcharts.chart('purchaseBillItemDialog', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: '采购订单的数据情况'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: '总金额比例',
colorByPoint: true,
data: result
}]
});
});
},
"charts3D": function () {
//获取查询表单的参数
var params = $("#searchForm").serializeObject();
//发送ajax请求 到后台查询
//$.post()
$("#purchaseBillItemDialog").dialog("center").dialog("open");
$.post("/purchasebillitem/findCharts", params, function (result) {
Highcharts.chart('purchaseBillItemDialog', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 70,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: result
}]
});
});
}
}