用vue2技术写出echarts 甘特图

首先，你需要安装 `echarts` 和 `echarts-gl` 依赖：

npm install echarts echarts-gl --save

然后在 `main.js` 中引入 `echarts`：

import Vue from 'vue'
import echarts from 'echarts'
import 'echarts-gl'

Vue.prototype.$echarts = echarts

接下来，创建一个组件来展示甘特图，例如 `GanttChart.vue`：

<template>
  <div ref="chart" style="height: 500px;"></div>
</template>

<script>
export default {
  name: 'GanttChart',
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  mounted() {
    this.renderChart()
  },
  methods: {
    renderChart() {
      const chartDom = this.$refs.chart
      const myChart = this.$echarts.init(chartDom)

      const option = {
        tooltip: {},
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'category',
          data: this.data.map(item => item.name),
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 10
          }
        },
        series: [
          {
            name: '甘特图',
            type: 'custom',
            renderItem: (params, api) => {
              const categoryIndex = api.value(1)
              const start = api.coord([api.value(0), categoryIndex])
              const end = api.coord([api.value(2), categoryIndex])
              const height = api.size([0, 1])[1] * 0.6
              const rectShape = 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
              })
              return rectShape && {
                type: 'rect',
                shape: rectShape,
                style: api.style()
              }
            },
            data: this.data.map((item, index) => [item.start, index, item.end]),
            itemStyle: {
              opacity: 0.8
            }
          }
        ]
      }

      myChart.setOption(option)
    }
  }
}
</script>

在这个组件中，我们通过 `props` 接收一个 `data` 数组，该数组包含了甘特图的数据。

在 `mounted` 钩子函数中，我们调用 `renderChart` 方法来绘制甘特图。在 `renderChart` 方法中，首先获取到 `chart` 的 DOM 元素，然后通过 `this.$echarts.init` 方法初始化 `echarts` 实例。接着，我们定义了 `option` 对象，该对象包含了甘特图的配置项。

在 `series` 中，我们使用了 `custom` 类型，这个类型可以让我们自定义渲染图表中的每一个数据项。我们通过 `renderItem` 方法来渲染每一个数据项，具体的渲染逻辑可以参考官方文档。

最后，我们通过 `myChart.setOption(option)` 方法来将配置项应用到图表中。