Echarts 实现甘特图

已于 2024-09-10 09:55:54 修改
阅读量247 收藏 3
点赞数 3
文章标签： echarts 甘特图 javascript
于 2024-09-10 09:55:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kobe_okok/article/details/142088229
版权 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        let fontcol = "#00000087";
        let this_ = {};
        this_.colmap = {
            '飞行': '#00daff',
            '定检': '#f9ff00',
            '排故': '#ff6000',
            '停飞': '#a3abad',
        }
        //this_.startTime = 1620576000;
        this_.startTime = '2024-08-01 10:00:00';
        this_.categories = ['飞机A', '飞机B','飞机C','飞机D','飞机E','飞机F','飞机G'];
        this_.dataE = [
            // { "name": "飞行", "value": ['djdg', '2024-08-01 10:00:00', '2024-08-01 11:00:00', '7小时'] },//毫秒数要为数字类型
            // { "name": "排故", "value": ['djdg', '2024-08-01 13:00:00', '2024-08-01 14:00:00', '3小时'] },
            // { "name": "飞行", "value": [1, 1620644400, 1620655200, '3小时'] },
            // { "name": "停飞", "value": [1, 1620655200, 1620658300, '显示内容'] } //1:表飞机B
            {
                "name": "生產",
                "value": [
                    0,
                    "2024-06-01 00:00",
                    "2024-06-01 00:10",
                    "10"
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#00daff"
                    }
                }
            },
            {
                "name": "生產",
                "value": [
                    0,
                    "2024-06-01 01:05",
                    "2024-06-01 01:05",
                    "0"
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#00daff"
                    }
                }
            },
            {
                "name": "生產",
                "value": [
                    2,
                    "2024-06-01 00:20",
                    "2024-06-01 00:55",
                    "35"
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#00daff"
                    }
                }
            },
            {
                "name": "生產",
                "value": [
                    2,
                    "2024-06-01 01:15",
                    "2024-06-01 05:50",
                    "275"
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#00daff"
                    }
                }
            },
            {
                "name": "生產",
                "value": [
                    2,
                    "2024-06-01 23:30",
                    "2024-06-01 23:30",
                    "0"
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#00daff"
                    }
                }
            },
            {
                "name": "生產",
                "value": [
                    3,
                    "2024-06-01 07:00",
                    "2024-06-01 07:10",
                    "10"
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#00daff"
                    }
                }
            },
            {
                "name": "生產",
                "value": [
                    4,
                    "2024-06-01 07:20",
                    "2024-06-01 07:35",
                    "15"
                ],
                "itemStyle": {
                    "normal": {
                        "color": "#00daff"
                    }
                }
            }
        ]

        for (var i = 0; i < this_.dataE.length; i++) {
            this_.dataE[i].itemStyle = { "normal": { "color": this_.colmap[this_.dataE[i].name] } };
        }

        let 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] - height / 2,
                width: end[0] - start[0],
                height: height
            }, {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            });
            return rectShape && {
                type: 'rect',
                transition: ['shape'],
                shape: rectShape,
                style: api.style()
            };
        }
        this_.renderItem = renderItem;
        option = {
            tooltip: {
                formatter: function (params) {
                    //console.log(params);
                    if (params.value && params.value.length >= 4) {
                        return params.marker + this_.categories[params.value[0]] + ':' + params.name + '-' + params.value[3];
                    } else {
                        return "";
                    }
                }
            },
            dataZoom: [{
                type: 'slider',
                filterMode: 'weakFilter',
                xAxisIndex: 0,
                showDetail: false,
                showDataShadow: false	//值也可为"-5px",解决拖动条宽度问题			
            }],
            grid: {
                //containLabel: true
            },
            xAxis: {
                // min: Date.parse(this_.startTime),
                type: 'time',
                scale: true,
                // axisLabel: {
                //     formatter: function (val) {         
                //         var da = new Date(Number(val));
                //         var s = (da.getMonth() + 1) + "-" + da.getDate() + " " + da.getHours();
                //         return s;
                //     }
                // },
                // axisLine: {
                //     lineStyle: {
                //         color: fontcol
                //     }
                // },
                // axisPointer: {
                //     show: true,
                //     label: {
                //         formatter: function (params) {
                //             let a = parseInt(params.value);
                //             return new Date(a).toLocaleString();
                //         },
                //         color: 'black',
                //     }
                // },

            },
            yAxis: {
                data: this_.categories,
                axisLine: {
                    lineStyle: {
                        color: fontcol
                    }
                },
            },
            series: [{
                type: 'custom',
                renderItem: this_.renderItem,
                itemStyle: {
                    opacity: 0.8
                },
                encode: {
                    x: [1, 2],
                    y: 0
                },
                data: this_.dataE
            }]
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    </script>
</body>

</html>

实现效果

在这里插入图片描述

kobe_OKOK_
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
echarts 甘特图，tooltip 轮播
12-23
"echarts 甘特图，tooltip 轮播" 这个主题关注的是在 ECharts 甘特图中如何实现 tooltip（提示框）的轮播效果。在甘特图中，当有多个任务在同一时间区间内时，tooltip 可能会重叠，为了解决这个问题，我们可以设计一...
甘特图，可以拖拽甘特图模块。
02-23
甘特图是一种流行的时间管理工具，它以图形化的方式展示了项目计划和进度，通常用于工程管理、项目规划和任务调度。在IT行业中，甘特图是软件开发过程中的重要组成部分，尤其是在敏捷开发方法中，它可以帮助团队清晰...
vue制作甘特图项目源码
06-08
本项目主要面向需要使用vue来实现甘特图需求的开发者，项目实现了节点的拖拽，并用导航线连接各个节点，实现甘特图进度动态更改，导航线可以随着节点的拖拽动态变换位置，并可以新增、删除和修改任务 本项目只提供了...
QtGantt:甘特图控件
05-18
`QtGantt` 是一个基于 Qt 框架，特别是 QML 技术，对百度 eCharts 的甘特图组件进行封装的库，旨在为 Qt 开发者提供方便易用的甘特图控件。通过 `QtGantt`，开发者可以轻松地在 Qt 应用程序中集成动态、交互式的甘特...
项目进度图-甘特图(Gantt图)
05-14
源代码中的注释是理解代码逻辑和实现方法的关键，它可以帮助开发者快速掌握甘特图的制作步骤： 1. **数据准备**：定义项目任务、起止时间和进度数据，通常以列表或表格形式存储。 2. **绘制条形**：根据数据生成...
VUE使用echarts编写甘特图（组件）
最新发布
qq_45847565的博客
09-10 53
VUE使用echarts编写甘特图（组件）
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 1356
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
Module “console“ has been externalized for browser compatibility.
Alvin的博客
09-07 232
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
界面控件KendoReact中文教程 - 如何创建动态进度条？
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
09-06 1350
本文主要介绍如何使用KendoReact ProgressBar和ChunkProgressBar组件在React应用程序中创建动态进度条，欢迎下载新版控件体验！
基于JavaWeb开发的JavaSpringboot+Vue实现前后端分离房屋租赁系统
央顺科技官方博客
09-05 542
2021年处于信息科技高速发展的大背景之下。在今天，缺少手机和电脑几乎已经成为不可能的事情，人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大商家非常有必要建立自己的网上房屋租赁平台系统，这既可以让更多的人体验到网络所带来的方便，也有助于提高房屋的租赁。在经过几十年的高速发展后，互联网已成为最流行、最普及的媒体，每天的信息流量甚至能比得上过去十年。其以便捷的信息交换、快速的沟通速度，悄然地改变着会员的消费方式。
jEasyUI 创建带复选框的树形菜单
wjs2024的博客
09-10 258
jEasyUI 是一个基于 jQuery 的框架，它为用户提供了一套完整的用户界面组件，包括菜单、窗口、表格等。在本文中，我们将重点介绍如何使用 jEasyUI 创建一个带复选框的树形菜单。
hiprint打印/jsPDF使用/html2canvas
song854601134的博客
09-05 1335
hiprint
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 1036
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
js实现动态生成不固定数量的气泡
丁哒哒的博客
09-10 144
【代码】js实现动态生成不固定数量的气泡。
服装|基于Java+vue的服装定制系统(源码+数据库+文档)
weixin_66413741的博客
09-10 459
服装定制将是广大用户们不可忽视的一块。但是管理好服装定制又面临很多麻烦需要解决,我们可以发现服装定制方面的系统并不是相当普及,在服装定制方面的可以有许多改进。即服装定制系统慢慢的被人们关注。服装定制管理方面的任务繁琐,以至于每年都在服装定制管理这方面投入较多的精力却效果甚微,
前端技术演进与未来发展趋势探究
生活的真谛从来都不在别处 就在日常一点一滴的奋斗里
09-07 1956
本文深入探讨了前端领域的发展历程、主要技术及未来趋势。从前端技术的起源与早期发展，到动态页面的崛起，再到如今各种先进技术的涌现，我们见证了前端技术的不断演进。在发展历程方面，前端从最初的静态网页逐渐发展为复杂的动态交互界面。早期浏览器的竞争推动了技术的进步，而随着互联网的发展，后端框架的出现解决了后台代码庞大臃肿的问题。前端技术也从“网页三剑客”演变为新的“三剑客”，即 HTML、CSS 和 JavaScript，同时各种前端框架不断涌现，大大提高了开发效率和质量。
Vue+SpringBoot+数据库整体开发流程 1
水w的博客
09-10 1398
Vue+SpringBoot+数据库整体开发流程
【前端】读取csv文件，将数据转换为对象。spilce与slice的区别
weixin_43872912的博客
09-05 311
解决思路：将csv文件的第一行作为key，后续的每一行作为value存入对象数组。
【困难】 猿人学web第一届 第18题 jsvmp 洞察先机
m0_69843492的博客
09-06 930
第4页：[‘1004m209’, ‘1004m208’, ‘1004m207’, ‘1004d208’, ‘1004u209’]第5页：[‘1052m197’, ‘1052m199’, ‘1052m200’, ‘1051d201’, ‘1051u203’]第2页：[‘905m206’, ‘905m207’, ‘905m208’, ‘905d209’, ‘905u211’]第3页：[‘950m203’, ‘950m204’, ‘950m206’, ‘950d208’, ‘950u210’]
echarts实现甘特图
05-12
ECharts 是一个基于 JavaScript 的开源可视化库，提供了丰富的图表类型和交互方式，包括甘特图。下面是一个简单的甘特图示例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts示例</title> <!-- 引入 ECharts.js --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <!-- 创建一个用于绘制图表的容器 --> <div id="chart" style="width: 800px; height: 600px;"></div> <!-- 使用 ECharts 绘制甘特图 --> <script> // 初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('chart')); // 配置图表 var option = { title: { text: '甘特图示例' }, tooltip: { formatter: '{b}：{c}' }, grid: { top: '10%', left: '3%', right: '3%', bottom: '10%', containLabel: true }, xAxis: { type: 'time' }, yAxis: { type: 'category', data: ['任务1', '任务2', '任务3'] }, series: [{ type: 'bar', data: [{value: [new Date('2021-10-01'), new Date('2021-10-05')], name: '任务1'}, {value: [new Date('2021-10-02'), new Date('2021-10-07')], name: '任务2'}, {value: [new Date('2021-10-03'), new Date('2021-10-06')], name: '任务3'}], itemStyle: { color: '#1890ff' } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 在这个示例中，我们使用了 ECharts 的 `bar` 类型的系列来绘制甘特图，通过在 `data` 中设置每个任务的起始时间和结束时间的数组来定义每个任务。同时，我们可以通过 `xAxis` 设置时间轴，通过 `yAxis` 设置任务名称，最后在 `series` 中进行配置和样式设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kobe_OKOK_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值