vue3 echarts tooltip不显示原因
最近在Vue3.x项目中使用ECharts5.x制作统计图表,发现配置一切正常,但是tooltip无论如何就是无法显示,所以排查了下原因,发现在Vue3.x环境下,使用ECharts5.0+会出现该问题。原因是echarts实例不能由Vue来维护(Vue的响应性特性)。
所以将原来的代码:
export default {
data () {
return {
xxxGraph: null
}
},
mounted () {
this.xxxGraph= echarts.init(document.getElementById('xxxGraph'))
}
}
更改为如下代码:
export default {
data () {
this.xxxGraph = null
return {
// ...
}
},
mounted () {
this.xxxGraph= echarts.init(document.getElementById('xxxGraph'))
}
}