Vue3+ECharts Tooltip 不显示问题

关于 Vue3 中使用 ECharts，tooltip 不显示的问题，官方没有给出重要提示，而实际上这样的场景其实很常见。

由于项目中使用到 ECharts 的地方很多，于是打算封装一个关于 ECharts 渲染的组件，类似这样：

<template>
  <div :class="echart" ref="chartRef"></div>
</template>

<script lang="ts" setup>
import { onMounted, watch, ref, unref } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  option: {
    type: Object as PropType<echarts.EChartsOption>,
    default: undefined
  }
})

const chartRef = ref<HTMLDivElement>()
// 这里使用了响应式变量存储echarts实例
const chart = ref<echarts.EChartsType | null>(null)

onMounted(() => {
  const el = unref(chartRef)
  if (!el || !unref(el)) return
  chart.value = echarts.init(el)
  props.option && unref(chart)?.setOption(props.option)
})

// watch option => rerender
watch(
  () => props.option,
  newOpt => {
    newVal && unref(chart)?.setOption(newOpt)
  },
  { deep: true, immediate: true }
)
</script>

如此建立的 Chart 中 tooltip 无论如何都无法显示。排查许久之后发现：由于这里使用了响应式变量去存储ECharts 实例，会导致 tooltip 无法显示。本来此处也无需使用响应式变量去存储 ECharts 实例。最后改成如下：

// ...代码省略...

const chartRef = ref<HTMLDivElement>()
// 这里使用了普通变量存储 ECharts 实例
let chart:echarts.EChartsType

onMounted(() => {
  const el = unref(chartRef)
  if (!el || !unref(el)) return
  chart = echarts.init(el)
  props.option && chart?.setOption(props.option)
})

// watch option => rerender
watch(
  () => props.option,
  newOpt => {
    newVal && chart?.setOption(newOpt)
  },
  { deep: true, immediate: true }
)