一、問題描述

新項(xiàng)目采用vue3.0 + echarts5.0庫，當(dāng)在做一個圖表的時候，發(fā)現(xiàn)tooltip框怎么都不顯示，但是將option復(fù)制到echarts官網(wǎng)事例代碼中后，發(fā)現(xiàn)可以顯示。最開始以為是，頁面某些樣式造成echarts庫某些邏輯異常。多次排查后，發(fā)現(xiàn)將echarts實(shí)例賦值到vue data中就會有這個問題，如下：

export default {
    data()  {
      this.echartsInstance = null // 建議這樣存儲echarts實(shí)例
      return {
        // echartsInstance: null // 放在data中會有tooltip不顯示的問題（這樣書寫會有bug）
      }
    }  ,
    mounted() {
       const chartDom = document.getElementById('chartBox');
       this.echartsInstance = echarts.init(chartDom);
    }
}

二、解決方案

將echartsInstance用let定義

let echartsInstance;

轉(zhuǎn)載自：vue3.0 + echarts5.0 tooltip不顯示問題