echarts实现甘特图

最新推荐文章于 2025-03-25 14:34:05 发布

Dobby Liu

最新推荐文章于 2025-03-25 14:34:05 发布

阅读量5.8w

点赞数 10

分类专栏： echarts

本文链接：https://blog.csdn.net/yixu0534/article/details/82785119

版权

echarts 专栏收录该内容

0 篇文章

订阅专栏

参考文档：http://gallery.echartsjs.com/editor.html?c=xryzwi7fVl

实现效果：

1、引入js文件：

<script type="text/javascript" src="jQuery存放路径/jquery.min.js"></script>
<script type="text/javascript" src="echarts存放/echarts.min.js"></script>

2、存放甘特图的容器

<div id="container"></div><!--其他样式自行加上即可-->

3、实现甘特图的js

var myCharts = echarts.init(document.getElementById('container'));
var option = {
    title: {
        text: '项目实施进度表',
        left: 10
    },
    legend: {
        y: 'bottom',
        data: ['计划时间', '实际时间']  //修改的地方1

    },
    grid: {
        containLabel: true,
        left: 20
    },
    xAxis: {
        type: 'time'
    },

    yAxis: {

        data: ['任务一', '任务二', '任务三', '任务四', '任务五', '任务六', '任务七']

    },
    tooltip: {
        trigger: 'axis',
        formatter: function(params) {
            var res = params[0].name + "</br>"
            var date0 = params[0].data;
            var date1 = params[1].data;
            var date2 = params[2].data;
            var date3 = params[3].data;
            date0 = date0.getFullYear() + "-" + (date0.getMonth() + 1) + "-" + date0.getDate();
            date1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();
            date2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
            date3 = date3.getFullYear() + "-" + (date3.getMonth() + 1) + "-" + date3.getDate();
            res += params[0].seriesName + "~" + params[1].seriesName + ":</br>" + date0 + "~" + date1 + "</br>"
            res += params[2].seriesName + "~" + params[3].seriesName + ":</br>" + date2 + "~" + date3 + "</br>"
            console.log(params[0]);
            return res;
        }
    },
    series: [

        {
            name: '计划开始时间',
            type: 'bar',
            stack: 'test1',
            itemStyle: {
                normal: {
                    color: 'rgba(0,0,0,0)'
                }
            },
            data: [
                new Date("2015/09/2"),
                new Date("2015/09/15"),
                new Date("2015/09/15"),
                new Date("2015/10/03"),
                new Date("2015/10/04"),
                new Date("2015/10/05"),
                new Date("2015/10/06")
            ]
        },
        {
            name: '计划时间',
            type: 'bar',
            stack: 'test1',
            //修改地方2
            itemStyle: {
                normal: {
                    color: '#F98563'
                }
            },
            data: [
                new Date("2015/09/12"),
                new Date("2015/09/20"),
                new Date("2015/09/25"),
                new Date("2015/10/05"),
                new Date("2015/10/07"),
                new Date("2015/10/09"),
                new Date("2015/10/12")
            ]
        },
        {
            name: '实际开始时间',
            type: 'bar',
            stack: 'test2',
            itemStyle: {
                normal: {
                    color: 'rgba(0,0,0,0)'
                }
            },
            data: [
                new Date("2015/09/2"),
                new Date("2015/09/15"),
                new Date("2015/09/15"),
                new Date("2015/10/03"),
                new Date("2015/10/04"),
                new Date("2015/10/05"),
                new Date("2015/10/06")
            ]
        },
        {
            name: '实际时间',
            type: 'bar',
            stack: 'test2',
            //修改地方3
            itemStyle: {
                normal: {
                    color: '#A2E068'
                }
            },
            data: [
                new Date("2015/09/6"),
                new Date("2015/09/20"),
                new Date("2015/09/27"),
                new Date("2015/10/11"),
                new Date("2015/10/16"),
                new Date("2015/10/18"),
                new Date("2015/10/17")
            ]
        }
    ]
};
myCharts.setOption(option);

注：包含图表的div#container一定要设置高宽，否则页面上没有图表。