java+echarts报表显示

最新推荐文章于 2024-03-01 02:23:18 发布
zhy1da
最新推荐文章于 2024-03-01 02:23:18 发布
阅读量5.6k
点赞数
文章标签： echarts
本文链接：https://blog.csdn.net/zhy1da/article/details/79281947
版权
建立一个由X轴名字和4个柱子数组的实体bean
分别取出 X轴，和4个柱子中的数据，把数据放在bean里在put进HashMap里面，最后再从map里面把值存放进数组里，最终生成前端需要的5个数组，X轴名字，待采购....
效果图
详细代码：
java：

controller

 /**
 * 进入页面
 * */

 @RequestMapping("/bdOrderStatusReport")
public ModelAndView bdOrderStatusReport(){
ModelAndView mView = new ModelAndView();
Map<String, Object> reportMap = new HashMap<String, Object>();
try {
reportMap=bdReportService.quertBDOrderStatusReport(new BDReport());
} catch (ParseException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
mView.addObject("arrayBD", reportMap.get("arrayBD"));
mView.addObject("arrayToPurchase", reportMap.get("arrayToPurchase"));
mView.addObject("arrayToBillingStart", reportMap.get("arrayToBillingStart"));
mView.addObject("arrayToPurchase30", reportMap.get("arrayToPurchase30"));
mView.addObject("arrayToBillingStart30", reportMap.get("arrayToBillingStart30"));



mView.setViewName("cloud/bdreport/bdOrderStatusReport");

return mView;
}

/**
* 搜索
* */
@RequestMapping("/loadBDOrderStatusReport")
@ResponseBody()
public Map<String,Object> loadBDOrderStatusReportData(HttpServletRequest request,String startTime,String endTime){

Map<String,Object> resultMap = new HashMap<String, Object>(); 
BDReport bdReport = new BDReport();
bdReport.setStartTime(startTime);
bdReport.setEndTime(endTime);
try {
resultMap=bdReportService.quertBDOrderStatusReport(bdReport);
} catch (ParseException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return resultMap;

}

service:

 public Map<String, Object> quertBDOrderStatusReport(BDReport bdReportInfo){
Map<String,Object> resultMap = new HashMap<String, Object>(); 
Map<String, OrderStatusReportBean> reportMap = new HashMap<String, OrderStatusReportBean>();
String startTime = bdReportInfo.getStartTime();
String endTime = bdReportInfo.getEndTime();

List<Dict> reportUser = dictService.findBDReportUser();
int size = reportUser.size();
for (int i = 0; i < size; i++) {
//bd[i]=reportUser.get(i).getDictName();
OrderStatusReportBean bean = new OrderStatusReportBean();
bean.setBdName(reportUser.get(i).getDictValue());
bean.setBdValue(reportUser.get(i).getDictName());
reportMap.put(reportUser.get(i).getDictValue(), bean);
}
SimpleDateFormat formatterMonth = new SimpleDateFormat("yyyy-MM");
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
if (startTime == null || startTime == ""||"undefined".equals(startTime)){
startTime = "";
}else{
startTime = startTime + "-01";
}

if (endTime == null || endTime == ""||"undefined".equals(endTime)){
endTime = "";//如果为空 取开始日期
}else{
endTime = DateUtil.getLastDayOfMonth(endTime);
}

BDReport bdReport = new BDReport();
bdReport.setStartTime(startTime);
bdReport.setEndTime(endTime);
List<BDReport> findAllOrderNum = this.findAllOrderNum(bdReport);
List<BDReport> findOrderNum = this.findOrderNum(bdReport);
for (int i = 0; i < findAllOrderNum.size(); i++) {


String bdName = findAllOrderNum.get(i).getBd();
String orderStatus = findAllOrderNum.get(i).getOrderStatus();
//toPurchase
Integer thisNumber = findAllOrderNum.get(i).getNum();


if (thisNumber == null) {


thisNumber = 0;
}


OrderStatusReportBean thisBean = reportMap.get(bdName);
if (thisBean == null || thisBean.getBdName() == null || thisBean.getBdName().isEmpty()) {


thisBean = new OrderStatusReportBean();
thisBean.setBdName(bdName);
}


if ("ToPurchase".equals(orderStatus)) {


thisBean.setPurchaseNumber(thisNumber);


} else if ("ToBillingStart".equals(orderStatus)) {


thisBean.setToBillingNumber(thisNumber);
}


reportMap.put(bdName, thisBean);


}
for (int i = 0; i < findOrderNum.size(); i++) {


String bdName = findOrderNum.get(i).getBd();
String orderStatus = findOrderNum.get(i).getOrderStatus();
//toPurchase
Integer thisNumber = findOrderNum.get(i).getNum();


if (thisNumber == null) {


thisNumber = 0;
}


OrderStatusReportBean thisBean = reportMap.get(bdName);
if (thisBean == null || thisBean.getBdName() == null || thisBean.getBdName().isEmpty()) {


thisBean = new OrderStatusReportBean();
thisBean.setBdName(bdName);
}


if ("ToPurchase".equals(orderStatus)) {


thisBean.setPurchase30Number(thisNumber);


} else if ("ToBillingStart".equals(orderStatus)) {


thisBean.setToBilling30Number(thisNumber);
}


reportMap.put(bdName, thisBean);


}
//遍历map中的值 
int i = 0;
String[] bd = new String[reportMap.size()];//bd
int[] toPurchase = new int[reportMap.size()];//待采购数量
int[] toBillingStart = new int[reportMap.size()];//待起租数量
int[] toPurchase30 = new int[reportMap.size()];//从设置订单状态为待采购到当前时间为止超过1个月的订单
int[] toBillingStart30 = new int[reportMap.size()];//从设置订单状态为待起租到当前时间为止超过1个月的订单
for (OrderStatusReportBean bean : reportMap.values()) {


bd[i] = bean.getBdValue();
toPurchase[i] = bean.getPurchaseNumber() == null ? 0 : bean.getPurchaseNumber();
toBillingStart[i] = bean.getToBillingNumber() == null ? 0 : bean.getToBillingNumber();
toPurchase30[i] = bean.getPurchase30Number() == null ? 0 : bean.getPurchase30Number();
toBillingStart30[i] = bean.getToBilling30Number() == null ? 0 : bean.getToBilling30Number();


i++;


}
JSONArray jsonArray = new JSONArray();
JSONArray arrayBD = jsonArray.fromObject(bd);
JSONArray arrayToPurchase = jsonArray.fromObject(toPurchase);
JSONArray arrayToBillingStart = jsonArray.fromObject(toBillingStart);
JSONArray arrayToPurchase30 = jsonArray.fromObject(toPurchase30);
JSONArray arrayToBillingStart30 = jsonArray.fromObject(toBillingStart30);
resultMap.put("arrayBD", arrayBD);
resultMap.put("arrayToPurchase", arrayToPurchase);
resultMap.put("arrayToBillingStart", arrayToBillingStart);
resultMap.put("arrayToPurchase30", arrayToPurchase30);
resultMap.put("arrayToBillingStart30", arrayToBillingStart30);

return resultMap;
}

bean:

public class OrderStatusReportBean extends BasePageBean{

private static final long serialVersionUID = 1L;

private String bdName;
private String bdValue;
private Integer purchaseNumber;
private Integer purchase30Number;
private Integer toBillingNumber;
private Integer toBilling30Number;

}

前端

<div id="container" style="height: 100%"></div>  
    <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例    
    function loadCharts() {
    var startT = $("#startMoon").val();
    var endT = $("#endMoon").val();
var url = "${ctx }/cloud/bdReport/loadBDOrderStatusReport?startTime="+startT+"&&endTime="+endT;
//图表容器div
var elem = "container";
$("#" + elem).show();
//自定义加载图表函数   echartsConfig.js
initContainer(url, elem);
}
    
    function initContainer(url, elem) {
    
    var dom = document.getElementById("container");  
        var myChart = echarts.init(dom);  
        var app = {};  
        option = null;  
        var keyList = eval('${arrayBD}'); 
    
    var arrayBD = []; 
    for(var i=0;i<keyList.length;i++){ 
    arrayBD.push(keyList[i]); 
    }
    
    var posList = [
                       'left', 'right', 'top', 'bottom',
                       'inside',
                       'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
                       'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
                   ];


                   app.configParameters = {
                       rotate: {
                           min: -90,
                           max: 90
                       },
                       align: {
                           options: {
                               left: 'left',
                               center: 'center',
                               right: 'right'
                           }
                       },
                       verticalAlign: {
                           options: {
                               top: 'top',
                               middle: 'middle',
                               bottom: 'bottom'
                           }
                       },
                       position: {
                           options: echarts.util.reduce(posList, function (map, pos) {
                               map[pos] = pos;
                               return map;
                           }, {})
                       },
                       distance: {
                           min: 0,
                           max: 100
                       }
                   };


                   app.config = {
                       rotate: 90,
                       align: 'left',
                       verticalAlign: 'middle',
                       position: 'insideBottom',
                       distance: 15,
                       onChange: function () {
                           var labelOption = {
                               normal: {
                                   rotate: app.config.rotate,
                                   align: app.config.align,
                                   verticalAlign: app.config.verticalAlign,
                                   position: app.config.position,
                                   distance: app.config.distance
                               }
                           };
                           myChart.setOption({
                               series: [{
                                   label: labelOption
                               }, {
                                   label: labelOption
                               }, {
                                   label: labelOption
                               }, {
                                   label: labelOption
                               }]
                           });
                       }
                   };




                   var labelOption = {
                       normal: {
                           show: true,
                           position: app.config.position,
                           distance: app.config.distance,
                           align: app.config.align,
                           verticalAlign: app.config.verticalAlign,
                           rotate: app.config.rotate,
                           formatter: '{c}  {name|{a}}',
                           fontSize: 16,
                           rich: {
                               name: {
                                   textBorderColor: '#fff'
                               }
                           }
                       }
                   };
                   
    var arrayToPurchase = []; 
    var arrayToBillingStart = []; 
    var arrayToPurchase30 = []; 
    var arrayToBillingStart30 = []; 
    
    //获取数据
    $.post(url, null, function (response) {
    arrayToPurchase = response.arrayToPurchase;
    arrayToBillingStart = response.arrayToBillingStart;
    arrayToPurchase30 = response.arrayToPurchase30;
    arrayToBillingStart30 = response.arrayToBillingStart30;
    
                       option = {
                           color: ['#FF7F50', '#BDB76B', '#4682B4', '#556B2F'],
                           tooltip: {
                               trigger: 'axis',
                               axisPointer: {
                                   type: 'shadow'
                               }
                           },
                           legend: {
                               data: ['待采购', '待采购超一个月', '待起租', '待起租超一个月'],
                               bottom: 0  
                           },
                           toolbox: {
                               show: true,
                               orient: 'vertical',
                               left: 'right',
                               top: 'center',
                               feature: {
                                   mark: {show: false},
                                   dataView: {show: false, readOnly: false},
                                   magicType: {show: false, type: ['line', 'bar', 'stack', 'tiled']},
                                   restore: {show: false},
                                   saveAsImage: {show: false}
                               }
                           },
                           calculable: true,
                           xAxis: [
                               {
                                   type: 'category',
                                   axisTick: {show: false},
                                   data: arrayBD
                               }
                           ],
                           yAxis: [
                               {
                                   type: 'value'
                               }
                           ],
                           series: [
                               {
                                   name: '待采购',
                                   type: 'bar',
                                   barGap: 0,
                                   label: labelOption,
                                   data: arrayToPurchase
                               },
                               {
                                   name: '待采购超一个月',
                                   type: 'bar',
                                   label: labelOption,
                                   data: arrayToPurchase30
                               },
                               {
                                   name: '待起租',
                                   type: 'bar',
                                   label: labelOption,
                                   data: arrayToBillingStart
                               },
                               {
                                   name: '待起租超一个月',
                                   type: 'bar',
                                   label: labelOption,
                                   data: arrayToBillingStart30
                               }
                           ]
                       };
                       if (option && typeof option === "object") {  
                           myChart.setOption(option, true);  
                       } 
    
    });
    }
 
    </script>