ECharts 实现甘特图实例（自定义生成）

来源：互联网发布：二次元衣服淘宝店编辑：程序博客网时间：2024/06/03 14:14

需求:公司OA，要求根据用户输入的时间段和项目组生成该项目组这段时间研发进度的甘特图

效果：
这里写图片描述
描述: 甘特图y轴是根据搜索条件（时间段和研发组）查询数据库，查询这段时间该项目组研发的项目，x轴根据时间段生成刻度间距，但保持为七个刻度。

代码：

<html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        html, body {            width: 100%;            height: 100%;            background: #020202;            overflow: hidden;        }        #container {            width: 100%;            height: 100%;        }    </style></head><body><div id="container"></div></body><script src="js/jquery-1.10.1.min.js"></script><script src="js/echarts.min.js"></script><script>    //计算两个日期相差天数    function  DateDiff(sDate1,sDate2){        //sDate1和sDate2是2006-12-18格式        var aDate,oDate1,oDate2,iDays;        aDate = sDate1.split("-");        oDate1 = new Date(aDate[1]+'-'+aDate[2]+'-'+aDate[0]) ;           aDate = sDate2.split("-");        oDate2 = new Date(aDate[1]+'-'+aDate[2]+'-'+aDate[0]);        iDays = parseInt(Math.abs(oDate1-oDate2)/1000/60/60/24)    ;//把相差的毫秒数转换为天数        return iDays;    }    //获得两个日期间所有日期-fn1    Date.prototype.format = function() {        var s = '';        var mouth = (this.getMonth()+1)>=10?(this.getMonth()+1):('0'+(this.getMonth() + 1));        var day = this.getDate()>=10?this.getDate():('0'+this.getDate());        s += this.getFullYear()+'-'; // 获取年份。        s += mouth + "-"; // 获取月份。        s += day;   //获取日。        return (s); //返回日期。    };    //获得两个日期间所有日期-fn2    function getAll(begin, end) {        var return_=[];        var ab = begin.split("-");        var ae = end.split("-");        var db = new Date();        db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);        var de = new Date();        de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);        var unixDb = db.getTime();        var unixDe = de.getTime();        for (var k = unixDb; k <= unixDe;) {            return_.push((new Date(parseInt(k))).format());            k = k + 24 * 60 * 60 * 1000;        }        return return_;    }    var dataa = [        {        "name":"项目a",        "startTime":"2017-08-06",        "latestTime":"2017-08-19"        },        {        "name":"项目b",        "startTime":"2017-08-14",        "latestTime":"2017-08-17"        }    ];//假数据，实际应用可以用ajax从后台请求，获取数据    var start_="2017-08-01",end_="2017-08-29";//用户自定义时间    var data$ = DateDiff(start_,end_);//用户自定义的时间长度    var data1 = DateDiff(start_,dataa[0].startTime);//项目a 起始位置    var data1_1 = DateDiff(dataa[0].startTime,dataa[0].latestTime);//项目a 持续时间    var data2 = DateDiff(start_,dataa[1].startTime);//项目b 起始位置    var data2_1 = DateDiff(dataa[1].startTime,dataa[1].latestTime);//项目b 持续时间    x_ = getAll(start_,end_);    var myCharts =echarts.init(document.getElementById("container"));    var option = {        tooltip: {            trigger: 'axis',            axisPointer: {                            type: 'shadow'                  },            formatter: function (params) {                var tar = params[1];                return tar.name + '<br/>' + tar.seriesName + ' :::: ' + tar.value;            }        },        grid: {            left: '3%',            right: '4%',            bottom: '3%',            containLabel: true        },        xAxis: {            type: 'value',            max:data$,             axisLabel: {                 formatter: function (value, index) {                     return x_[value]                 }             }        },        yAxis: {            type: 'category',            splitLine: {show: false},            data: ['项目a', '项目b']        },        series: [            {                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: [data1,data2]            },            {                //每个项目 持续时间长度                name: '时长',                type: 'bar',                stack: '总量',                label: {                    normal: {                        show: true,                        position: 'inside'                    }                },                data: [data1_1,data2_1]            }        ]    };    myCharts.setOption(option);</script></html>

阅读全文

1 0