echart Vue3 hover不显示tooltip 解决

原创

于 2025-09-16 14:58:09 发布 · 251 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

问题：在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