vue3中echarts的tooltip組件不顯示問題及解決

data() {
  return {
    chartInstance: ''
  }
},
 
mounted() {
  if(!this.chartInstance) this.chartInstance = echarts.init(this.$refs.myChart)
  this.chartInstance.setOption(option)
}

this.$echarts.init(this.$refs.myChart).setOption(option)

let el = this.$refs.myChart
if(this.$echarts.getInstanceByDom(el)) this.$echarts.getInstanceByDom(el).setOption(option)
else this.$echarts.init(el).setOption(option)

tooltip ={                                      //提示框組件
    trigger: 'item',                            //觸發類型,'item'數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。 'axis'坐標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
    triggerOn:"mousemove",                      //提示框觸發的條件,'mousemove'鼠標移動時觸發。'click'鼠標點擊時觸發。'mousemove|click'同時鼠標移動和點擊時觸發。'none'不在 'mousemove' 或 'click' 時觸發
    showContent:true,                           //是否顯示提示框浮層
    alwaysShowContent:true,                     //是否永遠顯示提示框內容
    showDelay:0,                                  //浮層顯示的延遲，單位為 ms
    hideDelay:100,                                //浮層隱藏的延遲，單位為 ms
    enterable:false,                             //鼠標是否可進入提示框浮層中
    confine:false,                               //是否將 tooltip 框限制在圖表的區域內
    transitionDuration:0.4,                      //提示框浮層的移動動畫過渡時間，單位是 s,設置為 0 的時候會緊跟著鼠標移動
    position:['50%', '50%'],                    //提示框浮層的位置，默認不設置時位置會跟隨鼠標的位置,[10, 10],回掉函數，inside鼠標所在圖形的內部中心位置，top、left、bottom、right鼠標所在圖形上側，左側，下側，右側，
    formatter:"{b0}: {c0}<br />{b1}: {c1}",     //提示框浮層內容格式器，支持字符串模板和回調函數兩種形式,模板變量有 {a}, {b}，{c}，{d}，{e}，分別表示系列名，數據名，數據值等
    backgroundColor:"transparent",            //標題背景色
    borderColor:"#ccc",                        //邊框顏色
    borderWidth:0,                              //邊框線寬
    padding:5,                                  //圖例內邊距，單位px  5  [5, 10]  [5,10,5,10]
    textStyle:mytextStyle,                     //文本樣式
};