vue3.0 中使用echarts图 tooltip 不显示的问题

最新推荐文章于 2025-07-17 19:12:37 发布

原创最新推荐文章于 2025-07-17 19:12:37 发布 · 7.6k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #typescript

vue3 专栏收录该内容

10 篇文章

订阅专栏

本文解决了在使用ECharts时，因为将实例赋值给响应式变量而导致的Tooltip无法正常显示的问题。通过调整变量类型为普通变量，成功实现了在图表加载过程中显示提示图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题： 由于我需要在后台数据还没请求回来时，在echarts图上加个加载图标，所以定义了一个全局变量来接收echarts 实例。
之后就发现 option配置了 trigger: ‘axis’，但是 tooltip 显示不出来

 tooltip: {
     trigger: 'axis'
 },

请添加图片描述

// 定义了一个全局的响应式变量，用于接收echarts实例
const myChart = ref()

onMounted(() => {
  myChart.value = echarts.init(myLine.value as HTMLElement)
  myChart.value.showLoading()
  myChart.value.setOption(option.value, true)
  
  watch(loading, () => {
    if (loading.value) {
		myChart.value.showLoading()
	} else {
		myChart.value.hideLoading()
	}
  })
})

通过查阅资料，是因为 echarts 实例赋值给 ref 响应式 Proxy对象，导致tooltip不显示

解决办法：要用普通变量来接收 echarts 实例

// 定义普通变量来接收实例
let myChart:any

onMounted(() => {
  myChart= echarts.init(myLine.value as HTMLElement)
  myChart.showLoading()
  myChart.setOption(option.value, true)
  
  watch(loading, () => {
    if (loading.value) {
		myChart.showLoading()
	} else {
		myChart.hideLoading()
	}
  })
})