vue中使用ecarts的y轴为name，x轴为时间的甘特图的示例代码

以下是一个在Vue中使用ECharts的甘特图的示例代码，其中Y轴为名称，X轴为时间：

<template>
  <div>
    <v-chart :options="ganttOption" :data="ganttData"></v-chart>
  </div>
</template>

<script>
import ECharts from 'vue-echarts/components/ECharts.vue'

export default {
  components: {
    'v-chart': ECharts
  },
  data() {
    return {
      ganttData: [
        {
          name: '任务1',
          start: '2022-01-01',
          end: '2022-01-05',
          y: '分类1'
        },
        {
          name: '任务2',
          start: '2022-01-03',
          end: '2022-01-08',
          y: '分类2'
        },
        {
          name: '任务3',
          start: '2022-01-06',
          end: '2022-01-10',
          y: '分类1'
        }
      ],
      ganttOption: {
        tooltip: {
          formatter: function (params) {
            var res = params.name + '<br/>'
            res += '起始时间 : ' + params.start + '<br/>'
            res += '结束时间 : ' + params.end
            return res
          }
        },
        grid: {
          top: 10,
          left: 80,
          right: 50,
          bottom: 10,
          containLabel: true
        },
        xAxis: {
          type: 'time',
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          data: ['分类1', '分类2']
        },
        series: [
          {
            type: 'bar',
            data: this.ganttData.map(function (item) {
              return {
                name: item.name,
                value: [
                  item.start,
                  item.end,
                  item.y
                ]
              }
            })
          }
        ]
      }
    }
  }
}
</script>

<style>
/* 可以在这里添加样式 */
</style>

在上面的示例代码中，我们在data中定义了一个ganttData数组，数组中包含了三个任务的数据，每个任务都有名称、起始时间、结束时间和Y轴分类。然后，在ganttOption中定义了ECharts的配置对象，其中Y轴的数据使用了静态数据，如果数据是动态的，可以通过计算属性或异步加载来获得。在series中，我们使用了条形图来表示甘特图，并将任务的起始时间、结束时间和Y轴分类设置为value值。最后，在Vue组件中使用ECharts组件，并将ECharts配置对象和甘特图数据传递给ECharts组件即可。