久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

23
2023/09

echarts巧用箭頭函數(shù)獲取Vue實例

發(fā)布時間:2023-09-23 13:31:30
發(fā)布者:閃電五連鞭
瀏覽量:
0

    之前已經(jīng)講過如何利用formatter自定義提示框內(nèi)容,echarts中示例的寫法是如下圖所示的,使用es5寫法可以省略‘:’和function,這也是vue中普通函數(shù)的寫法。

巧用箭頭函數(shù)獲取Vue實例

巧用箭頭函數(shù)獲取Vue實例


    以上是需要實現(xiàn)的效果,使用tooltip就能實現(xiàn),問題是7月15號這個標題如何能加入到提示框組件中。其他的大家可以看我的上一篇文章來實現(xiàn)。

    去百度查閱資料,有一種解決辦法是在每個data中的value添加一個新的數(shù)據(jù)。這種方法可行,但如果是幾百個,幾千個數(shù)據(jù)呢,我們不可能加上幾千條數(shù)據(jù)。

    vue中函數(shù)是不推薦使用箭頭函數(shù)的,因為會使this指向變?yōu)閣indow對象,而不是vue實例。由于慣性思維,我在寫echarts的formatter的回調(diào)函數(shù)時,依然使用的是常規(guī)的普通函數(shù)寫法。

    當(dāng)我們使用普通函數(shù)打印this和params的時候,得到如下圖片的東西,大家看,this是undefined,在嚴格模式下,普通函數(shù)的this就是undefined。這樣在echarts中就拿不到vue中定義的數(shù)據(jù)了。

巧用箭頭函數(shù)獲取Vue實例

    但是如果我們使用箭頭函數(shù),箭頭函數(shù)this指向其所在的上下文,也就是會躍出formatter指向vue實例,這樣我們就能拿到data中定義的數(shù)據(jù)了。

    以下是實現(xiàn)的方法,貼一下代碼。

巧用箭頭函數(shù)獲取Vue實例巧用箭頭函數(shù)獲取Vue實例


關(guān)鍵詞:
返回列表