echart Vue3 hover不显示tooltip 解决

问题：在echart示例里面编辑是可以正常显示hover数据的，放到项目上就展示hover数据了
解决：barChart 要使用shallowRef
原因：Vue3 底层使用了 proxy 代理创建实例，其创建出来的实例与echarts真正使用的那个存在兼容性问题，所以Echarts 无法从中获取内部变量；故设置echarts实例时，不要使用ref、reactive等响应式方法创建echarts对象，应该使用shallowReactive、shallowRef、或者普通变量

代码：

import { onMounted, reactive, shallowRef } from "vue";
let barChart = shallowRef(null)
const getUserBarChart = () => {
  barChart.value = echarts.init(
    document.getElementById('barChartId')
  )
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      top: 15,
      left: 0,
      data: ['老用户睡眠量', '新用户增长量']
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 50,
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    color: ['#F93920', '#3BB346'],
    series: [
      {
        name: '老用户睡眠量',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130],
        colorBy: 'series'
      },
      {
        name: '新用户增长量',
        type: 'bar',
        colorBy: 'series',
        // emphasis: {
        //   focus: 'series'
        // },
        data: [220, 182, 191, 234, 290, 180, 210.100]
      },
    ]
  };
  barChart.value.setOption(option)
}