vue 使用echarts 实现甘特图

你可以使用Vue和Echarts来实现甘特图。首先，在`<template>`标签中创建一个包含Echarts图表的`<div>`元素，设置其id属性为"myechart"，并指定其高度和宽度。然后，在`<script>`标签中使用`mounted`钩子函数来初始化图表，使用`this.$echarts.init`方法传入图表容器的id来获取图表实例，并使用`setOption`方法来配置图表的数据和样式。你可以使用`xAxis`和`yAxis`来定义图表的坐标轴，使用`series`来定义图表的数据系列，例如柱状图的数据。在`methods`中，你可以创建`drawEchart`方法来绘制图表。

下面是一个示例代码：

<template>
  <div class="about">
    <h1>This is echarts page</h1>
    <div id="myechart" style="height:500px;width:1000px;"></div>
  </div>
</template>

<script>
export default {
  name: 'MyEchart',
  mounted() {
    this.drawEchart()
  },
  methods: {
    drawEchart() {
      let myechart = this.$echarts.init(document.getElementById("myechart"))
      myechart.setOption({
        title: {
          text: "gant"
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ["pro1", "pro2", "pro3", "pro4", "pro5", "pro6"]
        },
        series: [{
          type: 'bar',
          data: [10, 20, 30, 46, 78, 22]
        }]
      })
    }
  }
}
</script>

如果你想在甘特图中添加更多的数据，可以在`series`中添加多个对象，每个对象表示一个数据系列。例如，你可以添加一个名为"data2"的数据系列，并在其中定义对应的数据。这样就可以实现一个具有多个数据系列的甘特图。

{
  type: 'bar',
  name: 'data2',
  data: [20, 20, 30, 20, 10, 20]
}

以上是一个简单的示例，你可以根据需要修改和扩展代码。希望对你有帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue+echarts画甘特图](https://blog.csdn.net/feinifi/article/details/126687245)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [Vue 中使用 Echarts 实现项目进度甘特图](https://blog.csdn.net/qq_51634332/article/details/120805451)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]