解决vue3+echarts关于无法获取dom宽度和高度的问题

在Vue 3中使用ECharts时，如果遇到“无法获取DOM宽度和高度”的问题，通常是因为ECharts实例化的时机不正确或者对应的DOM元素尚未准备好。为了解决这个问题，可以采用以下步骤：

1. 确保ECharts的初始化在DOM元素准备好之后。可以使用Vue的ref属性来获取DOM元素，并在onMounted生命周期钩子中初始化ECharts。
2. 监听窗口大小变化，在窗口大小发生变化时，重新设置ECharts的宽度和高度。

以下是一个简单的示例代码：

<template>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>
 
<script setup>
import { onMounted, ref, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts';
 
const chartContainer = ref(null);
let myChart = null;
 
onMounted(() => {
  myChart = echarts.init(chartContainer.value);
  myChart.setOption({
    // ECharts 的配置项
  });
 
  // 监听窗口大小变化
  window.addEventListener('resize', resizeChart);
});
 
onUnmounted(() => {
  // 清理操作
  window.removeEventListener('resize', resizeChart);
  myChart && myChart.dispose();
});
 
function resizeChart() {
  myChart && myChart.resize();
}
 
// 监听容器大小变化
watch(chartContainer, (newContainer, oldContainer) => {
  if (newContainer && newContainer !== oldContainer) {
    resizeChart();
  }
});
</script>

在这个示例中，我们使用了Vue 3的<script setup>语法糖。通过onMounted生命周期钩子初始化ECharts实例，并监听窗口大小变化来适时更新图表的尺寸。同时，使用onUnmounted生命周期钩子来清理工作，如移除窗口的大小变化监听器和释放ECharts实例。