echarts实现项目进度甘特图

描述

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

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")]},]
}

进阶优化

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

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")]},]
}