• vue3 结合 echarts ,图表初始不渲染,当代码改变后才会渲染


    这个一般都是因为你在父组件请求到了 数据,然后传给echarts 子组件所导致的问题

     

     

    这个qreport 组件就是封装 echarts 图表的子组件,reportData 就是图表所需数据,在父组件中onMounted 中请求获得

    其实这个bug困扰我好几次了,也陆陆续续的去百度过原因和解决方案。 最有效的就是 v-if 判断, 也就是 图片中框出来的。 但是原因比较模糊,之前我认为比较合理的就是 数据请求和渲染的顺序问题导致.

    但是今天终于想通了, 这里其实本质是 生命周期的问题。 

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

     

    【图片来自网络】

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

     

     

    综上: 如果 的的情况和上面所述差不多, 那么你可以 通过 v-if 去判断, 当确实请求到数据,后再去传给子组件后渲染图表。

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

     

    欢迎验证后留言!!!

  • 相关阅读:
    【Java】Junit快速入门
    【Redis】Redis Sentinel 哨兵模式搭建
    【Redis】Redis 主从模式搭建
    Android开发过程中的坑及解决方法收录(六)
    杂牌机搞机之旅(一)——获得root权限(刷入magisk)
    Java 学习笔记 泛型
    Java 学习笔记 反射与迭代器
    Java 学习笔记 正则表达式
    Java 学习笔记 执行外部命令 包装类 枚举类型
    IDEA设置显示中文文档API方法说明
  • 原文地址:https://www.cnblogs.com/Hijacku/p/16034667.html
Copyright © 2020-2023  润新知