Day74 Java框架 SSH案例_ERP(八)_ 按类型销售饼状图_按年份销售趋势图

销售统计 

一.需求及实现思路

1. .统计各类别商品的销售额
   
2. 实现思路
   技术：运用关联查询、聚合统计。
   关键是SQL编写。
   找出涉及的表有哪些？
   ⦁    报表数据存在哪个表里？
   ⦁    数据存在的表之间的中间表
   ⦁    查询条件所在的表
   ⦁    关联查询条件所在的表 和 数据所在的表之间 的中间表
   销售额来源：订单明细表
   商品类别：  商品类别表
   关联用的表：商品表
   条件类型为销售订单： 订单表
3. 查询语句编写
   1. 先将这4个表关联起来查询
      
   2. 增加订单类型为2的条件，即销售订单
      
   3. 按商品类型名称分组，并统计销售总额
      

二.后端代码实现

1. 创建IReportDao和ReportDao
   

   注意关联部分和原生 SQL 不同之处。
   ⦁    from 后跟的是类名 （大写开头）
   ⦁    如果两个实体进行了一对多关联，关联的写法与 sql 不同
   多的一方.一的一方属性 = 一的一方的别名
   ⦁    特别注意： 当我们的语句比较长，每换行后需要加空格

2. 创建 IReportBiz 和 ReportBiz
   
   
3. 创建 ReportAction
   注入属性
   
   
   
4. 编写配置文件
5. 测试结果:
   -1- 访问
   
   -2- 结果是一种复合类型数组,这种数据easyui的datagrid是无法加载的。
   
6. 将查询结果封装成map数据
   我们可以使用投影查询来封装我们的查询结果：
   修改 ReportDao 类中 OrderReport 方法
   
   运行结果如下:
   
7. 修改ReportDao的OrderReport方法，支持日期区间查询

    

三.前端代码实现

1. 在js目录下创建report.js
   
2. 创建report_order.html

    

图表工具入门

一.JFreeChart

JFreeChart是JAVA平台上的一个开放的图表绘制类库。它完全使用JAVA语言编写，是为applications, applets, servlets 以及JSP等使用所设计。JFreeChart可生成饼图（pie charts）、柱状图（bar charts）、散点图（scatter plots）、时序图（time series）、甘特图（Gantt charts）等等多种图表，并且可以产生PNG和JPEG格式的输出，还可以与PDF和EXCEL关联。

1. 入门案例
   在 D 盘根目录生成饼图图片 chart.png
   1. .创建JfreeChartDemo工程
   2. 引入坐标
      
   3. 创建demo类
2. 编写代码
   

二.HighCharts

Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
HighCharts  界面美观，由于使用JavaScript编写，所以不需要像Flash和Java那样需要插件才可以运行，而且运行速度快。另外HighCharts还有很好的兼容性，能够完美支持当前大多数浏览器
我们的ERP项目就采用HighCharts

1. 引入JS文件就行

销售统计图(饼图)

一.需求

1. 将销售统计表的结果，以饼图的形式展现
   

二.代码实现

1. 将highchars.js 拷贝到ui文件夹，并在页面 report_order.html 中引入highchars.js
   
2. 修改页面report_order.html
   
3. 修改 report.js,添加 showChart()函数
   1. ⦁    chart ：图表基本属性
      a) plotBackgroundColor 区域背景颜色
      b) plotBorderWidth 区域边框宽度
      c) plotShadow 区域阴影
      d) type 图表类型
   2. ⦁    title ：图表标题
      a) text 标题文本
   3. ⦁    tooltip ：工具提示
      a) pointFormat 工具提示显示格式
   4. ⦁    plotOptions：区域选项
      a) allowPointSelect 点击区域后选择
      b) cursor 光标类型
      c) dataLabels 数据标签
      d) showInLegend 是否显示图例
   5. ⦁    series： 数据组
      a) name 名称
      b) colorByPoint 点的颜色
      c) data 数据
4. 修改report.js，给grid表格添加onLoadSuccess事件

    

销售趋势分析(报表)

一.需求

1. 选择年份点击查询，可以看到所选择年份的各个月份的销售额的统计数据

二.后端实现

1. 给IReportDao添加方法
   
   给ReportDao添加方法
   
2. 编写Action代码

   

三.前端实现

1. 添加report_trend.js
   
2. 在webapp下创建json目录，并创建year.json文件
   
3. 添加report_trend.html

   

销售趋势分析(折线图)

一.需求

1. 在上边销售趋势分析数据的基础上，显示折线图

    

二.代码实现

1. 修改report_trend.html
   
2. 修改report_trend.js
   1. 添加showChart方法

      /**
       * 画销售趋势图
       */
      function showChart(){
          var monthData = new Array();
          for(var i = 1; i <=12; i++){
              monthData.push(i+"月");
          }
          $('#trendChart').highcharts({
              title: {
                  text: $('#year').combobox('getValue') + '年销售趋势分析',
                  x: -20 //center
              },
              subtitle: {
                  text: 'Source: www.itcast.com',
                  x: -20
              },
              xAxis: {
                  categories: monthData
              },
              yAxis: {
                  title: {
                      text: '销售额（元）'
                  },
                  plotLines: [{
                      value: 0,
                      width: 1,
                      color: '#808080'
                  }]
              },
              tooltip: {
                  valueSuffix: '元'
              },
              legend: {
                  layout: 'vertical',
                  align: 'center',
                  verticalAlign: 'bottom',
                  borderWidth: 0
              },
              series: [{name:'全部商品',data:$('#grid').datagrid('getRows')}]
          });
      }

   2. 当grid加载成功后调用showChart方法展示趋势图