vue前端有数据，但是eharts图标不显示的问题（已解决）

问题描述

vue前端能够获取到array数据，模式如图：

echarts图表不能显示数据；

问题解决

原来是异步数据加载的问题，这会与之前得同步数据得加载有点儿不同，我一开始为了加强灵活性，就直接将获取SpringBoot数据和创建图表分别封装在两个方法里面，这也是导致图标渲染失败得主要原因；

看网上是有两种解决方法，第一种，就是将两部分合并到一个方法里面加载就能实现：

<template>
  <div class="Echarts">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
export default {
  data(){
    return{
      allData:{},
      xData:[],
      yData:[],
    }
  },
  mounted() {
    this.getHou();
  },
  created() {
    this.getHou();
  },
  methods:{
    //定义get后端数据方法
    getHou(){
      axios.get('http://localhost:8181/student/getAll').then(Response=>{
        this.allData=Response.data;
        console.log(Response.data);
        console.log(this.allData);

        //为数组赋值
        for(var i=0;i<Response.data.length;i++){
          this.xData.push(this.allData[i].name);
          this.yData[i]=this.allData[i].age;
        }

        console.log("x  "+this.xData);

        console.log("y  "+this.yData);

        var array=[1,2,3,4,5,6]
        console.log(array)

        var chartDom=document.getElementById('main');

        var myChart=echarts.init(chartDom);

        var option={
          xAxis:{
            name:"姓名",
            data:this.xData
          },
          yAxis:{
            name:"年龄",
            type:'value'
          },
          series:[{
            name:'年龄',
            type:'line',
            data: this.yData
          }]
        }
        myChart.setOption(option);
      })
    }
  }

}
</script>

<style>

</style>

第二种嘛，加一个延时：

onMounted(async () => {
    setTimeout(() => {aa()}, 1000)
})

不过这个我没有进行实践，感兴趣的可以自己实践一下~

问题解决：