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