问题描述

         最近在Vue3项目中使用ECharts5.0制作统计图表,发现配置一切正常,但是tooltip无论如何就是无法显示,所以排查了下原因,发现是ECharts与Vue的响应性特性存在兼容性问题。

问题原因

EChartsVue3环境下,使用ECharts5.0+版本会出现该问题。原因是echarts实例不能由Vue来维护(Vue的响应性特性)。

问题解决

所以将原来的代码:

其中,xxxGraph字段为ECharts的示例,目前他位于 data() 的 return 中,由Vue来进行响应性维护。

export default {
  data () {
    return {
      xxxGraph: null
    }
  },
  mounted () {
    this.xxxGraph = echarts.init(document.getElementById('xxxGraph'))
  }
}

更改为如下代码:

其中,xxxGraph字段为ECharts的示例,目前它位于 data() 中,但位于return外,这时xxxGraph不会具备Vue的响应性特性。

export default {
  data () {
    this.xxxGraph = null
    return {
        // ...
    }
  },
  mounted () {
    this.xxxGraph= echarts.init(document.getElementById('xxxGraph'))
  }
}

        按照如上方法更改后,可以刷新页面尝试一下看看是否可以正常显示tooltip了。

        在Vue3.0版本中,只要你确保你的echarts实例不是响应式的,那么tooltip就可以正常显示,目前暂时没有发现在Vue3.0环境中,由于响应性实例对象带来的其他问题。理论上通过该方法均可以进行解决。

        之前在Vue2.0版本中,使用相同版本的ECharts,并没有出现该问题,可能是我的ECharts版本没有适配Vue3.0的原因吧,暂时没有尝试更新ECharts版本,先按照本文的代码修改了。后续有时间的话会尝试下新版本的ECharts在Vue3.0版本中是否可以按照正常写法成功显示tooltip。

        如果有其他问题,可以在评论区留言。

Logo

前往低代码交流专区

更多推荐