vue中echarts实现甘特图

vue中使用echarts实现甘特图，在网上找了很多代码都不完整，大家可以试一下我写的这个简单的demo

效果如下：

<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: {
              text: '阶梯瀑布图',
              subtext: 'From ExcelHome',
              sublink: 'http://e.weibo.com/1341556070/Aj1J2x5a5'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              },
              formatter: function (params) {
                var tar;
                if (params[1].value != '-') {
                  tar = params[1];
                }
                else {
                  tar = params[0];
                }
                return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
              }
            },
            legend: {
              data: ['支出', '收入']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            yAxis: {
              type: 'category',
              splitLine: { show: false },
              data: function () {
                var list = [];
                for (var i = 1; i <= 11; i++) {
                  list.push('11月' + i + '日');
                }
                return list;
              }()
            },
            xAxis: {
              type: 'value'
            },
            series: [
              {
                name: '辅助',
                type: 'bar',
                stack: '总量',
                itemStyle: {
                  normal: {
                    barBorderColor: 'rgba(0,0,0,0)',
                    color: 'rgba(0,0,0,0)'
                  },
                  emphasis: {
                    barBorderColor: 'rgba(0,0,0,0)',
                    color: 'rgba(0,0,0,0)'
                  }
                },
                data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292]
              },
              {
                name: '收入',
                type: 'bar',
                stack: '总量',
                label: {
                  normal: {
                    show: true,
                    position: 'top'
                  }
                },
                data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
              },
              {
                name: '支出',
                type: 'bar',
                stack: '总量',
                label: {
                  normal: {
                    show: true,
                    position: 'bottom'
                  }
                },
                data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203]
              }
            ]
          };
          myChart.setOption(option);
        } else {
          console.log('bar_dv为空!');
        }
      }
    }
  }
</script>