echarts可视化 axios挂在数据显示不出来，视图也没有

问题遇到的现象和发生背景

img


axios

img


数据的位置

img

问题相关代码，请勿粘贴截图
<!-- 商家销售统计的横向柱状图-->
<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref">
      
    </div>
    
  </div>
</template>

<script>
export default {
   data(){
       return{
         chartInstance:null,
         allData:null
       }
   },
   mounted(){
        this.initChart()
   },
   methods:{
     //初始化echartInstance对象
     initChart(){
       this.chartInstance=this.$echarts.init(this.$refs.seller_ref)
     },
     //获取服务器的数据
     async getData(){
      const { data:ret }=await this.$http.get('seller')
       
       this.allData=ret
       this.updataChart()
     },
     //更新图表
     updataChart(){
       const sellerNames=this.allData.map((item)=>
              item.name
       )
       const sellerValues=this.allData.map((item)=>
              item.value
       )
       const option={
         xAxis:{
           type:'value'
         },
         yAxis:{
           type:'category',
           data:sellerNames
         },
         series:[
           {
             type:'bar',
             data:sellerValues
           }
         ] 
       }
       this.chartInstance.setOption(option)
     }
   }
}
</script>

<style>

</style>
运行结果及报错内容

img


echarts视图也不显示
根据”电商平台数据可视化实时监控系统-Echarts-vue项目综合练习”来写的

我的解答思路和尝试过的方法

自己写入数据也显示不出来视图

我想要达到的结果

如何解决

应该是echarts加载错误，按F12看看报什么错误。

获取数据的方法没有调用，mounted的时候要调用吧

baseUrl加上http://

http://192.168.0.103:8888/api

img

div要设置高度

getDate这个方法没调用

img