1 报表(理解)

1.1 报表是什么？

报表：向上级报告情况的表格（更加直观的来看数据表格）

1.2 为什么要有报表，学来有什么用?–实际应用场景？

老板想看一下强经理这个月的采购情况 --> 老板采取的决策，去做一些事情

使用场景：

(1)老板想看一下强经理这个月的采购情况

(2)看一下航航销售情况

（3）整年(整季度整月)的营业额利润 --财务人员

1.3 怎么去使用？

报表的种类：

(1) 数据表格 – excel表格

（2)图形表格 --各种各样的图形表格

what 是什么

why 为什么

how 怎么

数据表格报表 – easyui-datagrid-groupview

步骤：

(1) 创建一个类报表对象 PurchasebillitemVo(页面要展示的数据字段此类不交给jpa管理)

groupField – 分组字段

添加一个构造方法用来给PurchasebillitemVo这个字段赋值

当我们需要进行一个多表查询进行一个页面展示的时候
此时可以使用两种方式
方式一在数据库里面创建视图我们直接查询视图就好了
方式二当我们查询出所有的数据之后呢将我们需要展示再前台的数据进行封装重新赋值（写一个类设定需要展示的字段赋值），这样我们后台只需要将这个类传到前台就可以进行页面渲染了
今天我们使用的第二种方式

package cn.itsource.aisell.domain;import org.apache.commons.lang3.time.DateUtils;import java.math.BigDecimal;
import java.util.Calendar;
import java.util.Date;// 这个类不交给jpa管理我们自己维护
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){System.out.println("purchasebillitem"+purchasebillitem.getBill());this.id = purchasebillitem.getId();  // 赋值操作System.out.println("bill:"+purchasebillitem.getBill().getBuyer());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;// 前台传什么分组字段就使用什么分组字段分组  默认按照供应商分组  （equal放在字段的后面防止字段为null的情况）if(("o.bill.buyer.username").equals(groupBy)){this.groupField = this.buyer;}else if(("MONTH(o.bill.vdate)").equals(groupBy)){//取到月份  若是按照月份分组则月份加1  他们的月份从0开始（所以这里的月份就是要使用int类型若是使用string类型则类型转换异常很麻烦）int month  =   (DateUtils.toCalendar(vdate).get(Calendar.MONTH)+1);this.groupField = month+"月";}
}

purchasebillitemQuery 类高级查询

package cn.itsource.aisell.query;import cn.itsource.aisell.domain.Purchasebillitem;
import com.fasterxml.jackson.annotation.JsonFormat;
import com.github.wenhao.jpa.Specifications;
import org.apache.commons.lang3.time.DateUtils;
import org.springframework.data.jpa.domain.Specification;
import org.springframework.format.annotation.DateTimeFormat;import java.util.ArrayList;
import java.util.Date;
import java.util.List;// 视图模型查询  做报表的时候使用
public class PurchasebillitemQuery extends  BaseQuery {//自身条件  前台传这几个字段来后台通过字段进行分组查询private Date beginDate ;//开始时间private Date endDate;//结束时间private Integer status;//审核状态//分组字段 前台传过来的字段通过什么来分组private String groupBy;//前台参数的值private List params = new ArrayList<>();@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")// 设置格式什么格式public Date getBeginDate() {return beginDate;}// 注意此时返回json格式的时候只设置到了月份这一拦@DateTimeFormat(pattern = "yyyy-MM-dd")public void setBeginDate(Date beginDate) {this.beginDate = beginDate;}@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")public Date getEndDate() {return endDate;}@DateTimeFormat(pattern = "yyyy-MM-dd")public void setEndDate(Date endDate) {this.endDate = endDate;}public Integer getStatus() {return status;}public void setStatus(Integer status) {this.status = status;}public String getGroupBy() {return groupBy;}public void setGroupBy(String groupBy) {this.groupBy = groupBy;}public List getParams() {return params;}public void setParams(List params) {this.params = params;}@Overridepublic Specification createSpecification() {//处理结束时间Date tempDate=null;if(this.getEndDate() != null){//若是不为空则添加一天  月份是从0开始的老外只有到11月  addDays 追加日期的方法tempDate = DateUtils.addDays(this.getEndDate(), 1);}//ge 大于等 vdate>= beginDate and vdate< endDate+1  it小于  eq等于 自动发sql去根据条件查询Specification<Purchasebillitem> specification = Specifications.<Purchasebillitem>and()/*   开始时间查询的时间大于等于结束时间为000所以需要加一天但是必须小于否则将查询到不属于这个时间的数据*/ .ge(this.beginDate != null,"bill.vdate", this.getBeginDate()).lt(this.endDate!=null, "bill.vdate",tempDate).eq(this.status != null ,"bill.status",this.getStatus()).build();return specification;}// 动态拼接sql的方法（做图形报表的时候使用）public   String getWhereSql(){StringBuffer whereSql = new StringBuffer();// 判断开始的事件不等于空 并且不等于空字符串 动态拼接if(this.beginDate!=null && "".equals(this.beginDate)){whereSql.append("and").append("o.bill.vdate >=?");// 前台传过来的参数追加一个params.add(this.beginDate);}if(this.endDate!=null && "".equals(this.endDate)){Date tempDate=null;if(this.getEndDate() != null){tempDate = DateUtils.addDays(this.getEndDate(), 1);}whereSql.append("and").append(" o.bill.vdate < ?");params.add(tempDate);}if(this.status != null && !"".equals(this.status)){whereSql.append("and").append(" o.bill.status = ?");params.add(this.status);}return whereSql.toString().replaceFirst("and", "where");}}

再service层将数据封装好：

