Vue3 + Echarts集成时柱状图和折线图的tooltip不显示问题

背景介绍

今天在使用echarts绘制一个双图表的数据统计图时候，发现 tooltip 无法显示，经过一番排查，发现是使用上错误导致，如下图所示，鼠标悬浮上不能正确触发tooltip和自定义的 valueFormatter

问题原因

Vue3 底层使用了 proxy 代理创建实例，其创建出来的实例与echarts真正使用的那个存在兼容性问题，所以Echarts 无法从中获取内部变量；故设置echarts实例时，不要使用ref、reactive等响应式方法创建echarts对象，应该使用shallowReactive、shallowRef、或者普通变量即可

示例代码

import {defineComponent, getCurrentInstance, onBeforeUnmount, onMounted, PropType, ref,shallowRef, watch} from 'vue'
import type { Ref } from 'vue'
import * as echarts from "echarts";
import {useI18n} from "vue-i18n";
import {EChartsType} from "echarts/types/dist/echarts";
import {Hos