Echarts甘特图

标签：style   http   io   ar   color   os   使用   sp   for   

Echarts原本提供的图形库已经很强大了。

但是无奈，坐标系图形必须要求X,Y轴必须有一个为数字。

最近有个需求是做甘特图。

整了几天，现在把代码发出来分享一下。

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:   ["最高气温"]
 },
 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轴进行了一个别名的命名而已。

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

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

Echarts甘特图

标签：style   http   io   ar   color   os   使用   sp   for   

原文地址：http://my.oschina.net/u/123484/blog/352061