echarts实现项目进度甘特图

描述

echarts并无甘特图配置项,我们可以使用柱状图模拟,具体配置项如下,可以在echarts直接运行

javascript 复制代码
var option = {
    backgroundColor: "#fff",
    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.substring(start, end) + "\n";
                        last += temp; //凭借最终的字符串
                    }
                    return last;
                } else {
                    return value;
                }
            }
        },
        data: ["项目一", "项目二", "项目三"]
    },
    tooltip: {
        trigger: "axis",
        formatter: function(params) {
            var res = "";
            var name = "";
            var start0 = "";
            var start = "";
            var end0 = "";
            var end = "";
            for (var i in params) {
                var k = i % 2;
                if (!k) { //偶数
                    start0 = params[i].data;
                    console.log(start0)
                    start = start0.getFullYear() + "-" + (start0.getMonth() + 1) + "-" + start0.getDate();
                }
                if (k) { //奇数
                    name = params[i].seriesName;
                    end0 = params[i].data;
                    end = end0.getFullYear() + "-" + (end0.getMonth() + 1) + "-" + end0.getDate();
                    res += name + " : " + start + "~" + end + "</br>";

                }
            }
            return res;
        }
    },
    series: [{
            name: "计划时间",
            type: "bar",
            stack: "总量0",
            label: {
                normal: {
                    show: true,
                    color: "#000",
                    position: "right",
                    formatter: function(params) {
                        return params.seriesName
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: "skyblue",
                    borderColor: "#fff",
                    borderWidth: 2
                }
            },
            zlevel: -1,
            data: [new Date("2018-05-01"), new Date("2018-03-14"), new Date("2018-05-01")]
        },
        {
            name: "计划时间",
            type: "bar",
            stack: "总量0",
            itemStyle: {
                normal: {
                    color: "white",
                }
            },
            zlevel: -1,
            z: 3,
            data: [new Date("2018-01-01"), new Date("2018-01-30"), new Date("2018-03-15")]
        },
       
       
      
      
    
        {
            name: "实际时间",
            type: "bar",
            stack: "总量6",
            label: {
                normal: {
                    show: true,
                    color: "#000",
                    position: "right",
                    formatter: function(params) {
                        return params.seriesName
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: 'orange',
                    borderColor: "#fff",
                    borderWidth: 2
                }
            },
            zlevel: -1,
            data: [new Date("2018-03-30"), new Date("2018-03-13"), new Date("2018-10-30")]
        },
        {
            name: "实际时间",
            type: "bar",
            stack: "总量6",
            itemStyle: {
                normal: {
                    color: 'white',
                }
            },
            zlevel: -1,
            z: 3,
            data: [new Date("2018-01-01"), new Date("2018-02-16"), new Date("2018-03-30")]
        },
    ]
}

进阶优化

添加警告标识以及文字叙述

javascript 复制代码
var option = {
    backgroundColor: "#fff",
    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.substring(start, end) + "\n";
                        last += temp; //凭借最终的字符串
                    }
                    return last;
                } else {
                    return value;
                }
            }
        },
        data: ["项目一", "项目二", "项目三"]
    },
    tooltip: {
        trigger: "axis",
        formatter: function(params) {
            var res = "";
            var name = "";
            var start0 = "";
            var start = "";
            var end0 = "";
            var end = "";
            for (var i in params) {
                var k = i % 2;
                if (!k) { //偶数
                    start0 = params[i].data;
                    console.log(start0)
                    start = start0.getFullYear() + "-" + (start0.getMonth() + 1) + "-" + start0.getDate();
                }
                if (k) { //奇数
                    name = params[i].seriesName;
                    end0 = params[i].data;
                    end = end0.getFullYear() + "-" + (end0.getMonth() + 1) + "-" + end0.getDate();
                    res += name + " : " + start + "~" + end + "</br>";

                }
            }
            return res;
        }
    },
    series: [{
            name: "计划时间",
            type: "bar",
            stack: "总量0",
            label: {
                normal: {
                    show: true,
                    color: "#000",
                    position: "right",
                    formatter: function(params) {
                        return params.seriesName
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: "skyblue",
                    borderColor: "#fff",
                    borderWidth: 2
                }
            },
            zlevel: -1,
            data: [new Date("2018-05-01"), new Date("2018-03-14"), new Date("2018-05-01")]
        },
        {
            name: "计划时间",
            type: "bar",
            stack: "总量0",
            itemStyle: {
                normal: {
                    color: "white",
                }
            },
            zlevel: -1,
            z: 3,
            data: [new Date("2018-01-01"), new Date("2018-01-30"), new Date("2018-03-15")]
        },
       
       
      
      
    
        {
            name: "实际时间",
            type: "bar",
            stack: "总量6",
            label: {
                normal: {
                    show: true,
                    color: "#000",
                    position: "right",
                    offset:[20,0],
                    formatter: function(params) {
                        return params.seriesName
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: 'orange',
                    borderColor: "#fff",
                    borderWidth: 2
                }
            },
            zlevel: -1,
            data: [new Date("2018-03-30"), new Date("2018-03-13"), new Date("2018-10-30")],
            markPoint:{
              data:[{coord:[new Date("2018-10-30"),"项目三"]}],
              symbol:'circle',
              symbolSize:'14',
              animation:true,
              symbolOffset:[10,0],
              itemStyle:{
                color:'#fd9494'
              },
              emphasis:{
                disabled:false,
                label:{
                  show:true,
                  color:"#fff",
                  backgroundColor:"#061234",
                  borderWidth:1,
                  padding:[6,8,6,8],
                  offset:[20,60],
                  align:'center',
                  formatter:"{name|延迟完成}\n\n  {desc|预算不够:桥梁材料不够}",
                  rich:{
                    name:{
                      color:"#c4d1fb",
                      fontSize:12,
                      padding:[0,0,-2,4],
                      align:'center',
                      
                    },
                    desc:{
                      color:"#ffdd50",
                      fontSize:10
                    }
                  }
                  
                }
              }
            }
        },
        {
            name: "实际时间",
            type: "bar",
            stack: "总量6",
            itemStyle: {
                normal: {
                    color: 'white',
                }
            },
            zlevel: -1,
            z: 3,
            data: [new Date("2018-01-01"), new Date("2018-02-16"), new Date("2018-03-30")]
        },
    ]
}
相关推荐
Mr_Mao4 小时前
Naive Ultra:中后台 Naive UI 增强组件库
前端
前端小趴菜055 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~6 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.7 小时前
serviceWorker缓存资源
前端
RadiumAg8 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo8 小时前
ES6笔记2
开发语言·前端·javascript
yanlele8 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子9 小时前
React状态管理最佳实践
前端
烛阴10 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子10 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端