vue3使用ref获取dom元素渲染echarts

在 Vue3 中，你可以使用 `ref` 和 `nextTick` 来获取 DOM 元素，并结合 ECharts 实现图表的渲染。`ref` 是 Vue 提供的一种响应式数据创建工具，它可以让你创建引用类型的组件属性。

首先，你需要声明一个 `ref` 对象：

import { ref } from 'vue';
const chartRef = ref(null);

然后，在模板中将这个 `ref` 绑定到你想要操作的 DOM 元素上，通常是 `<div>` 或者 ECharts 的容器：

<template>
  <div #chartRef ref="chartRef"></div> <!-- "#chartRef" 是 v-bind的简写 -->
</template>

在 `mounted()` 或者其他生命周期钩子函数里，通过 `nextTick()` 确保 DOM 已经更新完毕再获取 DOM：

export default {
  mounted() {
    this.$nextTick(() => {
      const domNode = this.chartRef.value; // 获取绑定的 DOM 元素
      if (domNode) {
        // 初始化 ECharts
        const echartsInstance = echarts.init(domNode);
        // ... 后续的配置和图表渲染
      }
    });
  },
};

记得在 `beforeDestroy()` 钩子中销毁 ECharts 实例，释放资源：

beforeDestroy() {
  if (this.chartRef.value) {
    this.chartRef.value.dispose(); // 清理 ECharts 实例
  }
}