Echarts Gantt Chart

Echarts's original graphics library is already very powerful.

But helpless, the coordinate system graphic must require that the x, Y axis must have a number.

A recent requirement is to do a Gantt chart.

For a few days, now send out the code to share.

option = { title : {     text:  ' Test ',      x: ' Center '  }, calculable:false, tooltip : {      trigger:  ' axis ',     axispointer:{  type :  ' line ',   lineStyle : {    color:  ' #48b ',     width:  2,    type:  ' Solid '   }     } },  legend: {     orient:  ' vertical ',      x: ' Left ',      data:   ["Maximum temperature"] }, calculable : true,  Yaxis : [{  type: "category",   splitline:{show:true},  data:["Project OK",   "Questionnaire Design",  ", " Questionnaire Determination "," field Execution "," Data Entry "," Data Analysis "] }], 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;         }     &nbsP;    console.log (date);         return  date[value*1];       }  }, }], series : [   {   name: "Auxiliary",    type: "Bar",    stack: "Total",    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: "Project OK",    type: "Bar",    stack: "Total",    data:[1,0,0,0,0,0,0]  },  {   name: "Questionnaire Design",    Type: "Bar",    stACK: "Total",    data:[0,1,0,0,0,0,0]  },  {   name: "Trial Visit",    type: "Bar",    stack: "Total",   data:[0,0,2,0,0,0,0]  },   {   name: "Questionnaire Determination",    type: "Bar",    stack: "Total",    data:[0,0,0,1,0,0,0]  },  {   name: "Field Execution",    type: "Bar ",    stack:" Total ",   data:[0,0,0,0,4,0,0]  },  {    name: "Data Entry",    type: "Bar",    stack: "Total",    data:[ 0,0,0,0,0,1,0]  },  {   name: "Data Analysis",    type: "Bar",    stack: "Total",   data:[0,0,0,0,0,0,3]  } ]};

In fact, the actual principle is very simple, using the formatter attribute, to the x-axis of an alias name.

For your reference, but also hope that there are good suggestions can be put forward, easy to improve.

Finally, thanks to the attention @ Hemp Small North

Echarts Gantt Chart