problem description

A novice asks for advice. Echarts is used as a line chart in Vue. The data is transmitted from the background Ajax, but the data is not displayed at all. How is this going on?

the environmental background of the problems and what methods you have tried

the data is transmitted from the background Ajax, and the background interface is written in Django. It is transmitted to the sub-components through props, and the data is also accepted in the sub-group price, but the data is invalid when it is transferred to the data of Echarts?

related codes

<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>

what result do you expect? What is the error message actually seen?

there is no error message, and the normal result is as follows:

: