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

问题解决。