Highcharts初使用
前提准备:
去官方下载相应资源
前端页面：
引入相应的js
<%--引入js--%> <script type="text/javascript" src="/static/js/purchasebillitemlist.js"></script> <script src="/easyui/plugin/Highcharts-6.2.0/code/highcharts.js"></script> <script src="/easyui/plugin/Highcharts-6.2.0/code/highcharts-3d.js"></script> <script src="/easyui/plugin/Highcharts-6.2.0/code/modules/exporting.js"></script> <script src="/easyui/plugin/Highcharts-6.2.0/code/modules/export-data.js"></script>
弹出div进行展示
<%--弹框--%>
<div id="dd" class="easyui-dialog" title="编辑" style="width:800px;height:400px;padding:10px;"
data-options="closed:true,resizable:false,draggable:true,modal:true,inline:true,buttons:'#bt'">
</div>
点击3D按钮弹出图表
"views3D":function () { views3DFrom.dialog("center").dialog("open"); //拿到查询表单的值 var fromData=searchForm.serializeObject(); //通过ajax拿值 $.post("/purchasebillitem/view",fromData,function (result) { Highcharts.chart('dd', { chart: { type: 'pie', options3d: { enabled: true, alpha: 45, beta: 0 } }, title: { text: '采购报表3D视图' }, 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 }] }); }) }
后台获取参数
修改query中的方法
public class PurchasebillitemQuery extends BaseQuery{ private Integer status; private Date beginDate; private Date endDate; //查询条件 private Integer groupField=0; //接收前台传来的查询条件 private List parmeter=new ArrayList(); @Override public Specification getSpecification() { Date resultDate = null; if (endDate!=null) { //结束时间加一天 resultDate = DateUtils.addDays(endDate,1); } Specification<Purchasebillitem> spec = Specifications.<Purchasebillitem>and() //比较前提条件，被对比的数据，前台传入的比较数据 .eq(status!=null,"billId.status", status) .ge(beginDate!=null,"billId.vdate", beginDate) .lt(endDate!=null,"billId.vdate", resultDate) .build(); return spec; } //对前台3D视图查询的处理 public String getJpql(){ //准备一个字符串 StringBuilder parmeterData =new StringBuilder(); if(status!=null){ parmeterData.append(" and o.billId.status = ? "); parmeter.add(status); }else if(beginDate!=null){ parmeterData.append(" and o.billId.vdate >= ? "); parmeter.add(beginDate); }else if(endDate!=null){ Date tempDate =DateUtils.addDays(endDate,1); parmeterData.append(" and o.billId.vdate <= ? "); parmeter.add(endDate); } String resultString = parmeterData.toString().replaceFirst("and", "where"); return resultString; } //拿到前台分组值 public String getGroupName(){ if(groupField==0){ return " o.billId.supplierId.name "; }else if(groupField==1){ return " o.billId.buyerId.username "; }else if(groupField==2){ return " MONTH(o.billId.vdate) "; }else { return " o.billId.supplierId.name "; } } public Integer getStatus() { return status; } public void setStatus(Integer status) { this.status = status; } public Date getBeginDate() { return beginDate; } //@DateTimeFormat：在SpringMVC中接收日期参数 @DateTimeFormat(pattern = "yyyy-MM-dd") public void setBeginDate(Date beginDate) { this.beginDate = beginDate; } public Date getEndDate() { return endDate; } @DateTimeFormat(pattern = "yyyy-MM-dd") public void setEndDate(Date endDate) { this.endDate = endDate; } public Integer getGroupField() { return groupField; } public void setGroupField(Integer groupField) { if(groupField==null||"".equals(groupField)){ groupField=0; } this.groupField = groupField; } public void setParmeter(List parmeter) { this.parmeter = parmeter; } public List getParmeter() { return parmeter; } }
PurchasebillitemServiceImpl(service层)
@Service public class PurchasebillitemServiceImpl extends BaseServiceImpl<Purchasebillitem,Long> implements IPurchasebillitemService { @Autowired private PurchasebillitemRepository purchasebillitemRepository; @Override public List<PurchasebillitemVO> purchasebillitemVOlist(PurchasebillitemQuery query) { //兼容前台查询 List<Purchasebillitem> items = purchasebillitemRepository.findByQuery(query); //准备vo数据容器 List<PurchasebillitemVO> itemsVO = new ArrayList<>(); //拿到所有数据后，用vo进行数据封装 for (Purchasebillitem item:items){ //将数据逐个封装 PurchasebillitemVO itemVO = new PurchasebillitemVO(item,query); //将每个数据放入vo数据容器 itemsVO.add(itemVO); } return itemsVO; } //3D视图 @Override public List<Map> getViewData(PurchasebillitemQuery query) { //准备返回的数据 List<Map> mapList = new ArrayList<>(); //拿到分组的值 String groupName = query.getGroupName(); //查询的jpql String queryJpql = query.getJpql(); //准备查询数据库的jpql String jpql="select "+groupName+",sum(o.amount) from Purchasebillitem o "+queryJpql+" group by "+groupName+""; String dateJpql="select "+groupName+";||月"+",sum(o.amount) from Purchasebillitem o "+queryJpql+" group by "+groupName+""; System.out.println(dateJpql); //拿到前台传来的查询条件 List parmeter = query.getParmeter(); //如果是月份查询 if(query.getGroupField()==2){ //执行这条jpql List<Object[]> byJpql = super.findByJpql(dateJpql, parmeter.toArray()); //将查询到的数据遍历取出依次放入Mpa for (Object[] obj:byJpql){ HashMap<Object, Object> map = new HashMap<>(); map.put("name",obj[0]); map.put("y",obj[1]); mapList.add(map); } return mapList; } //运行这条jpql List<Object[]> byJpql = super.findByJpql(jpql, parmeter.toArray()); //将查询到的数据遍历取出依次放入Mpa for (Object[] obj:byJpql){ HashMap<Object, Object> map = new HashMap<>(); map.put("name",obj[0]); map.put("y",obj[1]); mapList.add(map); } return mapList; } }
