Vue3 ECharts Uncaught(in promise)Error: Initialize failed: invalid dom.at Module.init2(echarts.js:22

Vue3 ECharts 初始化获取dom节点报错的问题

前言

        一开始使用的根据ID获取节点，无论是使用onMouted，还是nextTick，甚至是onMouted + nextTick，都获取不到dom节点，使用ref即可

报错

Uncaught(in promise)Error: Initialize failed: invalid dom.at Module.init2(echarts.js:2273:15)

报错代码

<div id="main" style="width: 100%; height: 100%"></div>


onMounted(() => {
  nextTick(() => {
	let chartDom = document.getElementById('main');
	console.log('chartDom', chartDom); // null
  });
});

正确

myChart ECharts2 {_$eventProcessor: ECEventProcessor2, _chartsViews: Array(0), _chartsMap: {…}, _componentsViews: Array(0), _componentsMap: {…}, …}

正确代码

<div  ref="chartNode" style="width: 100%; height: 100%"></div>

const chartNode = ref(null);

let myChart = echarts.init(chartNode.value);
console.log('myChart', myChart); // myChart ECharts2 {_$eventProcessor: ECEventProcessor2, _chartsViews: Array(0), _chartsMap: {…}, _componentsViews: Array(0), _componentsMap: {…}, …}

 欢迎扫描下方二维码关注VX公众号