首页 前端知识 vue切换页面echarts图表不显示的问题

vue切换页面echarts图表不显示的问题

2024-08-21 22:08:26 前端知识 前端哥 374 514 我要收藏

在vue项目中本地支行echarts运行正常,切到线上环境初始时没有问题但切换页面就会出现echarts图表显示不出来,这个问题只在线上部署的时候出现。目前找到了两个解决方案,做下记录。

方案一

 将echarts图表挂载的div的id改成动态id,确保切换页面时,echarts图表每次都可以重新挂载。

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

方案二

 echarts挂载的dom元素有一个属性:_echarts_instance_,它应该类似id,需要每次刷新重新生成,所以我们每次挂载前都去除这个属性。

 let myEchart = document.getElementById('main');
 myEchart.removeAttribute('_echarts_instance_');
 echarts.init(myEchart).setOption(data.multiple);
以上两个方案都测试可以解决这个问题。
————————————————
 



转载请注明出处或者链接地址:https://www.qianduange.cn//article/16484.html
标签
评论
发布的文章

HTML5入门基础

2024-06-16 09:06:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!