1. 程式人生 > >echarts實現甘特圖

echarts實現甘特圖

用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.生成結果