echarts甘特图

最新推荐文章于 2023-09-13 16:24:14 发布

嚜溟

最新推荐文章于 2023-09-13 16:24:14 发布

阅读量4.7k

点赞数

分类专栏： echarts 文章标签： echarts-gattery 甘特图 echarts甘特图

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Gattery</title>
    <script src="./node_modules/echarts/dist/echarts.min.js"></script>
</head>

<body>
    <div id='main' style="width:1300px;height:600px"></div>
    <script>
        // 基于准备好的dmo，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = option = {
            title: {
                text: '项目实施进度表',
                left: 10
            },
            legend: {
                data: ['计划实施时间', '实际实施时间']

            },
            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',
                    itemStyle: {
                        normal: {
                            color   
                        }
                    },
                    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',
                    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")
                    ]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

这里面尤其要注意的是echarts的版本，经过测试，echarts版本大于4.0.2之后，工作流程图color：rgba（0,0,0,0）显示没有效果

文章的内容主要来自于http://gallery.echartsjs.com/editor.html?c=xryzwi7fVl，内容来自于该作者，我只是测试版本使用

嚜溟

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
echarts甘特图

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