vue3使用Eachart图表库踩坑记录

前言

大家好我是没钱的君子下流坯，用自己的话解释自己的知识。很久很更新了，最近一直在加班，今天记录一个eachar图表报警告说过去不到当前DOM节点的宽高导致页面中的图表宽高不正确的坑。

案例

在这里插入图片描述
就是一些基础的图形的使用，一个后台的管理系统使用的技术栈是vue3，我这几张图表放的位置是在好一个 tabs切换栏下面
就是这种切换栏下面有图表。

代码

<template><div class="chart-wrapper" style="height: 400px; width: 100%"><div  ref="chartContainer" class="chart-container" ></div></div>
</template><script setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
import * as echarts from 'echarts';// 定义 props
const { Tindex, chartOption, width, height } = defineProps({chartOption: {type: Object,required: true},width: {type: String,default: '1200px' // 默认宽度},height: {type: String,default: '400px' // 默认高度},Tindex:{type: String,default:'1'}
});const chartContainer = ref(null);
let myChart = null;// 计算图表容器的样式
const chartStyle = computed(() => ({width: props.width,height: props.height
}));// 初始化图表
const initChart = async () => {console.log(Tindex);await nextTick(); if (myChart) {myChart.dispose(); // 销毁旧的图表实例}myChart = echarts.init(chartContainer.value);setChartOption();
};// 设置图表选项
const setChartOption = () => {if (myChart && chartOption) {myChart.setOption(chartOption);}
};// 组件挂载时初始化图表
onMounted(() => {initChart();
});// 当 props.option 发生变化时更新图表
watch(() => chartOption,() => {setChartOption();},{ deep: true }, // 深度监听对象内部属性的变化()=>Tindex
);
</script><style scoped>
.chart-wrapper {width: 100%;height: 400px; /* 确保父容器有明确的高度 */
}.chart-container {width: 100% !important;height: 400px; /* 继承父容器的高度 */
}
</style>

问题

[ECharts]height. Please check dom,clientwidth and dom.clientHeight.Can’t get DoM width oreXamoLe. They should not be 0.you may need to call this in the callback of window.onload
图中大概位置就是说在初始化的时候找不到dom节点，上面的代码大家可以看到已经是我修改的版本但还是有一些问题的，我已经进行了 nextclick的方法去加载dom了，发现还是不行，然后我为了测试我写了一个定时器让eachart延迟加载3秒，发现还是一样的报错，这时候我一直以为是我加载的代码有问题，我就案例放到我自己项目上去运行，但是就不会报错。一样的代码换了一个项目结果一个报错一个不报错，这然我就很疑惑，认真排查了很多遍的代码，然后去问各种gpt给的方法都试了。

解决

1.nextclick的方法去等待dom加载。
2.定时器延迟加载图表。
以上的方法是已经确定能获取到DOm的，这时候我就不知道是什么原因导致获取不到DOM了，然后我就仔细的去F12找元素发现页面上确实没有承载echarts图表的div，我叼了，我明明写了但是为什么元素中找不到呢。
3.问题在于tabs切换栏，我使用的是elementuiplus中的切换栏，因为我的echarts并没有放在第一个tabs切换栏的内容中，在后面的切换栏里面，但是echarts是进入整个页面的时候就加载了，但是tabs栏的位置是在第一个选项的问题，后面的元素都被v-if给销毁节点了，所以找不到DOM节点是正常的。这也证明了elementui-plus的tabs是通过v-if控制显示隐藏的。

解决代码

const initChart = async () => {console.log(Tindex);if(Tindex=='7'){await nextTick(); // 确保 DOM 已更新console.log('我等你三秒')if (myChart) {myChart.dispose(); // 销毁旧的图表实例}myChart = echarts.init(chartContainer.value);setChartOption();}else{console.log("我没进来")}};