Vue3环境下ECharts图表的Tooltip不显示的问题的解决方法

在Vue3项目中使用ECharts5.0制作河流图等，发现官方例子复制进配置，但是tooltip无论如何就是无法显示，而且切换legend图例时也不生效，最后发现是ECharts与Vue的响应性特性存在兼容性问题。

错误：

const chartDom = ref()

正确：

let chartDom: any = null

例：

<script lang="ts" setup>
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onUnmounted,
  watch,
  defineProps,
  defineEmits,
  getCurrentInstance,
  nextTick,
} from "vue";
const { proxy } = getCurrentInstance();
const $echarts = proxy["$echarts"];
const $G6 = proxy["$G6"];
let chart: any = null; // 这里不能用ref()响应式，echart5与vue3会有响应式冲突，导致tooltip不显示
let chartDom: any = null

onMounted(() => {
  nextTick(() => {
    chartDom = document.getElementById("chartId")
    chart = $echarts.init(chartDom);
  });
});

onUnmounted(() => {
  if (chart) {
    chart.dispose();
    chart = null;
  }
});
</script>

参考：
Vue3环境下ECharts图表的Tooltip不显示的问题的解决方法_echarts tooltip不显示_无枫丶的博客-CSDN博客