色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue echarts tooltip

錢浩然2年前10瀏覽0評論

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中的內容就可以格式化輸出了。