利用echart实现各环节进度监控

思路：

利用echart瀑布图，实现计划进度和实际进度的对比，显示差异以及工期。利用甘特图因为时间轴不好调整，并且不好看，所以利用echart布局。

公司只想关注主要环节，希望一屏能够看到想要的信息，所以我想到把时间固定在6-8个区段（因为项目会有延期）。但是时间轴是可以动态生成的。

以下代码可以直接在echart官方的编辑器中运行。赋值接口都已经安排好，想必用过的人应该懂得如何赋值。代码如下：

option = {
    title: {
        text: 'XX合同项目进度表',
        subtext: 'From ExcelHome',

    },
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (params) {
            var data1={'环节一':'2017-11-01','环节二':'2017-11-03','环节三':'2017-11-05','环节四':'2017-11-13'};
            var data2={'环节一':'2017-11-01','环节二':'2017-11-10','环节三':'2017-11-12','环节四':'2017-11-13'};
            var data3={'环节一':'2017-11-01','环节二':'2017-11-03','环节三':'2017-11-05','环节四':'2017-11-14'};
            var data4={'环节一':'2017-11-01','环节二':'2017-11-11','环节三':'2017-11-13','环节四':'2017-11-14'};
            var tar = params[1];
            var tar2 = params[3];
            var planText= "计划时间：" + data1[tar.name]+"~"+data2[tar.name];
            var actualText="实际时间：" + data3[tar.name]+"~"+data4[tar.name];
            return tar.name + '<br/>' + planText+ '<br/>' +actualText+ '<br/>' +  tar.seriesName + ' : ' + tar.value+ '<br/>' +  tar2.seriesName + ' : ' + tar2.value;
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    yAxis: {
        type : 'category',
        splitLine: {show:false},
        data : ['环节一','环节二','环节三','环节四','环节五','环节六','环节六']
    },
    xAxis: {
        type : 'value',
        axisLabel: {
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: 'white',
                        fontSize: 18,
                    },
                    formatter: function(value,i){
                        var data=['2017-11-01','2017-11-11','2017-11-21','2017-12-01','2017-12-11','2017-12-21','2017-12-31','2018-01-10','2017-01-20'];
                        //return value;
                         return data[i];
                    }
                }
    },
    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,  3, 5, 12, 13, 13, 13]
        },
        {
            name: '计划工期',
            type: 'bar',
            stack: '计划',
            label: {
                normal: {
                    show: true,
                    position: 'inside'
                }
            },
            data:[1,7, 7,1,30, 30,37]
        },
              {      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,  3, 5, 13, 14, 14, 14]
        },
        {
            name: '实际工期',
            type: 'bar',
            stack: '实际',
            label: {
                normal: {
                    show: true,
                    position: 'inside'
                }
            },
            data:[1, 9, 8,1,40, 30,36]
        }
    ]
};

实现效果如下：

对于时间轴可以多说一点儿：代码里有如下赋值：

 var data=['2017-11-01','2017-11-11','2017-11-21','2017-12-01','2017-12-11','2017-12-21','2017-12-31','2018-01-10','2017-01-20'];

这段代码可以后台动态赋值，根据工期将开始和结束时间的区段设定好，然后放在这里。就能实现每个项目进度时间轴不一样的效果。