vue中用echarts实现甘特图

要在Vue中使用ECharts实现甘特图，您需要遵循以下步骤：

1. 安装ECharts

您可以通过npm或yarn安装ECharts：

npm install echarts --save

或

yarn add echarts

2. 导入ECharts

在您的Vue组件中，您需要导入ECharts：

import echarts from 'echarts'

3. 准备数据

您需要准备甘特图的数据，每个数据点包含开始时间、结束时间和名称。

const data = [
  {
    name: '任务1',
    start: '2022-01-01',
    end: '2022-01-05'
  },
  {
    name: '任务2',
    start: '2022-01-06',
    end: '2022-01-10'
  },
  {
    name: '任务3',
    start: '2022-01-11',
    end: '2022-01-15'
  }
]

4. 创建ECharts实例

在Vue组件的mounted方法中，您需要创建ECharts实例并将其挂载到DOM元素上：

mounted() {
  this.chart = echarts.init(this.$refs.chart)
  // ...
}

5. 配置ECharts

在ECharts实例上使用setOption方法，将甘特图的配置传递给它。

mounted() {
  this.chart = echarts.init(this.$refs.chart)

  const option = {
    title: {
      text: '甘特图'
    },
    tooltip: {
      formatter: function (params) {
        return params.marker + params.name + ': ' + params.data.start + ' - ' + params.data.end;
      }
    },
    xAxis: {
      type: 'time',
      splitLine: {
        show: false
      }
    },
    yAxis: {
      data: data.map(item => item.name),
      inverse: true,
      splitLine: {
        show: false
      }
    },
    series: [{
      type: 'custom',
      renderItem: function (params, api) {
        var categoryIndex = api.value(1);
        var start = api.coord([api.value(2), categoryIndex]);
        var end = api.coord([api.value(3), categoryIndex]);
        var height = api.size([0, 1])[1] * 0.6;

        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: [2, 3],
        y: 1,
        tooltip: [2, 3],
        itemName: 0
      },
      data: data.map(item => [item.name, data.indexOf(item), new Date(item.start), new Date(item.end)])
    }]
  }

  this.chart.setOption(option)
}

6. 渲染DOM

将ECharts实例挂载到DOM元素上：

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

这样，您就可以在Vue中使用ECharts实现甘特图了。