我在这里遇到的echarts初次不渲染问题，是因为在父组件请求到了数据，然后传给echarts子组件所导致的。

1

这个flow-curve 组件就是封装 echarts 图表的子组件，statisticsData 就是图表所需数据，在父组件中请求获得。

经过陆陆续续的去百度过原因和解决方案。 找到一个亲测有效的就是 v-if 判断， 也就是图片中框出来的。 之前也认为是数据请求和渲染的顺序问题导致。

今天学到了， 这里其实本质是生命周期的问题。 

首先复习一下子组件和父组件之间生命周期的先后顺序。

2

可以看到在父组件mounted之前， 子组件已经挂载完毕， 引入情景就是无论你封装的 echarts子组件的渲染是放在 mounted() 还是 nextTick 中， 此时你父组件中的 mounted() 还未执行【因为我把数据请求都放在mounted中了】，所以此时渲染的 echarts是没有数据的，或者说你传过去的是空的数据， 就算你的options 中存在部分配置，可数据为空， 图表就会是空白，但是其实你去控制台去审查元素， canvas 标签是有的。

综上： 这种情况下你可以 通过 v-if 去判断， 当确实请求到数据，后再去传给子组件后渲染图表。

或者你也可以到 vue3 setup 中直接发请求【vue3 中 setup 所处生命周期为 beforeCreated 和 created 间， 这两个生命周期是位于子组件之前的】 或者 在 vue2  created（） {} 中去发请求， 估计可以不需要 v-if 就可以 渲染出图表。

直接到 vue3 setup 中直接发请求可以成功渲染，不需要v-if，只是组件会需要使用 《suspense》 包裹。

以上，踩坑记录！！！