echarts甘特图

工单甘特图

最近项目需要工单的甘特图，所以上echarts官网搜了一遍没有关于甘特图的案例，于是自己动手写了一个甘特图，当然 ，一部分是从各个网站拆分过来的，最后组成了自己的工单甘特图。

写出来后的效果

直接上代码

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <i style="font-size: 20px;">工单甘特图</i>
      <div class="grol">
        <div style="display: inline-block;background: #f6071c;" class="man"></div> 小于3天
        <div style="display: inline-block;background: #faa019" class="man"></div> 小于5天
        <div style="display: inline-block;background: #0aeabc;" class="man"></div> 大于4天
      </div>
    </div>
    <div style="text-align: center">
      <div id="renwu" style="width: 100%;height: 650px">任务进度</div>
    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'TaskProgress',
  data() {
    let projectItem = ['任务一','任务二','任务三','任务四','任务五', '任务六'],
      projectItemStart = ['2021-01-01 12:32:09','2021-01-02 12:32:09','2021-01-10 12:32:09','2021-01-14 12:32:09','2021-01-03 12:32:09','2021-01-18 12:32:09'],
      projectItemEnd = ['2021-01-03 10:32:09','2021-01-12 06:32:09','2021-01-16 16:32:09','2021-01-17 15:32:09','2021-01-09 16:32:09','2021-01-23 18:32:09'];
    let projectItemStartValue = projectItemStart.map((item)=>{
      return new Date(item).valueOf() // 在这把日期转换成数字
    })
    let projectItemDuringValue = projectItemEnd.map((item,i)=>{
      return new Date(item).valueOf()-projectItemStartValue[i]
    })

    let dateMin = projectItemStartValue[0];
    return {
      option3: {

        title: {
          subtext: '任务日期'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            const tar = params[1];
            let start;
            let enDate;
            for (let i=0; i<projectItem.length; i++){
              if (tar.axisValue === projectItem[i]){
                start=projectItemStart[i];
                enDate=projectItemEnd[i];
              }
            }
            return tar.name + '<br/>' +
              tar.seriesName + ' : ' + Math.round(tar.value/(1000*60*60*24))+'天'+'<br/>'+
              '开始：'+start+'<br/>'+
              '结束：'+enDate;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        yAxis: {
          type: 'category',
          splitLine: {
            show: false
          },
          data: projectItem
        },
        xAxis: {
          type: 'value',
          min: dateMin,
          axisLabel: {
            color: '#333', // 坐标轴文字颜色
            formatter: function (param) {
              let date = new Date(param);
              let dateLabel = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate(); //x轴显示的日期格式
              return dateLabel;
            }
          }
        },
        series: [{
          name: 'Placeholder',
          type: 'bar',
          stack: 'Total',
          itemStyle: {
            borderColor: 'transparent',
            color: 'transparent'
          },
          emphasis: {
            itemStyle: {
              borderColor: 'transparent',
              color: 'transparent'
            }
          },
          data: projectItemStartValue
        },
          {
            name: '周期',
            type: 'bar',
            stack: 'Total',
            barWidth: '30%',
            itemStyle:{
              normal: {
                color: function (params) {
                  var dater = params.data/(1000*60*60*24)
                  //自定义颜色
                  let number ;
                  if(dater < 3){
                    number=0
                  }else if (dater < 5){
                    number = 1
                  }else {
                    number=2
                  }
                  const colorList = [
                    '#f6071c', '#faa019', '#0aeabc'
                  ];
                  return colorList[number]
                }
              }
            },
            data: projectItemDuringValue
          }
        ]
      }
    }
  },
      mounted() {
      // 基于准备好的dom，初始化echarts实例
      setTimeout(() => {
        let chartDom = document.getElementById('renwu')
        let myChart = echarts.init(chartDom)
        // 绘制图表
        myChart.setOption(this.option3)
      }, 400)
    }
  }
</script>

<style scoped>
.grol{
  text-align: right;
  float: right;
  margin-right: 10%
}
.man{
  width: 40px;
  height: 17px;
  margin-left: 10px;
}
</style>

有看不懂的可以联系

还是那句话为中华人民服务。

微信：mayir_1