V-chart无法显示从后端传来的数据

Question

问题描述

前端使用的Vue框架
我在父组件中调用后端的接口 并将值通过props传到子组件中 子组件接收之后使用vcharts进行图表显示的时候图标不渲染？

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
这是子组件的部分 父组件传递过来一个对象数组

<template>
  <div>
    <!-- :loading="false" 设置是否显示加载动画-->
    <ve-line :data="chartData" :settings="chartSettings" width="700px" height="300px" :loading="heroData.length===0"></ve-line>
  </div>
 
</template>
 
<script>
// v-charts 需要先安装echarts才能用
import VeLine from 'v-charts/lib/line.common'
import 'v-charts/lib/style.css'
export default {
  components: { VeLine },
  props:{
    heroData:{
      type:Array
    }
  },
  data () {
    this.chartSettings = {
        label: {
        normal: { show: true }
      }
    }
    return {
        chartData: {
        columns: ["level","ATK","HP"],
        rows: this.heroData
      }
    }
  },
  methods:{
  },
  computed:{

  },
  created(){
  },

}
</script>

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

请问如何才能正确显示？