VUE3 Echarts柱状图无法显示Tooltip提示框的问题

今天在开发数据大屏的时候，碰到个柱状图鼠标经过死活不展示Tooltip提示框的问题，但柱状图的代码是从别的项目拷贝过来的，所以确定是能正常使用的柱状图

 在网上找了一圈后总算找到了原因，Vue3底层使用了proxy代理创建实例，与Echarts存在兼容性问题。在这种情况下，你需要避免使用ref、reactive等响应式方法创建Echarts对象，而应使用shallowReactive、shallowRef或者普通变量。

而我刚巧在这个新项目中为了方便柱状图的更新渲染，在外层用了ref定义

const barChart = ref(null);
const barChartInit = () => {
  try {
    if (barChart.value) {
      barChart.value.dispose();
    }
    barChart.value = echarts.init(document.getElementById('socialSituationProvinceBarChart'))
    let option = {...};
    barChart.value.setOption(option)
  } catch (error) {
  }

}

 修改定义方式为shallowRef

const barChart = shallowRef(null);
const barChartInit = () => {
  try {
    if (barChart.value) {
      barChart.value.dispose();
    }
    barChart.value = echarts.init(document.getElementById('socialSituationProvinceBarChart'))
    let option = {...};
    barChart.value.setOption(option)
  } catch (error) {
  }

}

问题完美解决！！