曲线救国echarts实现甘特图

需求

需求：根据时间显示不同的工作任务流程进展

大致思路

1. echarts柱状图倒过来
2. 空白时间段可以用堆叠属性实现，stack属性
3. 利用z 、 zlevel属性实现样式压盖等操作，使白色柱状图盖住想要显示的柱状图即可

代码

ganttCharts(id, data) {
      let chart = this.$echarts.init(document.getElementById(id)),
        y = [], // y轴
        series = [], // 数据

      chart.clear()
      // ------- 数据处理 -------
      data.forEach(item => { // 这里做一些数据的处理 
        y.unshift(item.taskName) // y轴数据
      })
      
      chart.setOption({
        backgroundColor: '#fff',
        grid: {
          containLabel: true,
          show: false,
          right: '10%',
          left: '10%',
          bottom: 40,
          top: 90
        },
        xAxis: {
          type: 'time',
          axisLabel: {
            show: true,
            interval: 0
          }
        },
        yAxis: {
          data: y
        },
        tooltip: {
          trigger: 'item',
          formatter: params => {
            let data = params.name
            return `<span>任务名称：${data[0]}</span></br><span>任务状态：${
              this.getColorByState(data[2])[0].name
            }</span></br><span>开始时间：${
              data[3]
            }</span></br><span>结束时间：${data[4]}</span></br><span>用时：${
              data[1]
            }</span>`
          }
        },
        series: [ // 
            {
                name: '',
                type: 'bar',
                stack: 'pile', // 可堆叠放置，两个值必须一样
                zlevel: -1, // 避免白色柱状覆盖x轴线
                z: 3, // 白色柱状条要盖住实际需要显示的柱状条 z值高，在上面
                itemStyle: {
                  normal: {
                    color: 'white' // 这里设置白色，背景也设置成白色
                  }
                },
                data: [new Date(时间戳), new Date(时间戳)] // 这里时间戳对象数组
              },
              {
                type: 'bar',
                stack: 'pile', 
                zlevel: -1, 
                z: 2,
                itemStyle: {
                  borderColor: '#fff', // 覆盖边框
                  borderWidth: 2
                },
                barMaxWidth: 30, //柱图宽度
                data: [new Date(时间戳), new Date(时间戳)] // 这里时间戳对象数组
              }
        ]
      })
    },

效果图