Vue3环境下ECharts图表的Tooltip不显示的问题的解决方法

无枫丶2022-12-26 02:21:35

问题描述

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

问题原因

ECharts在Vue3环境下，使用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。