Vue-echarts是一款基于Vue.js封裝的Echarts圖表組件庫。在Vue-echarts中，tooltip組件是用來顯示圖表中各種數(shù)據(jù)的。tooltip有很多屬性可以控制，可以通過配置實(shí)現(xiàn)各種效果。

首先，讓我們來看看如何配置tooltip的組件配置。在Echarts中，tooltip的配置項(xiàng)為tooltip。在Vue-echarts中，我們可以在配置項(xiàng)中添加tooltip的屬性來配置tooltip組件。

export default {
data() {
return {
option: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
series: [
{
name: '郵件營銷',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
}
]
}
}
}
}

在上面的代碼中，我們通過option.tooltip中的trigger屬性來指定鼠標(biāo)懸停的觸發(fā)類型。這里的axis表示會(huì)在x軸上和數(shù)據(jù)該處的y軸上同時(shí)出現(xiàn)tooltip。而axisPointer則指定了鼠標(biāo)在x軸或者y軸上的指針樣式。

然后，讓我們來看看如何配置tooltip中的formatter。在Echarts中，formatter是用來格式化顯示在tooltip中的內(nèi)容的。在Vue-echarts中，我們可以在配置項(xiàng)中添加tooltip.formatter屬性來配置tooltip中的內(nèi)容。

export default {
data() {
return {
option: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
},
formatter: '{a0}: {c0}
{a1}: {c1}'
},
series: [
{
name: '郵件營銷',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '聯(lián)盟廣告',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
}
]
}
}
}
}

在上面的代碼中，我們通過option.tooltip.formatter屬性來指定tooltip的內(nèi)容。這里的{a0}代表series[0]的name屬性，{c0}代表series[0]的data屬性。同理，{a1}和{c1}代表series[1]的name屬性和data屬性。這樣，最終tooltip中的內(nèi)容就可以格式化輸出了。