Echarts甘特圖

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軸進行了一個別名的命名而已。

給你們參考一下，也但願有好的建議能夠提出來，便於改進。

最後，感謝@麻小北 的關注