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

• 问题场景

线下效果无异常 线上效果为如图
元素高度均在但是不显示效果
主要出现为切换各个统计时出现

问题原因
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"
  );