vue中使用echarts画折线图，为什么数据不显示？

Question

问题描述

新手求教，Vue中用Echarts做折线图，数据是后台Ajax传过来的，可是数据根本不显示，请问这是怎么回事？

问题出现的环境背景及自己尝试过哪些方法

数据是后台Ajax传过来的，后台接口用Django写的，通过props传给子组件，子组价中也接受得到数据，可是传到Echarts的data中数据就失效了？

相关代码

<template>
    <div id="chart" style="height:400px;width:100%;"></div>
</template>

<script>
export default {
  props: {
    time: {
      type: Array
    },
    stock: {
      type: Array
    }
  },
  data: function () {
    return {
      myChart: '',
      option: {
        title: {
          text: '库存变化表'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.time
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 件'
          },
          axisPointer: {
            snap: true
          }
        },
        series: [
          {
            name: '库存',
            type: 'line',
            color: 'green',
            smooth: true,
            data: this.stock
          }
        ]
      }
    }
  },
  created () {
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine: function () {
      this.myChart = this.$echarts.init(document.getElementById('chart'))
      this.myChart.setOption(this.option)
    }
  }
}
</script>

你期待的结果是什么？实际看到的错误信息又是什么？

没有任何报错信息,正常结果是这样的：

页面刷新后：

Answer 1

这个组件在执行mounted()的时候可能ajax还没拿到数据，虽然后面通过props补进来了，但是表单没有刷新。

你可以先在mouted里面把数据log一下，看看那个时候是不是已经拿到数据了

1. 父组件在子组件的标签上用v-if="this.time.length" ,之类的处理，等数据到了再渲染
2. 子组件里面用watch监听一下props的变化，有变化就调用一下this.drawLine()重绘一下
3. 或者一些其他的类似方法

Answer 2

已解决，我把绘图方法放到axios回调函数里就可以了。