关于echarts无法在mounted中渲染的问题

最初实现：

echarts图标被单独作为一个组件引入，通过传入数据来显示。

 <div class="echart">

          <div class="echarts-cont">

            <Charts

              :dataList="list"

              :total="total"

            ></Charts>

          </div>

echarts组件代码：

export default {

  name: "quotoEcharts",

  components: {},

  props: {

    dataList: {

      type: Array,

      default: () => {

        return []

      }

    },

    total: {

      type: [Number, String],

      default: 0

    },

  },

  data() {

    return {

    };

  },

  computed: {},

  created() { },

  mounted() {

    this.$nextTick(() => {

      this.echartsInit()

      console.log("total:", this.total)

      console.log("dataList:", this.dataList)

    })

 

  },

发现mounted中打印dataList和total根本就是空的，难道数据没有传过来？因为数据是通过ajax请求获取的，而组件的加载是走的生命周期函数式同步行为。所有子组件echats在mounted里没有数据

解决思路：

让子组件echats.vue在数据加载完成以后出现。也就能保证echrats里mounted生命周期里一定有数据。所以解决思路：

<div class="echart">

          <div class="echarts-cont">

            <Charts

              v-if="list.length>0"   //注意这里list.length>0

              :dataList="list"

              :total="total"

            ></Charts>

          </div>

问题解决。