我在这里遇到的echarts初次不渲染问题,是因为在父组件请求到了数据,然后传给echarts子组件所导致的。
这个flow-curve 组件就是封装 echarts 图表的子组件,statisticsData 就是图表所需数据,在父组件中请求获得。
经过陆陆续续的去百度过原因和解决方案。 找到一个亲测有效的就是 v-if 判断, 也就是图片中框出来的。 之前也认为是数据请求和渲染的顺序问题导致。
今天学到了, 这里其实本质是生命周期的问题。
首先复习一下子组件和父组件之间生命周期的先后顺序。
可以看到在父组件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》 包裹。
以上,踩坑记录!!!