echarts实现甘特图（项目进度/任务进度）

最新推荐文章于 2025-11-19 16:00:42 发布

原创

最新推荐文章于 2025-11-19 16:00:42 发布 · 1.7w 阅读

104 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

本文介绍使用ECharts实现项目工期的可视化展示，包括计划工期、各阶段进度等关键信息，通过时间轴上的条形图直观呈现项目的整体进度及各阶段的时间分配。

1.先看效果图：

2.代码部分我只贴出来option部分，其余的都是一样的；也可参考官网地址：

https://www.echartsjs.com/examples/zh/index.html#chart-type-bar

https://www.echartsjs.com/zh/option.html#title

var option = {
    backgroundColor: "#fff",
    title: {
        text: "项目工期",
        padding: 20,
        textStyle: {
            fontSize: 17,
            fontWeight: "bolder",
            color: "#333"
        },
        subtextStyle: {
            fontSize: 13,
            fontWeight: "bolder"
        }
    },
    legend: {
        data: ["计划工期", "可行性研究阶段", "初步设计阶段", "施工图设计阶段", "项目实施阶段", "项目验收阶段"],
        align: "right",
        right: 80,
        top: 50
    },
    grid: {
        containLabel: true,
        show: false,
        right: 130,
        left: 40,
        bottom: 40,
        top: 90
    },
    xAxis: {
        type: "time",
        axisLabel: {
            "show": true,
            "interval": 0
        }
    },
    yAxis: {
        axisLabel: {
            show: true,
            interval: 0,
            formatter: function(value, index) {
                var last = ""
                var max = 5;
                var len = value.length;
                var hang = Math.ceil(len / max);
                if (hang > 1) {
                    for (var i = 0; i < hang; i++) {
                        var start = i * max;
                        var end = start + max;
                        var temp = value.subst

最低0.47元/天解锁文章