vue中echarts实现甘特图

最新推荐文章于 2025-03-10 23:49:28 发布

失眠的咕噜

最新推荐文章于 2025-03-10 23:49:28 发布

阅读量1.1w

点赞数 2

分类专栏： echarts 文章标签： vue gantt echarts

本文链接：https://blog.youkuaiyun.com/weixin_44104341/article/details/85238205

版权

本文介绍如何在Vue项目中利用ECharts库创建甘特图。针对网上资料的不完整性，提供了一个从ECharts官网修改而来的完整阶梯瀑布图示例，帮助开发者实现所需效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中使用echarts实现甘特图，在网上找了很多代码都不完整，大家可以尝试下面这个从官网搬运过来的阶梯瀑布图，做了小更改

效果如下：

<template>
 <div id="myChart" ref="chart" ></div>
</template>
<script>
  export default {
  updated(){
      this.changeView();
    },
    methods: {
      drawLine () {
        // 基于准备好的dom，初始化echarts实例
        // var bar_dv = document.getElementById('bar_dv');
        var barDv = this.$refs.chart;
        if (barDv) {
          console.log('bar_dv不为空');
          let myChart = this.$echarts.init(barDv)
          // 基于准备好的dom，初始化echarts实例
          // let myChart = this.$echarts.init(document.getElementById('myChart'))
          // 绘制图表
          var option = {
            title: