关于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>
问题解决。
