W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
本章是專門為您講解 ECharts 圖表的提示框組件 tooltip 的一些基本的屬性設(shè)置,一下是有關(guān)于提示框組件的通用介紹:
提示框組件可以設(shè)置在多種地方:
[ default: true ]
是否顯示提示框組件,包括提示框浮層和 axisPointer。
[ default: 'item' ]
提示框組件的觸發(fā)類型。
可選:
[ default: true ]
是否顯示提示框浮層,默認顯示。只需 tooltip 觸發(fā)事件或顯示 axisPointer 而不需要顯示內(nèi)容時可配置該項為 false。
[ default: false ]
是否永遠顯示提示框內(nèi)容,默認情況下在移出可觸發(fā)提示框區(qū)域后 一定時間 后隱藏,設(shè)置為 true 可以保證一直顯示提示框內(nèi)容。
該屬性為 ECharts 3.0 中新加。
[ default: 'mousemove|click' ]
提示框觸發(fā)的條件,可選:
該屬性為 ECharts 3.0 中新加。
[ default: 0 ]
浮層顯示的延遲,單位為 ms,默認沒有延遲,也不建議設(shè)置。在 triggerOn 為 'mousemove' 時有效。
[ default: 100 ]
浮層隱藏的延遲,單位為 ms,在 alwaysShowContent 為 true 的時候無效。
[ default: false ]
鼠標是否可進入提示框浮層中,默認為false,如需詳情內(nèi)交互,如添加鏈接,按鈕,可設(shè)置為 true。
[ default: false ]
是否將 tooltip 框限制在圖表的區(qū)域內(nèi)。
當圖表外層的 dom 被設(shè)置為 'overflow: hidden',或者移動端窄屏,導(dǎo)致 tooltip 超出外界被截斷時,此配置比較有用。
[ default: 0.4 ]
提示框浮層的移動動畫過渡時間,單位是 s,設(shè)置為 0 的時候會緊跟著鼠標移動。
提示框浮層的位置,默認不設(shè)置時位置會跟隨鼠標的位置。
可選:
// 絕對位置,相對于容器左側(cè) 10px, 上側(cè) 10 px
position: [10, 10]
// 相對位置,放置在容器正中間 position: ['50%', '50%']
(point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array
參數(shù): position: function (point, params, dom, rect, size) {
// 固定在頂部
return [point[0], '10%'];
}
或者: position: function (pos, params, dom, rect, size) {
// 鼠標在左側(cè)時 tooltip 顯示到右側(cè),鼠標在右側(cè)時 tooltip 顯示到左側(cè)。
var obj = {top: 60};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
return obj;
}
提示框浮層內(nèi)容格式器,支持字符串模板和回調(diào)函數(shù)兩種形式。
1、字符串模板
模板變量有 {a}, ,{c},jfdxf33,{e},分別表示系列名,數(shù)據(jù)名,數(shù)據(jù)值等。 在 trigger 為 'axis' 的時候,會有多個系列的數(shù)據(jù),此時可以通過 {a0}, {a1}, {a2} 這種后面加索引的方式表示系列的索引。 不同圖表類型下的 {a},,{c},hn3dtfp 含義不一樣。 其中變量{a}, , {c}, 7t3lfdd在不同圖表類型下代表數(shù)據(jù)含義為:
更多其它圖表模板變量的含義可以見相應(yīng)的圖表的 label.normal.formatter 配置項。
示例:
formatter: '{b0}: {c0}<br />{b1}: {c1}'
2、回調(diào)函數(shù)
回調(diào)函數(shù)格式:
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
第一個參數(shù) params 是 formatter 需要的數(shù)據(jù)集。格式如下:
{
componentType: 'series',
// 系列類型
seriesType: string,
// 系列在傳入的 option.series 中的 index
seriesIndex: number,
// 系列名稱
seriesName: string,
// 數(shù)據(jù)名,類目名
name: string,
// 數(shù)據(jù)在傳入的 data 數(shù)組中的 index
dataIndex: number,
// 傳入的原始數(shù)據(jù)項
data: Object,
// 傳入的數(shù)據(jù)值
value: number|Array,
// 數(shù)據(jù)圖形的顏色
color: string,
// 餅圖的百分比
percent: number,
//
galleryViewPath: ,
//
galleryEditorPath: ,
//
imagePath: ,
//
gl: ,
}
在 trigger 為 'axis' 的時候,或者 tooltip 被 axisPointer 觸發(fā)的時候,params 是多個系列的數(shù)據(jù)數(shù)組。其中每項內(nèi)容格式同上,并且,
{
componentType: 'series',
// 系列類型
seriesType: string,
// 系列在傳入的 option.series 中的 index
seriesIndex: number,
// 系列名稱
seriesName: string,
// 數(shù)據(jù)名,類目名
name: string,
// 數(shù)據(jù)在傳入的 data 數(shù)組中的 index
dataIndex: number,
// 傳入的原始數(shù)據(jù)項
data: Object,
// 傳入的數(shù)據(jù)值
value: number|Array,
// 數(shù)據(jù)圖形的顏色
color: string,
}
注: ECharts 2.x 使用數(shù)組表示各參數(shù)的方式不再支持。
第二個參數(shù) ticket 是異步回調(diào)標識,配合第三個參數(shù) callback 使用。 第三個參數(shù) callback 是異步回調(diào),在提示框浮層內(nèi)容是異步獲取的時候,可以通過 callback 傳入上述的 ticket 和 html 更新提示框浮層內(nèi)容。
示例:
formatter: function (params, ticket, callback) {
$.get('detail?name=' + params.name, function (content) {
callback(ticket, toHTML(content));
});
return 'Loading';
}
[ default: 'rgba(50,50,50,0.7)' ]
設(shè)置提示框浮層的背景顏色。
[ default: '#333' ]
設(shè)置提示框浮層的邊框顏色。
[ default: 0 ]
設(shè)置提示框浮層的邊框?qū)挕?/p>
[ default: 5 ]
設(shè)置提示框浮層內(nèi)邊距,單位為 px,默認各方向內(nèi)邊距為 5px,接受數(shù)組分別設(shè)定上右下左邊距。
使用示例:
// 設(shè)置內(nèi)邊距為 5
padding: 5
// 設(shè)置上下的內(nèi)邊距為 5,左右的內(nèi)邊距為 10
padding: [5, 10]
// 分別設(shè)置四個方向的內(nèi)邊距
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
]
設(shè)置提示框浮層的文本樣式。詳細的文字樣式設(shè)置見:提示框組件文字的樣式
額外附加到浮層的 css 樣式。如下為浮層添加陰影的示例:
extraCssText:'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: