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

更新時間：2022年10月19日 14:36:42 作者：東之健大壞蛋

這篇文章主要介紹了vue3中echarts的tooltip組件不顯示問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue3 echarts的tooltip組件不顯示

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

如圖，我將echarts實例賦值給了響應式的變量this.chartInstance，這便是在vue3中出錯的原因，即不能將echarts實例賦值給響應式變量。

解決辦法

①

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

②如果我們需要多次在一個dom元素上繪制echarts，又不想讓元素多次echarts實例化，可以使用getInstanceByDom方法

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

Echarts|tooltip提示框組件參數(shù)

Echarts數(shù)據(jù)可視化tooltip提示框組件詳解：

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

echarts