vue3.0 中使用echarts图 tooltip 不显示的问题
问题: 由于我需要在后台数据还没请求回来时,在echarts图上加个加载图标,所以定义了一个 全局变量来接收echarts 实例。之后就发现 option配置了 trigger: ‘axis’,但是 tooltip 显示不出来tooltip: {trigger: 'axis'},// 定义了一个全局的响应式变量,用于接收echarts实例const myChart = ref()onMounted
·
问题: 由于我需要在后台数据还没请求回来时,在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()
}
})
})
搞定!!!
更多推荐
已为社区贡献3条内容
所有评论(0)