用echarts生成甘特图
1.首先加入echarts中甘特图js
2.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Teamwork</title>
<link rel="stylesheet" href="${base}/static/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="${base}/static/css/user.css" media="all" />
</head>
<body >
<div class="layui-col-md6">
<div id="container" style="height: 700px;width: 100%" ></div>
</div>
<script type="text/javascript" src="${base}/static/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/static/echarts/echarts.gantt.js"></script>
<script>
var symbolSize = 20;
var myCharts = echarts.init(document.getElementById('container'));
var option = {
legend: {
y: 'bottom',
data: ['计划时间'] //修改的地方1
},
grid: {
containLabel: true,
left: 20
},
xAxis: {
type: 'time',
axisLabel: {
formatter: function(params) {
var date = new Date();
date.setTime(params);
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes();
}
}
},
yAxis: {
data:{}
},
tooltip: {
trigger: 'axis',
formatter: function(params) {
var res = params[0].name + "</br>"
var date0 = params[0].data;
var date1 = params[1].data;
// date0 = date0.getFullYear() + "-" + (date0.getMonth() + 1) + "-" + date0.getDate() + " " + date0.getHours() + ":" + date0.getMinutes();
//date1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate() + " " + date1.getHours() + ":" + date1.getMinutes();
res += params[0].seriesName + "~" + params[1].seriesName + ":</br>" + date0 + "~" + date1 + "</br>"
console.log(params[0]);
return res;
}
},
series: {}
};
var poId=${poId};
// 异步加载数据
$.get("/pm/po/getNum?po_id="+poId).done(function (data) {
// 填入数据
myCharts.setOption({
yAxis: {
data: data
}
});
});
$.get("/pm/po/getdata?po_id="+poId).done(function (data) {
// 填入数据
myCharts.setOption({
series: [
{
name: '计划开始时间',
type: 'bar',
stack: 'test1',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)'
}
},
symbolSize: symbolSize,
data: data[0].starTimeList
},
{
name: '计划时间',
type: 'bar',
stack: 'test1',
//修改地方2
itemStyle: {
normal: {
color: '#F98563'
}
},
symbolSize: symbolSize,
data: data[0].endTimeList
}
]
});
});
myCharts.setOption(option);
</script>
</body>
</html>3.Java代码
/**
* eacharts y轴的值
* @param servletRequest
* @param response
* @return
*/
@GetMapping("/pm/po/getNum")
@ResponseBody
public JSONArray getNum(HttpServletRequest servletRequest, HttpServletResponse response) {
response.setContentType("text/html; charset=utf-8");
List<Map<String, Object>> list = null;
try {
String poId = servletRequest.getParameter("po_id");
// String poId = "194";
Map<String, Object> paramMap = Maps.newHashMap();
paramMap.put("status", 1);
paramMap.put("companyId", getCurrentCompany().getCompanyId());
//获取工序名称
ResponseEntity<ModelMap> modelMap = (ResponseEntity<ModelMap>) pmProcAllList(paramMap, new ModelMap());
List procAllList= (List) ((Map)modelMap.getBody().get("data")).get("list");
paramMap.put("poId", poId);
paramMap.put("relationType", Constants.fileImgRelationType.PM_PROD_ORDER_SUB);
list = this.camelToUnderline(BeanToMapUtil.convertBeanList(pmProdOrderService.getPmProdOrderSubId(paramMap)));
if (list != null && list.size() > 0) {
Map<String, Object> assMap = Maps.newHashMap();
for (Map<String, Object> item : list) {
item.put("plan_start_time", item.get("plan_start_time") == null ? null : item.get("plan_start_time").toString().substring(0, 16));
item.put("plan_end_time", item.get("plan_end_time") == null ? null : item.get("plan_end_time").toString().substring(0, 16));
assMap.put("relationId", item.get("id"));
assMap.put("relation_type", Constants.assProcessType.PC_REQUIRE_PLAN);
assMap.put("companyId", getCurrentCompany().getCompanyId());
assMap.put("assRelationType",Constants.fileEnclosureRelationType.PM_ASS_PROCESS);
item.put("assSub", this.camelToUnderline(BeanToMapUtil.convertBean(pmAssProcessService.getByTypeIdAndType(assMap))));
}
}
} catch (IntrospectionException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
List yList=new ArrayList();
if(list!=null){
for(int i=0;i<list.size();i++){
yList.add(list.get(i).get("proc_name"));
}
}
JSONArray jsonArray = JSONArray.fromObject( yList );//转化成json对象
return jsonArray;
}
/**
* 获取x轴参数
* @param servletRequest
* @param response
* @return
*/
@GetMapping("/pm/po/getdata")
@ResponseBody
public JSONArray getdata(HttpServletRequest servletRequest, HttpServletResponse response) {
response.setContentType("text/html; charset=utf-8");
List<Map<String, Object>> list = null;
try {
String poId = servletRequest.getParameter("po_id");
Map<String, Object> paramMap = Maps.newHashMap();
paramMap.put("status", 1);
paramMap.put("companyId", getCurrentCompany().getCompanyId());
//获取工序名称
ResponseEntity<ModelMap> modelMap = (ResponseEntity<ModelMap>) pmProcAllList(paramMap, new ModelMap());
List procAllList= (List) ((Map)modelMap.getBody().get("data")).get("list");
paramMap.put("poId", poId);
paramMap.put("relationType", Constants.fileImgRelationType.PM_PROD_ORDER_SUB);
list = this.camelToUnderline(BeanToMapUtil.convertBeanList(pmProdOrderService.getPmProdOrderSubId(paramMap)));
if (list != null && list.size() > 0) {
Map<String, Object> assMap = Maps.newHashMap();
for (Map<String, Object> item : list) {
item.put("plan_start_time", item.get("plan_start_time") == null ? null : item.get("plan_start_time").toString().substring(0, 16));
item.put("plan_end_time", item.get("plan_end_time") == null ? null : item.get("plan_end_time").toString().substring(0, 16));
assMap.put("relationId", item.get("id"));
assMap.put("relation_type", Constants.assProcessType.PC_REQUIRE_PLAN);
assMap.put("companyId", getCurrentCompany().getCompanyId());
assMap.put("assRelationType",Constants.fileEnclosureRelationType.PM_ASS_PROCESS);
item.put("assSub", this.camelToUnderline(BeanToMapUtil.convertBean(pmAssProcessService.getByTypeIdAndType(assMap))));
}
}
} catch (IntrospectionException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
List starTimeList=new ArrayList();
List endTimeList=new ArrayList();
if(list!=null){
for(int i=0;i<list.size();i++){
starTimeList.add(list.get(i).get("plan_start_time"));
}
for(int i=0;i<list.size();i++){
endTimeList.add( list.get(i).get("plan_end_time"));
}
}
Map timeMap=new HashMap();
timeMap.put("starTimeList",starTimeList);
timeMap.put("endTimeList",endTimeList);
JSONArray jsonArray = JSONArray.fromObject(timeMap);//转化成json对象
return jsonArray;
}4.生成结果
