在做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

<div class="echarts" :id="main"></div>

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

二、tab切换时echarts图

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

解决

寻找原委

此bug与一类似，原因为

<div class="echarts" id="main"></div>

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

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

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

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

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