由于业务的需要，在echarts基础上，二次封装了甘特图组件来满足业务的需要。

先看效果

无文字甘特图

有文字甘特图

技术实现

直接上代码，组件封装
placeholder-bar.vue

<template>
  <div>
    <div :id="idKey" class="placeholder-bar-box" />
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Index',
  props: {
    idKey: {
      type: String,
      default: 'placeholder-bar'
    },
    dataList: {
      type: Array,
      default: () => []
    },
    xData: {
      type: Array,
      default: () => []
    },
    yData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      myChart: ''
    }
  },
  computed: {
    option() {
      const colors = ['#0F62FE', '#0F62FE', '#0F62FE', '#0F62FE']

      return {
        color: colors,
        tooltip: {
          formatter: function(params) {
            return params.name + ':' + params.value[1] + '~' + params.value[2]
          }
        },
        grid: {
          left: '3%',
          right: '3%',
          top: '6%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xData || ['2022-06-15', '2022-06-18', '2022-06-20', '2022-06-25', '2022-07-01', '2022-08-25', '2022-11-14', '2022-12-13'],
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLabel: {
            formatter: (value) => {
              const max = 10 
              const val = value.length 
              const rowM = Math.ceil(val / max) 
              if (rowM > 1) {
                let temp = ''
                const end = val 
                temp = value.substring(0, max) + '\n' + value.substring(max, end)
                return temp
              } else {
                return value
              }
            }
          }
        },
        yAxis: {
          data: this.yData || ['测试1', '测试2', '测试3', '测试4']
        },
        series: [
          {
            type: 'custom',
            renderItem: function(params, api) {
              var categoryIndex = api.value(0)
              var start = api.coord([api.value(1), categoryIndex])
              var end = api.coord([api.value(2), categoryIndex])
              var height = 5
              return {
                type: 'rect',
                shape: echarts.graphic.clipRectByRect({
                  x: start[0],
                  y: start[1] - height / 2,
                  width: end[0] - start[0],
                  height: height
                }, {
                  x: params.coordSys.x,
                  y: params.coordSys.y,
                  width: params.coordSys.width,
                  height: params.coordSys.height
                }),
                style: api.style()
              }
            },
            encode: {
              x: [1, 2],
              y: 0
            },
            data: this.dataList
          }
        ]
      }
    }
  },
  watch: {
    dataList: {
      handler(newName, oldName) {
        this.$nextTick(() => {
          this.updata()
        })
      },
      deep: true
    }
  },
  mounted() {
    const chartDom = document.getElementById(this.idKey)
    const myChart = echarts.init(chartDom)
    this.myChart = myChart
    const myObserver = new ResizeObserver(entry => {
      this.myChart && this.myChart.resize()
    })
    // 添加要监听的元素，把echart的container div添加为监听对象
    myObserver.observe(chartDom)
    window.addEventListener('resize', () => {
      this.resize()
    })
  },
  destroyed() {
    window.removeEventListener('resize', () => {
    })
  },
  methods: {
    resize() {
      this.myChart.resize()
    },
    updata() {
      this.onPlaceholderBarData()
      this.resize()
    },
    onPlaceholderBarData() {
      this.option && this.myChart.setOption(this.option)
      this.myChart.hideLoading()
    }
  }
}
</script>

<style lang="scss" scoped>

.placeholder-bar-box {
  width: 100%;
  height: 100%;
}

</style>

组件对外提供的参数
1、idKey:唯一标识ID
2、dataList:[] 需要的数据
数据格式：

[
    {
                itemStyle: { normal: { color: '#0F62FE' }}, // 条形颜色
                name: 测试,
                value: [0，2022-02-02,2022-03-02]// 0,1,2代表y轴的索引，后两位代表x轴数据开始和结束
              }
]

3、xData：X坐标数据
4、yData：Y坐标数据

使用说明

引入组件
import placeholderBar from '@/views/common/placeholder-bar'

<placeholderBar ref="placeholderBarRef" :x-data="xData" :y-data="yData" style="width: 100%;height: 250px" :data-list="placeholderBarData" />

需要文字填充

修改renderItem
思路：用下标记录是否相同Y坐标，如果相同计数取值
（欢迎大家提出不同的解决问题思路）

renderItem: (params, api) => {
              const categoryIndex = api.value(0)
              const start = api.coord([api.value(1), categoryIndex])
              const end = api.coord([api.value(2), categoryIndex])
              const name = this.yData[categoryIndex]
              const list = this.dataList.filter(item => item.name === name)
              const height = 20
              let text = ''
              if (this.indexY === categoryIndex) {
                this.indexItem += 1
                text = list[this.indexItem]?.name2
                if (!text) {
                  this.indexItem = 0
                  text = list[this.indexItem]?.name2
                }
              } else {
                text = list[0]?.name2
                this.indexY = categoryIndex
                this.indexItem = 0
              }
              return {
                type: 'rect',
                shape: echarts.graphic.clipRectByRect({
                  x: start[0],
                  y: start[1] - height / 2,
                  width: end[0] - start[0],
                  height: height
                }, {
                  x: params.coordSys.x,
                  y: params.coordSys.y,
                  width: params.coordSys.width,
                  height: params.coordSys.height
                }),
                style: api.style(
                  {
                    text: text,
                    fontSize: '8px',
                    textFill: '#fff'
                  }
                )
              }
            },

这里不在详细介绍每个API的使用了，不懂得可以去官网查看相关API配置。
大家可直接复制代码运行demo吧，多看文档多动手尝试，可解决一切问题。