配置项如下
option = {
title: {
text: '项目进度'
},
legend: {
data: ['隐藏','投用','紧急摘除','临时摘除','永久摘除']
},
xAxis: {
type: 'time'
},
yAxis: {
data: ['TT001', 'EE123', 'ABCDEG', 'CCCCCC', '111111']
},
tooltip: {
show :true,
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function(params) {
var res=params[0].name+"</br>"
var date0=params[0].data;
var date1=params[1].data;
var date2=params[2].data;
var date3=params[3].data;
var date4=params[4].data;
date0=date0.getFullYear()+"-"+(date0.getMonth()+1)+"-"+date0.getDate();
date1=date1.getFullYear()+"-"+(date1.getMonth()+1)+"-"+date1.getDate();
date2=date2.getFullYear()+"-"+(date2.getMonth()+1)+"-"+date2.getDate();
date3=date3.getFullYear()+"-"+(date3.getMonth()+1)+"-"+date3.getDate();
date4=date4.getFullYear()+"-"+(date4.getMonth()+1)+"-"+date4.getDate();
res+=params[1].seriesName+": "+date0+" ~ "+date1+"</br>"
res+=params[2].seriesName+": "+date1+" ~ "+date2+"</br>"
res+=params[3].seriesName+": "+date2+" ~ "+date3+"</br>"
res+=params[4].seriesName+": "+date3+" ~ "+date4+"</br>"
return res;
}
},
grid : {
left: '12%',
right: '10%'
},
series: [
{
name: '隐藏',
type: 'bar',
stack: '总量',
barWidth: '20%',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)'
}
},
data: [
new Date("2016/01/01"),
new Date("2016/02/01"),
new Date("2016/01/10"),
new Date("2016/02/10"),
new Date("2016/01/20")
]
},
{
name: '投用',
type: 'bar',
stack: '总量',
barWidth: '20%',
itemStyle: {
normal: {
color: '#25009E',
barBorderRadius: 0,//柱形边框圆角半径,单位px,支持传入数组分别指定柱形4个圆角半径
shadowColor: 'rgba(0, 0, 0, 0)',//阴影颜色。支持的格式同color
shadowBlur: 0//图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
}
},
data: [
new Date("2016/02/01"),
new Date("2016/03/01"),
new Date("2016/02/10"),
new Date("2016/03/20"),
new Date("2016/02/20")
]
},{
name: '紧急摘除',
type: 'bar',
stack: '总量',
barWidth: '20%',
itemStyle: {
normal: {
color: '#25B59E',
barBorderRadius: 0,//柱形边框圆角半径,单位px,支持传入数组分别指定柱形4个圆角半径
shadowColor: 'rgba(0, 0, 0, 0)',//阴影颜色。支持的格式同color
shadowBlur: 0//图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
}
},
data: [
new Date("2016/3/31"),
new Date("2016/4/30"),
new Date("2016/03/10"),
new Date("2016/04/20"),
new Date("2016/03/20")
]
},{
name: '临时摘除',
type: 'bar',
stack: '总量',
barWidth: '20%',
itemStyle: {
normal: {
color: '#BBB59E',
barBorderRadius: 0,//柱形边框圆角半径,单位px,支持传入数组分别指定柱形4个圆角半径
shadowColor: 'rgba(0, 0, 0, 0)',//阴影颜色。支持的格式同color
shadowBlur: 0//图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
}
},
data: [
new Date("2016/5/1"),
new Date("2016/6/30"),
new Date("2016/04/10"),
new Date("2016/05/20"),
new Date("2016/05/20")
]
},{
name: '永久摘除',
type: 'bar',
stack: '总量',
barWidth: '20%',
itemStyle: {
normal: {
color: '#BB009E',
barBorderRadius: 0,//柱形边框圆角半径,单位px,支持传入数组分别指定柱形4个圆角半径
shadowColor: 'rgba(0, 0, 0, 0)',//阴影颜色。支持的格式同color
shadowBlur: 0//图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
}
},
data: [
new Date("2016/7/31"),
new Date("2016/12/30"),
new Date("2016/06/10"),
new Date("2016/06/20"),
new Date("2016/8/20")
]
}
]
};