快捷導(dǎo)航

vue3中echarts的tooltip組件不顯示問(wèn)題及解決

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

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

vue3 echarts的tooltip組件不顯示

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

如圖，我將echarts實(shí)例賦值給了響應(yīng)式的變量this.chartInstance，這便是在vue3中出錯(cuò)的原因，即不能將echarts實(shí)例賦值給響應(yīng)式變量。

解決辦法

①

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

②如果我們需要多次在一個(gè)dom元素上繪制echarts，又不想讓元素多次echarts實(shí)例化，可以使用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ā)類(lèi)型,'item'數(shù)據(jù)項(xiàng)圖形觸發(fā)，主要在散點(diǎn)圖，餅圖等無(wú)類(lèi)目軸的圖表中使用。 'axis'坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線圖等會(huì)使用類(lèi)目軸的圖表中使用。
    triggerOn:"mousemove",                      //提示框觸發(fā)的條件,'mousemove'鼠標(biāo)移動(dòng)時(shí)觸發(fā)。'click'鼠標(biāo)點(diǎn)擊時(shí)觸發(fā)。'mousemove|click'同時(shí)鼠標(biāo)移動(dòng)和點(diǎn)擊時(shí)觸發(fā)。'none'不在 'mousemove' 或 'click' 時(shí)觸發(fā)
    showContent:true,                           //是否顯示提示框浮層
    alwaysShowContent:true,                     //是否永遠(yuǎn)顯示提示框內(nèi)容
    showDelay:0,                                  //浮層顯示的延遲，單位為 ms
    hideDelay:100,                                //浮層隱藏的延遲，單位為 ms
    enterable:false,                             //鼠標(biāo)是否可進(jìn)入提示框浮層中
    confine:false,                               //是否將 tooltip 框限制在圖表的區(qū)域內(nèi)
    transitionDuration:0.4,                      //提示框浮層的移動(dòng)動(dòng)畫(huà)過(guò)渡時(shí)間，單位是 s,設(shè)置為 0 的時(shí)候會(huì)緊跟著鼠標(biāo)移動(dòng)
    position:['50%', '50%'],                    //提示框浮層的位置，默認(rèn)不設(shè)置時(shí)位置會(huì)跟隨鼠標(biāo)的位置,[10, 10],回掉函數(shù)，inside鼠標(biāo)所在圖形的內(nèi)部中心位置，top、left、bottom、right鼠標(biāo)所在圖形上側(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",            //標(biāo)題背景色
    borderColor:"#ccc",                        //邊框顏色
    borderWidth:0,                              //邊框線寬
    padding:5,                                  //圖例內(nèi)邊距，單位px  5  [5, 10]  [5,10,5,10]
    textStyle:mytextStyle,                     //文本樣式
};

echarts