echarts甘特图-工厂生产计划-甘特图

最新推荐文章于 2023-12-16 10:54:48 发布
最新推荐文章于 2023-12-16 10:54:48 发布
阅读量2.4k 收藏 27
点赞数 4
分类专栏： JS PHP 甘特图
原文链接：https://blog.csdn.net/zyfzyhf/article/details/90043000
版权
PHP 同时被 3 个专栏收录
106 篇文章 1 订阅
订阅专栏
JS
63 篇文章 1 订阅
订阅专栏
甘特图
1 篇文章 0 订阅
订阅专栏

在这里插入图片描述

let data = [
            {
                "list": [
                    {
                        "colorNum":0,
                        "endTime":"2018-08-02 14:00:00",
                        "item":"item1",
                        "quantity":1960,
                        "startTime":"2018-08-02 8:00:00",
                    },
                    {
                        "colorNum":1,
                        "endTime":"2018-08-04 12:00:00",
                        "item":"item2",
                        "quantity":492,
                        "startTime":"2018-08-04 08:00:00",
                    },
                    {
                        "colorNum":2,
                        "endTime":"2018-08-04 18:00:00",
                        "item":"item3",
                        "quantity":20837,
                        "startTime":"2018-08-04 14:00:00",
                    },
                    {
                        "colorNum":3,
                        "endTime":"2018-08-05 12:00:00",
                        "item":"item4",
                        "quantity":3620,
                        "startTime":"2018-08-04 20:00:00",
                    },
                    {
                        "colorNum":0,
                        "endTime":"2018-08-05 24:00:00",
                        "item":"item5",
                        "quantity":7200,
                        "startTime":"2018-08-05 14:00:00",
                    },
                ],
                "plant": "工厂1"
            },
            {
                "list": [
                    {
                        "startTime": "2018-08-03 12:00:00",
                        "endTime": "2018-08-04 12:00:00",
                        "quantity": 20,
                        'colorNum':0,
                        'item':'item6',
                    }
                ],
                "plant": "工厂2"
            },
            {
                "list": [
                    {
                        "startTime": "2018-08-04 12:00:00",
                        "endTime": "2018-08-06 00:00:00",
                        "quantity": 30,
                        'colorNum':0,
                        'item':'item7',
                    },
                    {
                        "startTime": "2018-08-06 08:00:00",
                        "endTime": "2018-08-06 12:00:00",
                        "quantity": 20,
                        'colorNum':1,
                        'item':'item8',
                    },
                    {
                        "startTime": "2018-08-06 14:00:00",
                        "endTime": "2018-08-08 12:00:00",
                        "quantity": 10,
                        'colorNum':2,
                        'item':'item9',
                    },
                    {
                        "startTime": "2018-08-08 20:00:00",
                        "endTime": "2018-08-10 12:00:00",
                        "quantity": 10,
                        'colorNum':3,
                        'item':'item10',
                    }
                ],
                "plant": "工厂3"
            },
            {
                "list": [
                    {
                        "startTime": "2018-08-02 20:00:00",
                        "endTime": "2018-08-03 12:00:00",
                        "quantity": 20,
                        'colorNum':1,
                        'item':'item11',
                    },
                    {
                        "startTime": "2018-08-03 20:00:00",
                        "endTime": "2018-08-04 12:00:00",
                        "quantity": 15,
                        'colorNum':2,
                        'item':'item12',
                    },
                    {
                        "startTime": "2018-08-04 20:00:00",
                        "endTime": "2018-08-05 12:00:00",
                        "quantity": 15,
                        'colorNum':3,
                        'item':'item13',
                    },
                ],
                "plant": "工厂4"
            },
        ]
let start_="2018-08-02 00:00:00", end_="2018-11-05 24:00:00"; //自定义时间
let seriesData = [];
let yAxisData_plant = []; //工厂名

data.forEach((item, index) => {
    yAxisData_plant.push(item.plant);
    let bgColor;
    item.list.forEach((listItem, listIndex) => {
        switch (listItem.colorNum) {
            case 0:
                bgColor = 'rgba(0,187,255,.4)';
                break;
            case 1:
                bgColor = 'rgba(80,227,194,.4)';
                break;
            case 2:
                bgColor = 'rgba(255,115,115,.4)';
                break;
            case 3:
                bgColor = 'rgba(255,207,107,.4)';
                break;
            default:
                bgColor = 'rgba(0,187,255,.4)'
        }
        let startTime = new Date(listItem.startTime).getTime();
        let endTime = new Date(listItem.endTime).getTime();
        seriesData.push({
            name: listItem.item,
            value: [
                index,
                startTime,
                endTime,
                listItem.quantity,
            ],
            itemStyle: {
                normal: {
                    color: bgColor
                }
            }
        });
    })

});

