echarts实现的甘特图数据显示和日期没对上,为什么柱状条没错开???问题出在哪?

坚默不语hj 发布于 2018/08/13 15:14
阅读 1K+
收藏 0

这是echarts样例上代码:

option = {
    title: {
        text: '项目实施进度表',
        left: 10
    },
    legend: {
        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"),
                new Date("2015/10/05"),
                new Date("2015/10/06")
            ]
        },
        {
            name: '计划完成时间',
            type: 'bar',
            stack: 'test1',
            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"),
                new Date("2015/10/09"),
                new Date("2015/10/12")
            ]
        },
        {
            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"),
                new Date("2015/10/05"),
                new Date("2015/10/06")
            ]
        },
        {
            name: '实际完成时间',
            type: 'bar',
            stack: 'test2',
            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"),
                new Date("2015/10/18"),
                new Date("2015/10/17")
            ]
        }
    ]
}

理想实现应该这样:

可以是我实际实现是这样:

不知道哪里产生了偏差

以下是我放到jsp的代码;

<script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
                 title : {
                     text: '甘特图',
                     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]
                  }
                 ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

 

加载中
0
坚默不语hj
坚默不语hj

我想问的是柱状条为什么没有错开

0
靠谱aa

问题解决了么?

返回顶部
顶部