Echarts原本提供的图形库已经很强大了。
但是无奈,坐标系图形必须要求X,Y轴必须有一个为数字。
最近有个需求是做甘特图。
整了几天,现在把代码发出来分享一下。
option = {
title : {
text: 'test',
x:'center'
},
calculable:false,
tooltip : {
show : true,
axisPointer : {
type : 'shadow'
},
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
},
formatter: function (params) {
return params[1] + '<br/>耗时 : ' + params[2] + '天';
}
},
axis:{
splitLine:{
show:false
},
splitArea:{
show:false
}
},
calculable : true,
yAxis : [{
type:"category",
splitLine:{show:true},
data:["项目确定", "问卷设计", "试访", "问卷确定","实地执行","数据录入","数据分析"]
}],
xAxis : [{
type : 'value',
axisLabel : {
formatter: function (value){
var end_time = 1418428800000;
var start_time = 1417392000000;
var date = new Array();
var i = 1;
while(end_time > start_time){
var date_formatter = new Date(start_time);
var date_time = (date_formatter.getFullYear()+"-"+(date_formatter.getMonth()+1)+"-"+date_formatter.getDate());
date.push(date_time);
start_time = start_time + i*24*60*60*1000;
}
console.log(date);
return date[value*1];
}
},
}],
series : [
{
name:"辅助",
type:"bar",
stack:"总",
itemStyle:{
normal:{
barBorderColor:'rgba(0,0,0,0)',
color:'rgba(0,0,0,0)'
},
emphasis:{
barBorderColor:'rgba(0,0,0,0)',
color:'rgba(0,0,0,0)'
}
},
data:[0,1,2,3,4,5,6]
},
{
name:"项目确定",
type:"bar",
stack:"总",
data:[1,0,0,0,0,0,0]
},
{
name:"问卷设计",
type:"bar",
stack:"总",
data:[0,1,0,0,0,0,0]
},
{
name:"试访",
type:"bar",
stack:"总",
data:[0,0,2,0,0,0,0]
},
{
name:"问卷确定",
type:"bar",
stack:"总",
data:[0,0,0,1,0,0,0]
},
{
name:"实地执行",
type:"bar",
stack:"总",
data:[0,0,0,0,4,0,0]
},
{
name:"数据录入",
type:"bar",
stack:"总",
data:[0,0,0,0,0,1,0]
},
{
name:"数据分析",
type:"bar",
stack:"总",
data:[0,0,0,0,0,0,3]
}
]
};
其实实际原理很简单,使用了formatter属性,给X轴进行了一个别名的命名而已。
给大家参考一下,也希望有好的建议可以提出来,便于改进。
最后,感谢@麻小北 的关注