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)