option = {
        backgroundColor: '#26263C',
        tooltip: {
            formatter: function (params) {
                //console.log(params)
                return params.marker + params.name;
            }
        },
        grid: {
            top: 48,
            left: 100,
            right: 50,
            bottom: 50,
            height:300,
        },
        dataZoom: [{
            show: true,
            type: 'slider',
            filterMode: 'none',
            realtime: false,
            height: 10,
            top: 370,
            startValue:new Date(start_).getTime(),
            endValue:new Date(start_).getTime() + 3600 * 24 * 1000 * 7,
            minValueSpan: 3600 * 24 * 1000 * 7,
            handleIcon: 'path://path://M100, 100m -75, 0a75,75 0 1,0 150,0a75,75 0 1,0 -150,0',
            handleSize: '120%',
            handleStyle: {
                color: "#fff",
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 4
            },
            textStyle: {
                color: "transparent"
            },
            borderColor: 'transparent',
            backgroundColor: '#D7F4FF',
            dataBackground: {
                lineStyle: {
                    width: 0
                },
                areaStyle: {
                    color: 'transparent'
                }
            },
            fillerColor: '#00EBFF',
            labelFormatter: ''
        }, {
            type: "inside",
            show: true,
            zoomOnMouseWheel: false,
            moveOnMouseWheel: true,
            moveOnMouseMove: true,
            preventDefaultMouseMove: true
        }],
        xAxis: {
            type: 'time',
            min: new Date(start_).getTime(),
            max: new Date(end_).getTime(),
            scale: true,
            position: 'top',
            splitNumber: 7,
            axisLabel: {
                show: true,
                textStyle: {color: '#ffffff'},
                interval: 0,
                margin: 15,
                fontSize: 14,
                formatter:function (value, index) {
                    var date = new Date(value);
                    var texts = [date.getFullYear(),(date.getMonth() + 1), date.getDate()].join('/');
                    return texts;
                }
            },
            axisLine: {show: false,},
            splitLine: {
                show: true,
                lineStyle: {color: 'rgba(233,233,233,0.1)'}
            },
            axisTick: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            axisLine: {
                onZero: false,
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {color: '#ffffff'},
                fontSize: 14
            },
            splitLine: {
                show: true,
                lineStyle: {color: 'rgba(233,233,233,0.1)'}
            },
            inverse: true,
            data: yAxisData_plant
        },
        series: [{
            type: 'custom',
            renderItem: function (params, api) {
                var categoryIndex = api.value(0);
                var start = api.coord([api.value(1), categoryIndex]);
                var end = api.coord([api.value(2), categoryIndex]);
                var height = api.size([0, 1])[1] * 0.6;
                var rectShape = echarts.graphic.clipRectByRect({
                    x: start[0],
                    y: start[1] - 5,
                    width: end[0] - start[0],
                    height: 10
                }, {
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height
                });

                return rectShape && {
                    type: 'rect',
                    shape: rectShape,
                    style: api.style()
                };

            },
            encode: {
                x: [1, 2],
                y: 0
            },
            data: seriesData
        }]
    }

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

let data = [{
        "list": [{
                "colorNum": 0,
                "endTime": '10',
                "name": "在线",
                "quantity": 10,
                "startTime": '0',
            },
            {
                "colorNum": 1,
                "endTime": "20",
                "name": "离线",
                "quantity": 10,
                "startTime": "12",
            },
            {
                "colorNum": 2,
                "endTime": "30",
                "name": "故障",
                "quantity": 10,
                "startTime": "25",
            },
            {
                "colorNum": 3,
                "endTime": '55',
                "name": "繁忙",
                "quantity": 10,
                "startTime": '50',
            },

        ],
        "plant": ""
    },
    



]
// let start_ = "0",
//     end_ = "60"; //自定义时间
let seriesData = [];
let yAxisData_plant = []; //工厂名

data.forEach((item, index) => {
    yAxisData_plant.push(item.plant);
    let bgColor;
    item.list.forEach((listItem, listIndex) => {
        switch (listItem.colorNum) {
            case 0:
                bgColor = 'rgba(0,187,255,.4)';
                break;
            case 1:
                bgColor = 'rgba(80,227,194,.4)';
                break;
            case 2:
                bgColor = 'rgba(255,115,115,.4)';
                break;
            case 3:
                bgColor = 'rgba(255,207,107,.4)';
                break;
            default:
                bgColor = 'rgba(0,187,255,.4)'
        }
        // let startTime = 0;
        // let endTime = 60;
        seriesData.push({
            name: listItem.name,
            value: [
                index,
                listItem.startTime,
                listItem.endTime,
                listItem.quantity,
            ],
            itemStyle: {
                normal: {
                    color: bgColor
                }
            }
        });
    })

});

