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

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

 tooltip: {
     trigger: 'axis'
 }, 

vue3.0 中使用echarts图 tooltip 不显示的问题_第1张图片

// 定义了一个全局的响应式变量,用于接收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()
	}
  })
})

vue3.0 中使用echarts图 tooltip 不显示的问题_第2张图片
搞定!!!

你可能感兴趣的:(vue3,echarts,typescript)