ECharts 实现甘特图实例(自定义生成)

标签: 研发 web echarts3-0 js 前端
402人阅读 评论(0) 收藏 举报
分类:

需求:公司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>
查看评论

EChart 制作类似微软的 甘特图

前段时间  领导要求完成一个项目进度的图形,一个项目下面又分成不同的阶段,各阶段又不是固定死的,都是动态生成的,关键是还必须要显示时间进度,在一个只有x,y轴的坐标系中要显示,阶段类型,时间,还有各阶...
  • u010259369
  • u010259369
  • 2014-04-03 22:33:24
  • 9490

燃尽图,甘特图,鱼骨图

1. 燃尽图        燃尽图(burn down chart)是在项目完成之前,对需要完成的工作的一种可视化表示。燃尽图有一个Y轴(工作)和X轴(时间)。理想情况下,该图表是一个向下的曲线,随...
  • p_ython
  • p_ython
  • 2017-07-05 08:17:06
  • 1702

学习笔记:使用echarts画图表

最近项目组需要在web画图表,在网上找了一下,发现百度出品的echarts非常好用...
  • imageprocessing2
  • imageprocessing2
  • 2014-10-25 00:38:04
  • 38246

用highcharts做甘特图展示

一、首先,需要引插件:jquery-1.11.3.jshighcharts.jshighcharts-more.js二、body中的html代码三、js代码 var xArray; v...
  • weiyixiao_java
  • weiyixiao_java
  • 2017-01-13 17:41:28
  • 1704

利用echart实现各环节进度监控

思路: 利用echart瀑布图,实现计划进度和实际进度的对比,显示差异以及工期。利用甘特图因为时间轴不好调整,并且不好看,所以利用echart布局。公司只想关注主要环节,希望一屏能够看到想要的信息,所...
  • dirful
  • dirful
  • 2018-01-18 11:55:30
  • 439

JQuery.Gantt(甘特图) 开发指南 , 附下载资源

下载地址:https://github.com/ybx13579/jQuery.Gantt概述 JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。 ...
  • YangBingX
  • YangBingX
  • 2017-06-19 18:11:57
  • 4265

ECharts 3.0底层zrender 3.x源码分析3-Handler(C层)

这一篇,介绍下Handler处理机制。Handler负责事件处理,包括’click’, ‘dblclick’, ‘mousewheel’, ‘mouseout’, ‘mouseup’, ...
  • future_todo
  • future_todo
  • 2017-01-11 10:48:15
  • 2034

基于Echarts的销售企业经营数据分析-帕累托

帕累托能够快速详尽地分析特定维度(如产品、客户)对某个财务参数的贡献,该工具体现了帕累托原则,即公司80%的经营成果源自20%的资源运用。以曲线形式在方便读者阅读的图标上展示产品、客户或其他维度上的表...
  • anyushan
  • anyushan
  • 2016-05-13 14:58:57
  • 875

echart与highchart的细节区别

echart和highchart各有千秋,我就说一点,做展示效果的时候,如果想全屏展示恩键F11,echart图得摁F5刷新一下,highchart直接自适应,我就说这一点细节。...
  • lijunfei12306
  • lijunfei12306
  • 2018-01-23 09:16:01
  • 149
    个人资料
    等级:
    访问量: 1157
    积分: 79
    排名: 155万+
    文章存档
    最新评论