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>

在这里插入图片描述

二、用 shallowRef 来包装对象

如果想要像正常的写法去配置 echarts 也可以，我们用 shallowRef 来定义对象，shallowRef 不会将我们的对象进行深层次的响应式处理，具体看下图：
在这里插入图片描述

<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>

在这里插入图片描述

三、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>

在这里插入图片描述

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

在这里插入图片描述

以上是笔者在做项目的过程发现的问题及解决方案，如果有疑问或者哪里不对，可以在评论区评论，多多指教~