在vue3环境下用echarts绘制图形在线上环境中路由切换后echarts图不出现以及tab切换时echarts图

您所在的位置：网站首页 › echarts重新渲染不出来数据 › 在vue3环境下用echarts绘制图形在线上环境中路由切换后echarts图不出现以及tab切换时echarts图

在vue3环境下用echarts绘制图形在线上环境中路由切换后echarts图不出现以及tab切换时echarts图

2023-10-24 21:36| 来源: 网络整理| 查看: 265

在做echarts饼图和柱形图时：一、线上环境路由切换echarts图无法显示无报错信息

当第一次进入页面时页面渲染echarts出现，第二次进入页面时发现echarts就出现不了了

解决

查看一些文档，有强制刷新的方法，但是在一些条件下还是无法实现。

个人看法：由于echars机制原因再次进入页面创建新的canvas 需要清空之前的echarts图，如果未清除，echarts 就会显示失败

解决：在页面卸载时释放echarts

//vue3写法 const myChart = ref(""); myChart.value = echarts.init(document.getElementById(main.value)); onBeforeUnmount(() => { if (myChart.value) { myChart.value.clear(); //清空图表 myChart.value.dispose(); //释放图表组件 myChart.value = null; } });

也可以使用下面二方法解决

设置动态id

const main = ref("main" + Date.now() + Math.random()); 二、tab切换时echarts图

存在tab组件在tab组件中 echats无法显示

解决

寻找原委

此bug与一类似，原因为

main 为静态属性 tab切换id = 'main’未改变，因为id为main的echarts图已存在无法再次生成id=main的echarts图,

解决方法：设置动态id 将id通过父组件传递过来，也可以将id设置为随机数

const main = ref("main" + Date.now() + Math.random());

修改之后tab切换，echarts图就会显示(建议：页面卸载时释放echats)

想要学习更多前端知识,可以关注公众号：前端小嘟，里面有小嘟为大家整理的很多学习视频及资料，也可以留言加群，拉你进前端技术交流群，共同学习，相互激励

【本文地址】

在vue3环境下用echarts绘制图形在线上环境中路由切换后echarts图不出现以及tab切换时echarts图

在vue3环境下用echarts绘制图形在线上环境中路由切换后echarts图不出现以及tab切换时echarts图

今日新闻

推荐新闻