关闭

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

标签: 研发webecharts3-0js前端
183人阅读 评论(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>
1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

EChart 制作类似微软的 甘特图

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

燃尽图,甘特图,鱼骨图

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

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

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

Java操作project,并将结果展示到甘特图中,使用extjs(一)

Java操作project,并将结果展示到甘特图中,使用extjs
  • u011097980
  • u011097980
  • 2016-12-03 15:38
  • 1431

ECharts官方教程(十二)【自定义系列】

自定义系列自定义系列(custom series),是一种系列的类型。它把绘制图形元素这一步留给开发者去做,从而开发者能在坐标系中自由绘制出自己需要的图表。echarts 为什么会要支持 自定义系列 ...
  • WuLex
  • WuLex
  • 2017-12-19 22:38
  • 187

甘特图(Gantt chart)深度解析

什么是甘特图(Gantt chart) 一般对甘特图的解释是:以图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间,即甘特图(Gantt chart)是将活动与时间联系起来...
  • best_report
  • best_report
  • 2014-12-11 15:57
  • 1665

学习笔记:使用echarts画图表

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

eCharts添加自定义geojson数据实现地图展示

当初看到echarts的地图的时候感觉可以做点什么,但是一直米有实施,最近刚好用到了,就研究了研究,在echarts中添加了自定义的geojson数据,实现数据的地图展示。
  • GISShiXiSheng
  • GISShiXiSheng
  • 2016-12-05 07:36
  • 11875

利用Echarts制作地图(一)

从本篇开始,将用三篇文章说明如何利用Echarts制作自定义区域的单图例、多图例及动态加载地图所需数据。 文本作为开篇,将简单介绍如何利用echarts制作地图。
  • gisboygogogo
  • gisboygogogo
  • 2017-06-25 13:38
  • 2057

ECharts 的Base64图片后台解析

最近做了项目的报表使用到了百度的echarts,后来新的需求又来了,要求该报表图片实现邮件发送。也就是说报表图片能够被邮件发送。 实际上其他问题都没什么,最重要的就是怎么将前台的图片信息发送到后台,并...
  • woshizhangliang999
  • woshizhangliang999
  • 2015-04-22 17:21
  • 11034
    个人资料
    • 访问:343次
    • 积分:33
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档