echarts實現甘特圖
阿新 • • 發佈：2018-12-15
用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.生成結果
