Echarts甘特图

2019独角兽企业重金招聘Python工程师标准>>>

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轴进行了一个别名的命名而已。

给大家参考一下，也希望有好的建议可以提出来，便于改进。

最后，感谢@麻小北 的关注

转载于:https://my.oschina.net/u/123484/blog/352061