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

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

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

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

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

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

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