vue3 中使用 echarts（v5.2）tooltip 不显示的问题

问题描述：echarts 实例赋值给 reactive 响应式 Proxy对象，导致tooltip不显示

//template  <div style="width: 600px; height: 600px;border: 1px solid red" ref="chartContainer">

setup () {
  const chartContainer = ref<HTMLElement>()
  const charts = reactive({
    chart: null
  } as ChartsType)  // 设置为 reactive 响应式对象，保存echarts 实例

  onMounted(() => {
    const xAxisData = ['2021/09/15 10:00', '2021/09/15 11:00', '2021/09/15 12:00', '2021/09/15 13:00']
    const seriesData = [[0, 79.55], [1, 79.89], [2, 78.83], [3, 79.95]]

    const options = {
      animation: false,
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: xAxisData,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#888'
          }
        },
        splitLine: {
          show: false
        }
      },
      yAxis: {
        axisLine: {
          show: true,
          lineStyle: {
            color: '#888'
          }
        }
      },
      series: {
        name: 'data line',
        type: 'line',
        data: seriesData,
        symbol: 'circle',
        symbolSize: 5,
        smooth: true,
        lineStyle: {
          width: 2,
          type: 'solid'
        }
      },
      grid: {
        left: 45,
        top: 25,
        bottom: 30,
        right: 30
      }
    }
    charts.chart = echarts.init(chartContainer.value as HTMLElement)  // 保存echarts 实例，赋值给 reactive 响应式对象
    charts.chart.setOption(options, true)
  })

  return {
    chartContainer,
    charts
  }
}

结果： 图表能显示，但提示框不显示。

更改1:

// 若只将tooltip的触发方式改为 'item', 那么点击 线上的点，能有提示框弹出
 tooltip: {
    trigger: 'item'
  },

更改2：

// tooltip的触发方式仍为 'axis'，改变echarts实例的赋值语句
//    charts.chart = echarts.init(chartContainer.value as HTMLElement)  // 保存echarts 实例，赋值给 reactive 响应式对象
//    charts.chart.setOption(options, true)

// 改为如下语句，tooltip 显示正常
    const chart = echarts.init(chartContainer.value as HTMLElement)  // 这样赋值，不直接将 echarts 实例 赋值给 reactive 响应式对象
    chart.setOption(options, true)
    charts.chart = chart

更改3：

 const charts = reactive({ chart: null})  // charts.chart 是个Proxy对象

// 如果 charts 不是 响应式的， 没问题。
const charts  = { chart: null }
charts.chart = echarts.init(chartContainer.value as HTMLElement) 
charts.chart.setOption(options, true)