【Vue3】Echarts线上出现页面空白的问题

最新推荐文章于 2025-03-01 16:53:24 发布

Wyliss

最新推荐文章于 2025-03-01 16:53:24 发布

阅读量1.5k

点赞数

分类专栏： vue3.0 文章标签： echarts javascript 前端

本文链接：https://blog.youkuaiyun.com/YhWyl527/article/details/128849708

版权

vue3.0 专栏收录该内容

5 篇文章

订阅专栏

文章讨论了线上环境中元素高度显示异常的问题，特别是在切换统计时。解决方案包括确认高度设置、保证DOM加载后渲染、检查ECharts渲染冲突，以及使用生命变量判断并销毁已有ECharts实例以防止重复初始化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题场景

线下效果无异常线上效果为如图
元素高度均在但是不显示效果
主要出现为切换各个统计时出现
在这里插入图片描述
问题原因
1.需要确定高度是否给上本项目已给
2.需要确定数据与结构加载先后顺序 dom加载完成后再进行渲染
使用proxy.$nextTick
3.确保echarts渲染没有冲突

There is a chart instance already initialized on the dom

看是否有此报错
此报错为已经渲染了一个echart在dom上了
如果出现此报错需要在渲染dom前进行判断如果已经dom上已经有echart了需要先进行销毁

声明全面变量 然后作判断

let chartWeihu //生命变量
const initChart = () => {
  if(chartWeihu != null && chartWeihu != "" && chartWeihu != undefined){ 作判断 如果已存在 
    chartWeihu.dispose(); 进行销毁
  }
  chartWeihu = myEcharts.init( 然后再进行插入echart渲染
    document.getElementById("statelxr"),
    "purple-passion"
  );