echarts图表在切换页面/路由跳转后图表消失问题

最新推荐文章于 2024-05-21 08:43:03 发布

-小C_

最新推荐文章于 2024-05-21 08:43:03 发布

阅读量1k

点赞数 4

文章标签： echarts 信息可视化前端

本文链接：https://blog.csdn.net/m0_75107188/article/details/136328628

版权

文章讲述了在使用ECharts进行数据可视化时，图表在页面切换后消失的问题。原因在于_echarts_instance_属性未更新，导致图表未重新渲染。解决方案是实例化后将_echarts_instance_属性置空，确保页面切换时图表能正确渲染。

摘要由CSDN通过智能技术生成

问题：点击进入数据可视化页面echarts图表可以正常展示，在进行切换页面后，图表消失
解决过程：
1.在画图表时，会进行实例化，找到目标id的div容器，当前容器会自动生成_echarts_instance_属性，此属性为当前图表的标识符，echarts图表和div都会有此属性并且值相等
2.再进行渲染操作时，此属性的值会存在，例如
<div id="checkRoundEcharts" data-v-d4765cbb="" _echarts_instance_="ec_1709027137546" style="width: 100%; height: 100%;.......></div>
3.页面切换时，回到echarts图表页面后，echarts会通过对比_echarts_instance_的值和div的_echarts_instance_属性值是否相等进行判断是否重新渲染，相等则不渲染，不相等则渲染
4.当前问题的出现是因为echarts图表在实例化时，div有了和echarts图表相等的_echarts_instance_属性值，在来回切换时此属性值未改变，一直相等，所以没有重新渲染，造成了图表消失的结果
5.根据此属性解决当前问题，实例化后将该属性值置空，在echarts图表切换回来后进行对比时不相等则会重新渲染图表。
解决结果：

<div id="checkRoundEcharts" :style="{ width: '100%', height: '100%' }"></div>

const initRoundChart = ()=>{
    chart2 = pcEcharts.init(document.getElementById("checkRoundEcharts"));
    chart2.setOption(state.roundOption);
    document.getElementById('checkRoundEcharts').setAttribute('_echarts_instance_', '');
}

// 挂载时初始化图表
onMounted(() => {
    initRoundChart()
});

此解决办法是来源于这个博主的文章的~