关于ECharts甘特图的实现

Posted jane2160

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于ECharts甘特图的实现相关的知识,希望对你有一定的参考价值。

对于使用ECharts图表的步骤,每种图表都是一致的,相信大家也都了解

此处只分享甘特图的option,代码如下:

option: 
        title: 
          text: ‘项目实施进度表‘,
          left: 10
        ,
        legend: 
          y: ‘bottom‘,
          data: [‘计划时间‘, ‘实际时间‘]
        ,
        grid: 
          containLabel: true,
          left: 20
        ,
        xAxis: 
          type: ‘time‘
        ,
        yAxis: 
          data: [‘任务一‘, ‘任务二‘, ‘任务三‘, ‘任务四‘, ‘任务五‘]
        ,
        tooltip: 
          trigger: ‘axis‘,
          formatter: function (params) 
            var res = params[0].name + ‘</br>‘
            var date0 = params[0].data
            var date1 = params[1].data
            var date2 = params[2].data
            var date3 = params[3].data
            date0 = date0.getFullYear() + ‘-‘ + (date0.getMonth() + 1) + ‘-‘ + date0.getDate()
            date1 = date1.getFullYear() + ‘-‘ + (date1.getMonth() + 1) + ‘-‘ + date1.getDate()
            date2 = date2.getFullYear() + ‘-‘ + (date2.getMonth() + 1) + ‘-‘ + date2.getDate()
            date3 = date3.getFullYear() + ‘-‘ + (date3.getMonth() + 1) + ‘-‘ + date3.getDate()
            res += params[0].seriesName + ‘~‘ + params[1].seriesName + ‘:</br>‘ + date0 + ‘~‘ + date1 + ‘</br>‘
            res += params[2].seriesName + ‘~‘ + params[3].seriesName + ‘:</br>‘ + date2 + ‘~‘ + date3 + ‘</br>‘
            console.log(params[0])
            return res
          
        ,
        series: [
          
            name: ‘计划开始时间‘,
            type: ‘bar‘,
            stack: ‘test1‘,
            itemStyle: 
              normal: 
                color: ‘rgba(0,0,0,0)‘
              
            ,
            data: [
              new Date(‘2015/09/2‘),
              new Date(‘2015/09/15‘),
              new Date(‘2015/09/15‘),
              new Date(‘2015/10/03‘),
              new Date(‘2015/10/04‘)
            ]
          ,
          
            name: ‘计划时间‘,
            type: ‘bar‘,
            stack: ‘test1‘,
            itemStyle: 
              normal: 
                color: ‘#F98563‘
              
            ,
            data: [
              new Date(‘2015/09/12‘),
              new Date(‘2015/09/20‘),
              new Date(‘2015/09/25‘),
              new Date(‘2015/10/05‘),
              new Date(‘2015/10/07‘)
            ]
          ,
          
            name: ‘实际开始时间‘,
            type: ‘bar‘,
            stack: ‘test2‘,
            itemStyle: 
              normal: 
                color: ‘rgba(0,0,0,0)‘
              
            ,
            data: [
              new Date(‘2015/09/2‘),
              new Date(‘2015/09/15‘),
              new Date(‘2015/09/15‘),
              new Date(‘2015/10/03‘),
              new Date(‘2015/10/04‘)
            ]
          ,
          
            name: ‘实际时间‘,
            type: ‘bar‘,
            stack: ‘test2‘,
            itemStyle: 
              normal: 
                color: ‘#A2E068‘
              
            ,
            data: [
              new Date(‘2015/09/6‘),
              new Date(‘2015/09/20‘),
              new Date(‘2015/09/27‘),
              new Date(‘2015/10/11‘),
              new Date(‘2015/10/16‘)
            ]
          
        ]
      

注意:若ECharts版本在4.0.2以上,会出现起点从坐标轴开始的问题,建议降低ECharts版本到4.0.2

以上是关于关于ECharts甘特图的实现的主要内容,如果未能解决你的问题,请参考以下文章

vue项目使用Echarts制作项目工期甘特图

基于 ECharts 封装甘特图并实现自动滚屏

echarts vue 甘特图实现

java实现甘特图的2种方法:SwiftGantt和Jfree (转)

vue+echarts画甘特图

vue+echarts画甘特图