ECharts 实现甘特图实例（自定义生成）

最新推荐文章于 2024-07-22 14:38:59 发布

life is strange_

最新推荐文章于 2024-07-22 14:38:59 发布

阅读量8.3k

点赞数 3

分类专栏：【web开发】文章标签：研发 web echarts3-0 js 前端

本文链接：https://blog.csdn.net/qq229466182/article/details/77720453

版权

在公司OA系统中，为了展示项目组在特定时间段内的研发进度，需要实现一个甘特图功能。该图根据用户输入的时间段和项目组，从数据库中检索相关项目，并在x轴上以时间刻度表示这些项目的进度，保持七个刻度间距不变。通过ECharts库，成功实现了这一需求并展示了预期效果。

摘要由CSDN通过智能技术生成

需求:公司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"></

最低0.47元/天解锁文章

life is strange_

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
ECharts 实现甘特图实例（自定义生成）

需求:公司OA，要求根据用户输入的时间段和项目组生成该项目组这段时间研发进度的甘特图效果：描述: 甘特图y轴是根据搜索条件（时间段和研发组）查询数据库，查询这段时间该项目组研发的项目，x轴根据时间段生成刻度间距，但保持为七个刻度。代码：<html lang="en"><head> <meta charset="UTF-8"> <title>Title</ti
复制链接

扫一扫

专栏目录