Vue3 中 echarts 不显示 tooltip 的问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3 中 echarts 不显示 tooltip 的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

近期在项目中需要用到图表类型的数据展示，就想到了用 echarts，项目用的是 Vue3，到官网看文档，一顿捣鼓之后在页面上能正常显示图表，本想着一样按套路去展示更多的图表，不出意外的话指定要出意外，这个时候发现图表的提示框 tooltip 没显示！！经过一番查证，发现原来 echarts 实例在 Vue3 中不能是一个响应式对象，否则提示框会显示不出来，那问题就简单了，只要不是响应式对象不就行了，开搞；

下面列举几个在项目中用到的解决方法，供参考，具体哪一种自行决定：

一、直接定义一个没有响应式的对象

<script setup lang="ts">
import * as echarts from 'echarts';
let instance = null
onMounted(() => {
    instance = echarts.init(echartsRef.value as HTMLElement)
    instance.setOption(option);
})
</script>

echarts tooltip不显示,echarts,前端,vue.js

二、用 shallowRef 来包装对象

如果想要像正常的写法去配置 echarts 也可以，我们用 shallowRef 来定义对象，shallowRef 不会将我们的对象进行深层次的响应式处理，具体看下图：
echarts tooltip不显示,echarts,前端,vue.js

<script setup lang="ts">
import { shallowRef } from 'vue'
import * as echarts from 'echarts';
let instance = shallowRef(null)
onMounted(() => {
    instance.value = echarts.init(echartsRef.value as HTMLElement)
    instance.value.setOption(option);
})
</script>

echarts tooltip不显示,echarts,前端,vue.js

三、markRaw 配合 reactive 使用

如果项目中是集中一个 state 管理，那这个时候可以搭配 markRaw 来使用，将 echarts 实例标记成一个不可被转为代理的对象，具体代码如下：

<script setup lang="ts">
import { reactive, markRaw } from 'vue'
import * as echarts from 'echarts';
let state = reactive({
    instance: null,
})
onMounted(() => {
    state.instance = markRaw(echarts.init(echartsRef.value as HTMLElement))
    state.instance.setOption(option);
})
</script>

echarts tooltip不显示,echarts,前端,vue.js

以上便是解决在 Vue3 中 echarts 提示框不显示的问题，另外，笔者在开发的过程中发现了一个误区，一直以为 echarts 最后生成的是一个 canvas 元素，自然而然就以为 echarts 实例就是将 canvas 标签作为初始化时的 dom 元素，其实不然，官网的例子是以 div 作为初始化时的 dom元素，那如果以 canvas 标签进行初始化，有问题吗？没问题，照样可以显示，但是！如果你要显示 tooltip 就会发现它出不来，f12 看了下 dom 结构，发现提示框被添加到 canvas 里面去，canvas 标签里面的内容是不显示的，自然就不能看到提示框，解决办法只需要将 canvas 标签换为 div 标签即可；