甘特图

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<div id="charts_div" style="height: 500px;"></div>
<script type="text/javascript" src="sta/js/json2.js"></script>
<script src="sta/js/echarts-2.2.7/build/dist/echarts-all.js"></script>
<script src="sta/js/echarts-2.2.7/build/dist/echarts.js"></script>
<script src="sta/js/echarts-2.2.7/src/chart/bar.js"></script>
<script type="text/javascript">
    require.config({
              paths: {
                  echarts: 'dist'
              }
     });
      var globalmin = null,totalCategory = 0,category=[],planData=[],planBase=[],actualData=[],actualBase=[],legend=[];
      var json = {
             "currStageList": [
              "初步验收", 
              "试运行"
             ], 
                "stageList": []
            }
      var factBeginTimeTest = new Date('${exeInfo.factBeginTimeTest}').format('yyyy-MM-dd');
      var zhijian = {
            "name": "质检",
            "planBeginDate": factBeginTimeTest,
            "planEndDate": new Date('${exeInfo.planTimeTest}').format('yyyy-MM-dd'),
            "endDate": new Date('${exeInfo.factEndTimeTest}').format('yyyy-MM-dd'),
            "beginDate": factBeginTimeTest
        }
    if (factBeginTimeTest != 'NaN-aN-aN') {
        json.stageList.push(zhijian);
    }
      var factBeginTimeMc = new Date('${exeInfo.factBeginTimeMc}').format('yyyy-MM-dd');
      var zhizao = {
            "name": "制造",
            "planBeginDate": factBeginTimeMc,
            "planEndDate": new Date('${exeInfo.planTimeMc}').format('yyyy-MM-dd'),
            "endDate": new Date('${exeInfo.factEndTimeMc}').format('yyyy-MM-dd'),
            "beginDate": factBeginTimeMc
        }
    if (factBeginTimeMc != 'NaN-aN-aN') {
        json.stageList.push(zhizao);
    }
    var factBeginTimePc = new Date('${exeInfo.factBeginTimePc}').format('yyyy-MM-dd');
    var caigou = {
            "name": "采购",
            "planBeginDate": factBeginTimePc,
            "planEndDate": new Date('${exeInfo.planTimePc}').format('yyyy-MM-dd'),
            "endDate": new Date('${exeInfo.factEndTimePc}').format('yyyy-MM-dd'),
            "beginDate": factBeginTimePc
        }
    if (factBeginTimePc != 'NaN-aN-aN') {
        json.stageList.push(caigou);
    }
    var factBeginTimeEc = new Date('${exeInfo.factBeginTimeEc}').format('yyyy-MM-dd');
    var sheji = {
            "name": "设计",
            "planBeginDate": factBeginTimeEc,//计划开始
            "planEndDate": new Date('${exeInfo.planTimeEc}').format('yyyy-MM-dd'),//计划结束模拟数据
            "endDate": new Date('${exeInfo.factEndTimeEc}').format('yyyy-MM-dd'),//实际结束时间
            "beginDate": factBeginTimeEc//实际开始时间
        }
    if (factBeginTimeEc != 'NaN-aN-aN') {
        json.stageList.push(sheji);
    }
    $(function(){
        if(json && json.stageList){
            totalCategory = json.stageList.length;
            var minPlan = null, minActual = null, max = null;
            for(var i=(totalCategory-1);i>=0;i--){
                var planStart = json.stageList[i].planBeginDate;
                var actualStart = json.stageList[i].beginDate;
                if(i==(json.stageList.length-1)){
                    var dateTT = new Date();
                    var dstr = dateTT.getFullYear()+"-"+(dateTT.getMonth()+1)+"-"+dateTT.getDate()
                    minPlan = planStart || dstr;
                    minActual = actualStart || dstr;
                    max = planStart;
                }
                if(GetDateDiff(max,json.stageList[i].planEndDate)<0){
                     max = json.stageList[i].planEndDate;
                }
                if(GetDateDiff(max,json.stageList[i].endDate)<0){
                     max = json.stageList[i].endDate;
                }
                if(GetDateDiff(minPlan,planStart)>0){
                     minPlan = planStart;
                }
                if(GetDateDiff(minActual,actualStart)>0){
                     minActual = actualStart;
                }
            }
              
            var min = null;
            if(GetDateDiff(minPlan,minActual)>=0){
                 min = minActual;
            }else{
                 min = minPlan;
            }
            globalmin = min;
            for(var i=(totalCategory-1);i>=0;i--){
                var planStart = json.stageList[i].planBeginDate;
                var planEnd = json.stageList[i].planEndDate;
                var actualStart = json.stageList[i].beginDate;
                var actualEnd = json.stageList[i].endDate;
                
                category.push(json.stageList[i].name);
                planBase.push(GetDateDiff(planStart,globalmin));
                var pd = {};
                pd.value = GetDateDiff(actualEnd,actualStart);
                pd.color = '#FF0000';
                var currentStage = json.currStageList;
                var sName = json.stageList[i].name;
                if(currentStage && $.inArray(sName, currentStage)>-1){
                 pd.color = '#FFFF00';
                }
                planData.push(GetDateDiff(planEnd,planStart));
                actualBase.push(GetDateDiff(actualStart,globalmin));
                actualData.push(pd);
            }
            for(var i=0; i<= GetDateDiff(max,min); i++){
                var dt = dateAfter(min,i);
                legend.push(dt);
            }
            init();
        }
    });
    function init(){   
        require(
               [
                   'echarts',
                   'echarts/chart/bar'
               ],
        function (ec) {
        var myChart = ec.init(document.getElementById('charts_div'));
           var option = {
               title: {
                    text: '项目实施进度表',
                    x: "center",
                    top: '20'
                },
                legend: {
                    y: 'bottom',
                    data: ['计划时间', '实际时间']
                },
               tooltip : {
                   trigger: 'axis',
                   axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                       type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                   },
                   formatter: function (params) {
                           var tar0 = params[0];
                           var tar1 = params[1];
                        var tar2 = params[2];
                        var tar3 = params[3];
                        var tar2Value = dateAfter(globalmin,tar2.value-0) != 'NaN-NaN-NaN' ? dateAfter(globalmin,tar2.value-0) : '待定';
                        var tar3Value = dateAfter(globalmin,tar2.value+tar3.value) != 'NaN-NaN-NaN' ? dateAfter(globalmin,tar2.value+tar3.value) : '待定';
                        var tar0Value = dateAfter(globalmin,tar0.value-0) != 'NaN-NaN-NaN' ? dateAfter(globalmin,tar0.value-0) : '待定';
                        var tar1Value = dateAfter(globalmin,tar0.value+tar1.value) != 'NaN-NaN-NaN' ? dateAfter(globalmin,tar0.value+tar1.value) : '待定';
                        var result = tar2.seriesName + ' : ' + tar2Value + '<br/>' + 
                           '计划完成时间' + ' : ' + tar3Value+ '<br/>' + 
                           tar0.seriesName + ' : ' + tar0Value + '<br/>' + 
                           '实际完成时间' + ' : ' + tar1Value;
                       return result;
                   }
               },
               xAxis : [
                   {
                       type : 'value',
                      splitNumber: legend.length-1,
                      max: legend.length-1,
                      axisLabel:{
                       show: false
                      },
                      splitLine:{
                       show: false
                      }
                   },
                   {
                       type : 'category',
                       boundaryGap : false,
                       data : legend
                   }
               ],
               yAxis : [
                   {
                       type : 'category',
                       splitLine: {show:false},
                       data : category
                   }
               ],
               series : [
                   {
                       name:'实际开始时间',
                       type:'bar',
                       stack: '总量1',
                       itemStyle:{
                           normal:{
                               barBorderColor:'rgba(0,0,0,0)',
                               color:'rgba(0,0,0,0)'
                           },
                           emphasis:{
                               barBorderColor:'rgba(0,0,0,0)',
                               color:'rgba(0,0,0,0)'
                           }
                       },
                       data:actualBase
                   },
                   {
                       name:'实际时间',
                       type:'bar',
                       stack: '总量1',
                       itemStyle : { 
                           normal: {
                             color:'#dd4b39',
                             label : {
                              show: true, 
                              position: 'inside'
                             }
                           }
                        },
                       data:actualData
                   },
                   {
                       name:'计划开始时间',
                       type:'bar',
                       stack: '总量',
                       itemStyle:{
                           normal:{
                               barBorderColor:'rgba(0,0,0,0)',
                               color:'rgba(0,0,0,0)'
                           },
                           emphasis:{
                               barBorderColor:'rgba(0,0,0,0)',
                               color:'rgba(0,0,0,0)'
                           }
                       },
                       data:planBase
                   },
                   {
                       name:'计划时间',
                       type:'bar',
                       stack: '总量',
                       itemStyle : { 
                        normal: {
                         color:'#00AA55',
                         label : {
                           show: true, 
                           position: 'inside'
                          }
                         }
                       },
                       data:planData
                   }
               ]
           };
            myChart.setOption(option);
            }
        );
    }
    function dateAfter(dateStr,num){
        if (dateStr) {
            var date1 = new Date(Date.parse(dateStr.replace(/-/g,   "/")));
            var date2 = new Date(date1);
            date2.setDate(date1.getDate()+num);
            var times = date2.getFullYear()+"-"+(date2.getMonth()+1)+"-"+date2.getDate();
            return times;
        }
    }
    function GetDateDiff(startDate,endDate){
        if (startDate && endDate) {
            var startTime = new Date(Date.parse(startDate.replace(/-/g,   "/"))).getTime();     
            var endTime = new Date(Date.parse(endDate.replace(/-/g,   "/"))).getTime();     
            var dates = (startTime - endTime)/(1000*60*60*24);     
            return  dates;    
        }
    }
</script>

 

Date.prototype.format = function(format) {
        format = format || 'yyyy-MM-dd hh:mm:ss';
       var date = {
              "M+": this.getMonth() + 1,
              "d+": this.getDate(),
              "h+": this.getHours() ,
              "m+": this.getMinutes(),
              "s+": this.getSeconds(),
              "q+": Math.floor((this.getMonth() + 3) / 3),
              "S+": this.getMilliseconds()
       };
       if (/(y+)/i.test(format)) {
              format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
       }
       for (var k in date) {
              if (new RegExp("(" + k + ")").test(format)) {
                     format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
              }
       }
       return format;
    };