做鉴权操作时,使用了Taro.redirectTo

在做项目过程中,遇到使用Taro.redirectTo重定向的过程中,导致echarts渲染消失;

问题原因:

多个页面都用到echarts组件;Taro重定向时,会生成一个新的组件页面,但我们的echats在上一个组件页面上,本质就是echarts的实例化问题:

首先我们要知道 echarts的渲染逻辑:
echarts实例化过程中,会在 div 容器上生成一个 echarts_instance 属性;该属性值就是当前echarts的实例ID,然后进入后边的渲染操作流程:
当切换路由后回来时, echarts触发init方法重新实例化;此时 和 原先的 指定id 的 div容器 的_echarts_instance_属性值就不匹配了,官方也有说:就是单个div容器上不能初始化多个ECharts实例;所以我们需要 让 指定id 的 div 的_echarts_instance_属性值也要进入一个 初始状态, 即 空状态,然后重新赋予新的值。

说白了,“换汤不换药” 是解决不了问题的

<div id="chartId"  _echarts_instance_="ec_1685679322981">
	……
</div>
解决方案:

1)设置唯一id:

2)监听改变,重新实例化渲染;

参考文档:https://blog.csdn.net/lu1974451304/article/details/127181092(vue)

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