Vue-echarts是一款基于Vue.js封裝的Echarts圖表組件庫。在Vue-echarts中,tooltip組件是用來顯示圖表中各種數據的。tooltip有很多屬性可以控制,可以通過配置實現各種效果。
首先,讓我們來看看如何配置tooltip的組件配置。在Echarts中,tooltip的配置項為tooltip。在Vue-echarts中,我們可以在配置項中添加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屬性來指定鼠標懸停的觸發類型。這里的axis表示會在x軸上和數據該處的y軸上同時出現tooltip。而axisPointer則指定了鼠標在x軸或者y軸上的指針樣式。
然后,讓我們來看看如何配置tooltip中的formatter。在Echarts中,formatter是用來格式化顯示在tooltip中的內容的。在Vue-echarts中,我們可以在配置項中添加tooltip.formatter屬性來配置tooltip中的內容。
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: '聯盟廣告', type: 'line', data: [220, 182, 191, 234, 290, 330, 310] } ] } } } }
在上面的代碼中,我們通過option.tooltip.formatter屬性來指定tooltip的內容。這里的{a0}代表series[0]的name屬性,{c0}代表series[0]的data屬性。同理,{a1}和{c1}代表series[1]的name屬性和data屬性。這樣,最終tooltip中的內容就可以格式化輸出了。