建立一个由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>