掃二維碼與項(xiàng)目經(jīng)理溝通
我們在微信上24小時期待你的聲音
解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
ECharts 熱力圖系列特定的 tooltip 設(shè)定。

從事內(nèi)江機(jī)房主機(jī)托管,服務(wù)器租用,云主機(jī),雅安服務(wù)器托管,申請域名,CDN,網(wǎng)絡(luò)代維等服務(wù)。
position
注意:series.tooltip 僅在 tooltip.trigger 為 'item' 時有效。
提示框浮層的位置,默認(rèn)不設(shè)置時位置會跟隨鼠標(biāo)的位置。
可選:
formatter
注意:series.tooltip 僅在 tooltip.trigger 為 'item' 時有效。
提示框浮層內(nèi)容格式器,支持字符串模板和回調(diào)函數(shù)兩種形式。
模板變量有 {a}, ,{c},eeem0o0,{e},分別表示系列名,數(shù)據(jù)名,數(shù)據(jù)值等。 在 trigger 為 'axis' 的時候,會有多個系列的數(shù)據(jù),此時可以通過 {a0}, {a1}, {a2} 這種后面加索引的方式表示系列的索引。 不同圖表類型下的 {a},,{c},o2a2o2m 含義不一樣。 其中變量{a}, , {c}, 0uus02k在不同圖表類型下代表數(shù)據(jù)含義為:
更多其它圖表模板變量的含義可以見相應(yīng)的圖表的 label.normal.formatter 配置項(xiàng)。
示例:
formatter: '{b0}: {c0}
{b1}: {c1}'
回調(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ù)項(xiàng)
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ù)組。其中每項(xiàng)內(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ù)項(xiàng)
data: Object,
// 傳入的數(shù)據(jù)值
value: number|Array,
// 數(shù)據(jù)圖形的顏色
color: string,
}注: ECharts 2.x 使用數(shù)組表示各參數(shù)的方式不再支持。
第二個參數(shù) ticket 是異步回調(diào)標(biā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';
}
backgroundColor
注意:series.tooltip 僅在 tooltip.trigger 為 'item' 時有效。
提示框浮層的背景顏色,在不設(shè)置時的顏色取值為 rgba(50,50,50,0.7)。
borderColor
注意:series.tooltip 僅在 tooltip.trigger 為 'item' 時有效。
提示框浮層的邊框顏色,默認(rèn)顏色值為 #333。
borderWidth
注意:series.tooltip 僅在 tooltip.trigger 為 'item' 時有效。
提示框浮層的邊框?qū)?,默認(rèn)值為 0。
padding
注意:series.tooltip 僅在 tooltip.trigger 為 'item' 時有效。
提示框浮層內(nèi)邊距,單位px,默認(rèn)各方向內(nèi)邊距為5,接受數(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, // 左
]
textStyle
注意:series.tooltip 僅在 tooltip.trigger 為 'item' 時有效。
設(shè)置熱力圖提示框浮層的文本樣式。
extraCssText
注意:series.tooltip 僅在 tooltip.trigger 為 'item' 時有效。
額外附加到浮層的 CSS 樣式。如下為浮層添加陰影的示例:
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' 
我們在微信上24小時期待你的聲音
解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流