1、效果
- 采购报表使用DataGrid GroupView制作,重点是返回json格式的设置
- 图表使用Highcharts制作
2、前台代码
2.1、jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/WEB-INF/views/head.jsp" %>
<html>
<head>
<title>Title</title>
<%--引入EasyUI的datagrid-groupview扩展--%>
<script type="text/javascript" src="/easyui/plugins/datagrid-groupview.js"></script>
<%--引入Highcharts支持的JS文件--%>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/cylinder.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/themes/sand-signika.js"></script>
<%--引入当前页面对应的js文件--%>
<script src="/js/model/purchasebillitem.js"></script>
</head>
<body>
<table id="purchasebillitemGrid">
</table>
<%--grid顶部工具栏--%>
<div id="gridTools" style="padding:5px;height:auto">
<%--查询条--%>
<form id="searchForm">
日期: <input name="beginDate" class="easyui-datebox" style="width:150px">
- <input name="endDate" class="easyui-datebox" style="width:150px">
状态: <select class="easyui-combobox" name="status" panelHeight="auto" style="width:100px;">
<option value="">--所有--</option>
<option value="0">待审</option>
<option value="1">已审</option>
<option value="-1">作废</option>
</select>
分组:<select class="easyui-combobox" name="groupBy" panelHeight="auto" style="width:100px;">
<option value="">--所有--</option>
<option value="0">供应商</option>
<option value="1">采购员</option>
<option value="2">月份</option>
</select>
<a href="#" data-method="search" class="easyui-linkbutton" iconCls="icon-search">查询</a>
<span style="color: darkblue;font-size: 16px">  图表:</span>
<a href="#" data-method="chart3d" class="easyui-linkbutton" iconCls="icon-3dpie">3D饼图</a>
<a href="#" data-method="chart2d" class="easyui-linkbutton" iconCls="icon-2dpie">2D饼图</a>
<a href="#" data-method="chartZhu3d" class="easyui-linkbutton" iconCls="icon-3dbar">3D柱状图</a>
<a href="#" data-method="chartZhu2d" class="easyui-linkbutton" iconCls="icon-2dbar">2D柱状图</a>
</form>
</div>
<%--饼状图--%>
<div id="chartDialog" class="easyui-dialog" title="采购订单明细" style="width:800px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true">
<div id