 //返回PurchasebillitemVo@Overridepublic 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());// 将封装好的数据 再次封装进去一个list集合里面返回到前台itemVos.add(purchasebillitemVo);}return itemVos;}

(2)写了方法 findItems

先查询出purchsebillitem

在构造出 PurchasebillitemVo对象

(3)返回前台 --表格里面就进行展示

//查询数据 /purchasebill/page//{total:111,rows:[{},{}]}@RequestMapping("/findItems")@ResponseBodypublic Map findItems(PurchasebillitemQuery purchasebillitemQuery){Map mp = new HashMap();List<PurchasebillitemVo> items = iPurchasebillitemService.findItems(purchasebillitemQuery);mp.put("total", items.size());mp.put("rows", items);//存进去map封装成这种格式return mp;}

前台：

(1) 准备一个页面purchasebillitem.jsp -->(查询工具栏分组的下拉)–》查询功能

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><%--引入头信息--%><%@include file="/WEB-INF/head.jsp" %><%--引入分组表格报表--%><script type="text/javascript" src="/easyui/plugin/groupview/datagrid-groupview.js"></script><%-- 组件 报表的框架  --%><script src="/highcharts/code/highcharts.js"></script><script src="/highcharts/code/highcharts-3d.js"></script><script src="/highcharts/code/modules/exporting.js"></script><script src="/highcharts/code/modules/export-data.js"></script>
<!--   引入js--><script type="text/javascript" src="/js/purchasebillitem.js"></script>
</head>
<body><%--easyui的时候，查看默认属性与事件$.fn.{plugin}.defaults弹出框html代码--%>
<div id="dlg" class="easyui-dialog" data-options="width:800,height:500,buttons:'#bb',closed:true"><form id="purchasebillForm" class="easyui-form" method="post" data-options=""><input type="hidden" id="purchasebillid" name="id" ><table cellpadding="5"><tr><td>交易时间:</td><td><input class="easyui-datebox" name="vdate" data-options="required:true"></input></td></tr><tr><td>供应商:</td><td><input class="easyui-combobox" name="supplier.id"data-options="valueField:'id',textField:'name',panelHeight:'auto',url:'/util/findAllSupplier'"></td></tr><tr><td>采购员:</td><td><input class="easyui-combobox" name="buyer.id"data-options="valueField:'id',textField:'username',url:'/util/getBuyer'"></td></tr></table><!-- 采购单明细的按钮准备 --><div id="itemBtns"><a href="javascript:;" id="btnInsert" class="easyui-linkbutton"data-options="iconCls:'icon-add',plain:true">添加</a><a href="javascript:;" id="btnRemove" class="easyui-linkbutton"data-options="iconCls:'icon-remove',plain:true">删除</a></div></form>
</div><%--查询工具栏    选择查询条件的三个框--%>
<div id="tb" style="padding:10px;height:auto"><div><div id="cc" class="easyui-calendar"></div><form id="searchForm" action="/purchaseBill/download" method="post">日期 ： <input name="beginDate" class="easyui-datebox" style="height:32px" sharedCalendar="#cc">- <input name="endDate" class="easyui-datebox" style="height:32px" sharedCalendar="#cc">状态 ：<select class="easyui-combobox" name="status"data-options="panelHeight:'auto'"><option value="">--请选择--</option><option value="0">待审</option><option value="-1">作废</option><option value="1">已审</option></select>分组类型 ：<select class="easyui-combobox" name="groupBy"data-options="panelHeight:'auto'" style="width:100px"><option value="o.bill.supplier.name">供应商</option><option value="o.bill.buyer.username">采购员</option><option value="MONTH(o.bill.vdate)">月份</option></select><a href="#" data-method="search"  class="easyui-linkbutton" iconCls="icon-search">查找</a><a href="#" data-method="charts2D"  class="easyui-linkbutton" iconCls="icon-search">2D图</a><a href="#" data-method="charts3D"  class="easyui-linkbutton" iconCls="icon-search">3D图</a></form></div></div><!-- 采购订单的表格-->
<table id="purchasebillitemGrid"></table>
<div id="purchaseBillItemDialog" class="easyui-dialog" data-options="closed:true,modal:true" title="功能操作" style="width:600px;height:300px; "></body>
</html>

(2) puchasebillitem.js 写了一个查询数据的方法已经

表格的初始化设置的方法


$(function () {//表格var purchasebillitemGrid = $("#purchasebillitemGrid");//给所有a标签都注册一个事件$("a").on("click", function () {//动态获取data-method属性对应的值var method = $(this).data("method");//method不能为空if(method){//动态触发事件itsource[method]();}});//编辑明细表格var purchasebillitemGrid = $('#purchasebillitemGrid');itsource = {//高级查询"search": function () {//把form表单元素，直接封装成一个json对象var jsonObj = $("#searchForm").serializeObject();//加载datagridpurchasebillitemGrid.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  是否启用3dalpha: 45,beta: 0  分别代表深度和倾斜度*/enabled: true,alpha: 45,beta: 0}},title: {// 抬头标题text: '我是不是你最疼爱的人'},tooltip: {//pointFormat 鼠标上移的时候展示的数据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: '总金额比例',data: result}]});});}}$('#purchasebillitemGrid').datagrid({title:'分组表格',fit:true,fixed:true,fitColumns:true,toolbar:'#tb',remoteSort:false,singleSelect:true,fitColumns:true,url:'/purchaseBillitem/findItems',columns:[[{field:'id',title:'编号',width:100},{field:'supplier',title:'供应商',width:100},{field:'buyer',title:'采购员',width:100},{field:'product',title:'产品',width:100},{field:'productType',title:'产品类型',width:100},{field:'vdate',title:'日期',width:100},{field:'num',title:'数量',width:100},{field:'price',title:'单价',width:100},{field:'amount',title:'小计',width:100},{field:'status',title:'状态',width:100,formatter:function (action) {var data = {0:"<div style='color:red;'>待审</div>",1:"<div style='color: green'>已审</div>","-1":"<div><s>作废</s></div>"};return data[action];}}]],groupField:'groupField',view: groupview,groupFormatter:function(value, rows){//总数据量var totalNum = 0;//总金额var totalAmount = 0;for(var i=0;i<rows.length;i++){var row = rows[i];totalNum += row.num;totalAmount += row.amount;}return value + ' - ' + rows.length + ' 条数据 '+ totalNum+' 件商品,总金额:'+totalAmount+"元";}});});

排除错误：打印法

百度法

2 图形报表

数据展示的形式，看到不爽，如果图形展示，看到要舒服

做图形报表的框架–echarts highcharts 只需要传递数据

flash – 兼容性不是很好容易崩溃 actionscript/javascript (flex)

html5 – canvas

不管是哪一个款报表，其实他的用法都差不多

思路：

(1)  下载

（2）引入

（3）看例子 --把我们需要的数据传递给组件 --它就会自动渲染图表

highcharts – 下载

2.1 有哪些图形表格

饼图

柱状图

线图…

任务今日通关目标

第一关：数据表格

（1）datagrid-groupview

步骤：

后台：(1)创建PurchasebillitemVo

(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写了方法查询数据

第二关：图形表格

（2）2D 3D饼图

核心–：拼接sql

 public List<Object[]> findCharts(PurchasebillitemQuery purchasebillitemQuery ){//拼接jpql的语句  where groupString 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;}

前台就拷贝完事儿了

报表的制作饼图的制作相关推荐

如何制作饼图？制作步骤有哪些？专业的饼图制作软件
同一种数据,往往有多种可视化呈现的方式.然而,在我们将数据可视化的过程中,却经常会被"惯性思维"所束缚.饼图常用于统计学模块,它是一个分区的特殊形状如饼的圆形图.但如今,饼图不仅仅 ...
mysql工作表格制作教程_Access制作复杂报表
何制作复杂报表利用excel输出复杂报表在读这篇文章以前首先要提醒大家,Access 本身的报表也具有很强的实用性和强大的功能,只有当你发掘了其本身全部的功能却仍不能满足你对报表的特殊要求时才请使用 ...
利用 Pyecharts 制作饼图
利用 Pyecharts 制作饼图: from pyecharts import options as opts from pyecharts.charts import Pie from rando ...
Excel制作饼图的法宝！Smartbi可视化工具图表制作
大家都知道,用Excel做饼图很简单,选取表格,插入饼图就完成了.可是饼图做地好不好看,还是有技巧的,今天,Smatrbi亮几招,大家就不用羡慕别人报告中的饼图漂亮又酷炫,我们自己也能够做出来. 如何 ...
怎么保存python制作的饼图_Scribus中的Python脚本：制作饼图
Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发. Scribus是一个强大的开源页面布局应用程序,它是由开源社区自2001年开发的程序.据项目网站可知,Sc ...
利用matplotlib制作饼图
利用matplotlib制作饼图: 绘制饼图: x : (每一块)的比例,如果sum(x)>1,会将多出的部分进行均分: explode: (每一块)离开中心距离 labels: (每一块)饼图 ...
python画饼图程序_Scribus中的Python脚本：制作饼图
Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发. Scribus是一个强大的开源页面布局应用程序,它是由开源社区自2001年开发的程序.据项目网站可知,Sc ...
索骥馆－OFFICE系列之《北风网Excel高端应用培训:多条件约束报表自动统计系统分析与制作》共4章更新完
内容介绍: 本课程主要想与大家分享对EXCEL用系统的观念去理解,灵活应用其提供的函数及新增功能.达到工作环境的自动化,本课程通过一个常用的案例来说明相关的用法. 在以后的课程中讲解如何获得动态的数据 ...
计算机动画制作实验要求,A074计算机动画制作实验——动画制作初步
计算机动画制作实验--动画制作初步计算机动画制作实验--动画制作初步设计者庞岩单位海南海口实验中学 e_mail technic88@http://doc.xuehai.net 案例名称计 ...

报表的制作饼图的制作

1 报表(理解)

1.1 报表是什么？

1.2 为什么要有报表，学来有什么用?–实际应用场景？

1.3 怎么去使用？

2 图形报表

2.1 有哪些图形表格

任务今日通关目标

报表的制作饼图的制作相关推荐

最新文章

热门文章

报表的制作 饼图的制作

1 报表(理解)

1.1 报表是什么？

1.2 为什么要有报表，学来有什么用?–实际应用场景？

1.3 怎么去使用？

2 图形报表

2.1 有哪些图形表格

任务 今日通关目标

报表的制作 饼图的制作相关推荐

最新文章

热门文章

报表的制作饼图的制作

任务今日通关目标

报表的制作饼图的制作相关推荐