文档章节

Echarts甘特图

诺灬晓月
 诺灬晓月
发布于 2014/12/04 08:50
字数 378
阅读 4474
收藏 10

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

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

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

© 著作权归作者所有

诺灬晓月
粉丝 8
博文 20
码字总数 2067
作品 0
武汉
程序员
私信 提问
加载中

评论(6)

诺灬晓月
诺灬晓月 博主

引用来自“WUBOston”的评论

你好!能不能把你这个甘特图的代码发我一份,后台的数据怎么显示,我怎么显示不了。这个比那些饼图柱状图复杂好多啊

引用来自“诺灬晓月”的评论

数据我也写在代码里了,从73行到114行就是数据显示

引用来自“WUBOston”的评论

这个甘特图是引入那个js啊?line还是bar,我把你的代码放到jsp中就显示不了,放在echarts官网实例上能显示
这是个线图啊。 我写的就是个示例,你把这个当做官网的示例去看,去改动就行了
WUBOston
WUBOston

引用来自“WUBOston”的评论

你好!能不能把你这个甘特图的代码发我一份,后台的数据怎么显示,我怎么显示不了。这个比那些饼图柱状图复杂好多啊

引用来自“诺灬晓月”的评论

数据我也写在代码里了,从73行到114行就是数据显示
这个甘特图是引入那个js啊?line还是bar,我把你的代码放到jsp中就显示不了,放在echarts官网实例上能显示
诺灬晓月
诺灬晓月 博主

引用来自“WUBOston”的评论

你好!能不能把你这个甘特图的代码发我一份,后台的数据怎么显示,我怎么显示不了。这个比那些饼图柱状图复杂好多啊
数据我也写在代码里了,从73行到114行就是数据显示
WUBOston
WUBOston
你好!能不能把你这个甘特图的代码发我一份,后台的数据怎么显示,我怎么显示不了。这个比那些饼图柱状图复杂好多啊
诺灬晓月
诺灬晓月 博主
- -.我这是发现BUG了么?为什么我编辑文章之后评论不见了?@红薯
@麻小北 ,感谢指出错误,已经更改了,因为这个只是个测试的东西,实际放在项目里数据什么都是拼出来的,所以写的比较草率。
比较麻烦的地方并不是X,Y轴互换,难点还是在于X轴的formatter上,是一个想法问题吧,其实写的还并不完善,通用性太差。
麻小北
麻小北
客气了,大家互相学习嘛13,你这个效果正好是x,y轴互换了;
我试了一下,有一个小问题:第26行的冒号是中文的,导致无法运行出结果
echarts甘特图的实现问题

由于项目需要使用甘特图展现设备的运行和停机记录,每条数据都有开始时间和结束时间。选择了很多JS图表组件,amchart、highchart、echarts等,最终决定使用echarts,数据量大时加载速度也很理...

wiseli
2015/04/10
1K
3
echarts作甘特图

我现在要用echarts画一个甘特图,甘特图是这样的,x轴是时间,y轴是项目要经历的过程,现在同时有好几个项目要绘制在一起,且有预期完成时间和实际完成时间,所有项目的时间不冲突 ,我上传了...

米尔小天
2018/08/15
2.2K
0
ECharts 可以用来做甘特图吗?

@Kener-林峰 你好,想跟你请教个问题: 我现在的项目中需要做一个甘特图显示在一个55寸的液晶电视上。ECharts的表现力很好,我很想用它来做甘特图。稍微研究了一下文档,还没找出办法。...

beetle
2014/01/03
2.7K
7
echarts如何实现甘特图?

请问甘特图一般用什么前端技术实现?echarts可以实现吗?有谁做过,有demo更好了。

坚默不语hj
2018/08/13
1K
1
Echarts 甘特图

@Kener-林峰,麻烦你来了 我想用echarts做甘特图, 效果类似于这样 但是我做的时候,不知道series里的data该如何构造。 我目前的效果是 这样。 代码有点乱,测试代码,顺便也贴出来吧。...

诺灬晓月
2014/12/01
6.2K
1

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部