option = {
    backgroundColor: '#26263C',
    tooltip: {
        formatter: function(params) {
            //console.log(params)
            return params.marker + params.name + params.value;
        }
    },

    legend: {
      show: true,
    //   icon: "circle",
      itemWidth: 16,
      itemHeight: 16,
      itemGap: 13,
      data: ['在线', '离线', '故障', '繁忙'],
      x: 'center',
      y: 'center',
      textStyle: {
        fontSize: 12,
        color: "#fff",
      },
    },
    grid: {
        top: 48,
        left: 100,
        right: 50,
        bottom: 50,
        height: 300,
    },

    xAxis: {
        type: '',
        min: 0,
        max: 60,
        scale: true,
        position: 'buttom',
        splitNumber: 6,
       axisLabel: {
            show: true,
            interval: 0,
            color: '#fff',
        },
        axisLine: {
            lineStyle: {
                color: '#38384d',
                width: 1, //这里是为了突出显示加上的
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(233,233,233,0.1)'
            }
        },

        axisTick: {
            lineStyle: {
                color: '#38384d'
            }
        }
    },
    yAxis: {
        axisLine: {
            onZero: false,
            show: false
        },
        
        axisLabel: {
            show: true,
            textStyle: {
                color: '#ffffff'
            },
            fontSize: 14
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: ''
            }
        },
        inverse: false,
        data: yAxisData_plant
    },
    series: [
                {
        type: 'custom',
        renderItem: function(params, api) {
            var categoryIndex = api.value(0);
            var start = api.coord([api.value(1), categoryIndex]);
            var end = api.coord([api.value(2), categoryIndex]);
            var height = api.size([0, 1])[1] * 0.6;
            var rectShape = echarts.graphic.clipRectByRect({
                x: start[0],
                y: start[1] - 5,
                width: end[0] - start[0],
                height: 10
            }, {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            });

            return rectShape && {
                type: 'rect',
                shape: rectShape,
                style: api.style()
            };

        },
        encode: {
            x: [1, 2],
            y: 0
        },
        data: seriesData
    },
        {
            show: false,
        type: 'radar',
        renderItem: function(params, api) {
            var categoryIndex = api.value(0);
            var start = api.coord([api.value(1), categoryIndex]);
            var end = api.coord([api.value(2), categoryIndex]);
            var height = api.size([0, 1])[1] * 0.6;
            var rectShape = echarts.graphic.clipRectByRect({
                x: start[0],
                y: start[1] - 5,
                width: end[0] - start[0],
                height: 10
            }, {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            });

            return rectShape && {
                type: 'rect',
                shape: rectShape,
                style: api.style()
            };

        },
        encode: {
            x: [1, 2],
            y: 0
        },
        data: seriesData
    },

    ]
}
新老农
关注
  • 4
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
echarts实现时间甘特图、时间切片、状态切片图效果
a497314013的博客
05-21 628
以时间甘特图的形式显示某天24小时状态切片图，空白时间轴使用其他背景颜色填充。坐标轴固定0-24h。
Echarts实现甘特图功能（完整实现代码）
爬不动的猫的博客
12-12 2147
主要是业务中要实现类似甘特图的完成进度功能
如何使用ECharts绘制甘特图
热门推荐
acheding的博客
10-08 2万+
本文将从是什么(What)、为什么(Why)、怎么做(How)三个方面讲述如何使用ECharts绘制甘特图。
Echarts 设备状态 甘特图
qq_38567182的博客
11-26 1329
Echarts 甘特图设备状态 设备当天所有状态，以及状态持续的时长，设备当天的运行记录。
项目加工进度图表实现（echarts）
weixin_47438730的博客
12-16 118
【代码】项目加工进度图表实现（echarts）
EChart 制作类似微软的 甘特图
不死就继续
04-03 1万+
前段时间  领导要求完成一个项目进度的图形，一个项目下面又分成不同的阶段，各阶段又不是固定死的，都是动态生成的，关键是还必须要显示时间进度，在一个只有x,y轴的坐标系中要显示，阶段类型，时间，还有各阶段完成量，还有计划和实际的进度，这个在一个二维的平面上很难完成的，最开始打算使用线图来完成，x轴为时间，y轴为计划量和实际量，各线的颜色代表各个阶段的类型，但是如果个阶段的量的单位不能统一，比如：第一
echarts甘特图-工厂生产计划-gantt图
zyfzyhf的博客
05-09 3613
** echarts甘特图-工厂生产计划-gantt图 ** https://gallery.echartsjs.com/editor.html?c=xjzbwfaAO7 let data = [ { "list": [ { "colorNum":0, ...
安全工作计划甘特图-Excel模版
07-22
【作品名称】：安全工作计划甘特图-Excel模版 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
工作计划甘特图-Excel模版
07-22
【作品名称】：工作计划甘特图-Excel模版 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
工作项目计划甘特图-Excel模版
最新发布
07-22
【作品名称】：工作项目计划甘特图-Excel模版 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
excel表格甘特图-交付计划参考模板
11-25
3. **模板使用**：“XX运维项目实施计划—模板.xlsx”和“交付计划01.xlsx”、“交付计划02.xlsx”都是预设的甘特图模板，它们可能包含了标准的项目管理元素，如任务、负责人、持续时间、依赖关系等，便于快速制定和...
项目进度图-甘特图(Gantt图)
05-14
该项目详细的展示了项目进度图-甘特图(Gantt图)的实战过程，里边的源代码注释详细清楚，非常方便开发者学习。
订单生产进度甘特图-Excel模版
07-22
【作品名称】：订单生产进度甘特图-Excel模版 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
echarts中图例右置且竖排
wudechun的博客
05-12 5501
如何为echarts配置在右侧竖直的图例
echarts制作甘特图
diaoyu6245的博客
05-28 420
html <div id="SpeciaEchartBox" style="width: 90%;height:500px; margin:0 auto"></div> </div> initEchartBox: function() { var chartBox = echarts.init(docume...
Echarts实现甘特图
麦子
05-08 2542
一、项目需求如下所示： 此项目实现的功能点： 1、鼠标滑动可滚动滚动条 2、y轴label鼠标滑动可显示tooltip 3、y轴label过长换行显示
如何用Echart正确的绘制甘特图（适用于React）
daydream13580130043的博客
08-04 7171
前言 之前实现作业车间调度问题甘特图绘制，搜索过如何用Echart绘制甘特图，发现绘制方法都一毛一样，都是通过叠加series来实现，但这样绘制出来的甘特图，不仅够丑，而且数据也难以描述，如果要在react这种mvvm中绘制的话，也没法对甘特图做数据管理，所以经过自己的思考，发现可以有更好的绘制甘特图的方法。首先先看绘制出来的甘特图效果（项目GitHub地址：https://github.com...
html 自定义简单的时间轴 timeline 并与 table 图表和 echarts 进度甘特图联动
未名部落格
03-16 7205
1.需求 最近有需求需要实现 &lt;table&gt; 图表与 eharts 柱状图的联动。 完整的效果图如下所示 这里时间轴要实现的效果要基本如下图所示 该时间轴并不是要实现选中单独的某一个月份并查看单月的数据，而是要将当前数据的时间跨度控制在时间轴的跨度之间，在点击后退一个月或前进一个月的时候，对应的图表数据需要同步过滤并更新。 2.分析 echarts 本身是有时间轴...
利用echart实现各环节进度监控
简单而有效
01-18 3987
思路： 利用echart瀑布图，实现计划进度和实际进度的对比，显示差异以及工期。利用甘特图因为时间轴不好调整，并且不好看，所以利用echart布局。公司只想关注主要环节，希望一屏能够看到想要的信息，所以我想到把时间固定在6-8个区段（因为项目会有延期）。但是时间轴是可以动态生成的。以下代码可以直接在echart官方的编辑器中运行。赋值接口都已经安排好，想必用过的人应该懂得如何赋值。代码如下：opt
echarts 甘特图
08-11
ECharts是一个功能强大的可视化库，提供了多种常见的数据可视化图表，如折线图、柱状图、散点图、饼图等，但是它没有内置的甘特图功能。然而，你可以利用ECharts的一些属性和技巧来实现绘制甘特图。 首先，可以使用ECharts的stack属性来实现数据的堆叠，将同一类别轴上的系列设置相同的stack值，可以使后一个系列的值在前一个系列的值上相加并堆叠在同一条数据上。其次，可以利用z属性来控制条状图的层叠顺序，通过将开始时间的z值设置得比结束时间大，可以实现开始时间的条状图覆盖结束时间的条状图。 此外，为了实现甘特图的效果，需要注意一些细节处理。首先，在开始时间和结束时间的位置上，需要传入一整组数据，并在对应的位置赋值，其余位置保持为空，以确保开始时间和结束时间位于同一起点并实现覆盖效果。其次，可以将开始时间的条状图设置为背景色，将结束时间的条状图边框设置为背景色，以达到所需的效果。 总结来说，虽然ECharts没有直接提供甘特图的功能，但是通过使用ECharts的stack和z属性，并巧妙地处理数据和样式，你可以实现绘制甘特图的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [如何使用ECharts绘制甘特图](https://blog.csdn.net/bDreamer/article/details/120653359)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值