Echarts 甘特图

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 
<%@taglib prefix="xpm" uri="http://www.xinhuagroup.com/xpm" %>
<%@ page isELIgnored="false" %>
<div class="easyui-layout" data-options="fit:true,border:true">
    <div data-options="region:'center',border:false">
        <div id="barChart" style="width:'100%';height: 500px;"></div>
    </div>
</div>
<script src="sta/js/echarts-2.2.7/build/dist/echarts.min.js"></script>   
<script type="text/javascript">
    var myCharts = echarts.init(document.getElementById('barChart'));
    var option = {
        title: {
            text: '项目实施进度表',
            x: "center", //标题水平方向位置
            top: '20'
        },
        legend: {
            y: 'bottom',
            data: ['计划时间', '实际时间']
        },
        grid: {
            containLabel: true,
            left: '30'
        },
        xAxis : [{
            type : 'time',
            axisLabel : {
                formatter: function(value){
                        return new Date(value).format('yyyy-MM-dd');
                    }
                }
            }],
        yAxis: {
            data: ['设计', '采购', '制造', '质检']
        },
        tooltip: {
            trigger: 'axis',
            formatter: function(params) {
                var res = params[0].name + "</br>"
                params[0].data = (params[0].data == 'NaN-aN-aN') ? '待定' : params[0].data;
                params[1].data = (params[1].data == 'NaN-aN-aN') ? '待定' : params[1].data;
                params[2].data = (params[2].data == 'NaN-aN-aN') ? '待定' : params[2].data;
                params[3].data = (params[3].data == 'NaN-aN-aN') ? '待定' : params[3].data;
                res += params[0].seriesName + "~" + "计划完成时间" + ":</br>" + params[0].data + "~" + params[1].data + "</br>"
                res += params[2].seriesName + "~" + "实际完成时间" + ":</br>" + params[2].data + "~" + params[3].data
                return res;
            }
        },
        series: [{
                name: '计划开始时间',
                type: 'bar',
                stack: 'test1',
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)'
                    }
                },
                data: [
                    new Date('${exeInfo.factBeginTimeEc}').format('yyyy-MM-dd'),
                    new Date('${exeInfo.factBeginTimePc}').format('yyyy-MM-dd'),
                    new Date('${exeInfo.factBeginTimeMc}').format('yyyy-MM-dd'),
                    new Date('${exeInfo.factBeginTimeTest}').format('yyyy-MM-dd')
                ]},
                {
                    name: '计划时间',
                    type: 'bar',
                    stack: 'test1',
                    itemStyle: {
                        normal: {
                            color: '#F98563'
                        }
                    },
                    data: [
                        new Date('${exeInfo.planTimeEc}').format('yyyy-MM-dd'),
                        new Date('${exeInfo.planTimePc}').format('yyyy-MM-dd'),
                        new Date('${exeInfo.planTimeMc}').format('yyyy-MM-dd'),
                        new Date('${exeInfo.planTimeTest}').format('yyyy-MM-dd')
                ]
            },
            {
                name: '实际开始时间',
                type: 'bar',
                stack: 'test2',
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)'
                    }
                },
                data: [
                    new Date('${exeInfo.factBeginTimeEc}').format('yyyy-MM-dd'),
                    new Date('${exeInfo.factBeginTimePc}').format('yyyy-MM-dd'),
                    new Date('${exeInfo.factBeginTimeMc}').format('yyyy-MM-dd'),
                    new Date('${exeInfo.factBeginTimeTest}').format('yyyy-MM-dd')
                ]
            },
            {
                name: '实际时间',
                type: 'bar',
                stack: 'test2',
                itemStyle: {
                    normal: {
                        color: '#A2E068'
                    }
                },
                data: [
                    new Date('${exeInfo.factEndTimeEc}').format('yyyy-MM-dd'),
                    new Date('${exeInfo.factEndTimePc}').format('yyyy-MM-dd'),
                    new Date('${exeInfo.factEndTimeMc}').format('yyyy-MM-dd'),
                    new Date('${exeInfo.factEndTimeTest}').format('yyyy-MM-dd')
                ]
            }
        ]
    };
    myCharts.setOption(option);
</script>