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

最新推荐文章于 2025-09-02 19:48:40 发布

原创最新推荐文章于 2025-09-02 19:48:40 发布 · 827 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue.js #前端

今天在开发数据大屏的时候，碰到个柱状图鼠标经过死活不展示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) {
  }

}

问题完美解决！！