建站
咨詢
售后
建站咨詢
新聞中心
series[i]-map.tooltip
本系列特定的 tooltip 設定。
公司主營業(yè)務：做網站、成都網站制作、移動網站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出漠河免費做網站回饋大家。
series-map.tooltip. position
stringArrayFunction
注意：series.tooltip 僅在 tooltip.trigger 為 'item' 時有效。
提示框浮層的位置，默認不設置時位置會跟隨鼠標的位置。
可選：
- ?
Array?
通過數(shù)組表示提示框浮層的位置，支持數(shù)字設置絕對位置，百分比設置相對位置。示例:// 絕對位置，相對于容器左側 10px, 上側 10 px position: [10, 10] // 相對位置，放置在容器正中間 position: ['50%', '50%'] - ?
Function?
回調函數(shù)，回調函數(shù)，格式如下：(point: Array, params: Object|Array.參數(shù)：
point: 鼠標位置，如 [20, 40]。
params: 同 formatter 的參數(shù)相同。
dom: tooltip 的 dom 對象。
rect: 只有鼠標在圖形上時有效，是一個用x, y, width, height四個屬性表達的圖形包圍盒。
size: 包括 dom 的尺寸和 echarts 容器的當前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。返回值：可以是一個表示 tooltip 位置的數(shù)組，數(shù)組值可以是絕對的像素值，也可以是相 百分比。也可以是一個對象，如：?
{left: 10, top: 30}?，或者 ?{right: '20%', bottom: 40}?。如下示例：
position: function (point, params, dom, rect, size) { // 固定在頂部 return [point[0], '10%']; }或者：
position: function (pos, params, dom, rect, size) { // 鼠標在左側時 tooltip 顯示到右側，鼠標在右側時 tooltip 顯示到左側。 var obj = {top: 60}; obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5; return obj; } - ?
'inside'?
鼠標所在圖形的內部中心位置，只在 trigger 為'item'的時候有效。 - ?
'top'?
鼠標所在圖形上側，只在 trigger 為'item'的時候有效。 - ?
'left'
?鼠標所在圖形左側，只在 trigger 為'item'的時候有效。 - ?
'right'?
鼠標所在圖形右側，只在 trigger 為'item'的時候有效。 - ?
'bottom'
?鼠標所在圖形底側，只在 trigger 為'item'的時候有效。
series-map.tooltip. formatter
stringFunction
注意：series.tooltip 僅在 tooltip.trigger 為 'item' 時有效。
提示框浮層內容格式器，支持字符串模板和回調函數(shù)兩種形式。
1, 字符串模板
模板變量有? {a},? ??，?{c}?，?vbb75nf?，?{e}?，分別表示系列名，數(shù)據名，數(shù)據值等。 在 trigger 為 ?'axis'? 的時候，會有多個系列的數(shù)據，此時可以通過 ?{a0},? ?{a1}?, ?{a2}? 這種后面加索引的方式表示系列的索引。 不同圖表類型下的 ?{a}?，??，?{c}?，?vbb75nf ?含義不一樣。 其中變量?{a}?, ??, ?{c}?, ?vbb75nf?在不同圖表類型下代表數(shù)據含義為：
- 折線（區(qū)域）圖、柱狀（條形）圖、K線圖 : ?
{a}?（系列名稱），??（類目值），?{c}?（數(shù)值）, ?vbb75nf?（無） - 散點圖（氣泡）圖 : ?
{a}?（系列名稱），??（數(shù)據名稱），?{c}?（數(shù)值數(shù)組）,?vbb75nf?（無） - 地圖 : ?
{a}?（系列名稱），??（區(qū)域名稱），?{c}?（合并數(shù)值）, ?vbb75nf?（無） - 餅圖、儀表盤、漏斗圖: ?
{a}?（系列名稱），??（數(shù)據項名稱），?{c}?（數(shù)值）, ?vbb75nf?（百分比）
更多其它圖表模板變量的含義可以見相應的圖表的 label.formatter 配置項。
示例：
formatter: '{b0}: {c0}
{b1}: {c1}'
2, 回調函數(shù)
回調函數(shù)格式：
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
第一個參數(shù) params 是 formatter 需要的數(shù)據集。格式如下：
{
componentType: 'series',
// 系列類型
seriesType: string,
// 系列在傳入的 option.series 中的 index
seriesIndex: number,
// 系列名稱
seriesName: string,
// 數(shù)據名，類目名
name: string,
// 數(shù)據在傳入的 data 數(shù)組中的 index
dataIndex: number,
// 傳入的原始數(shù)據項
data: Object,
// 傳入的數(shù)據值。在多數(shù)系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
value: number|Array|Object,
// 坐標軸 encode 映射信息，
// key 為坐標軸（如 'x' 'y' 'radius' 'angle' 等）
// value 必然為數(shù)組，不會為 null/undefied，表示 dimension index 。
// 其內容如：
// {
// x: [2] // dimension index 為 2 的數(shù)據映射到 x 軸
// y: [0] // dimension index 為 0 的數(shù)據映射到 y 軸
// }
encode: Object,
// 維度名列表
dimensionNames: Array,
// 數(shù)據的維度 index，如 0 或 1 或 2 ...
// 僅在雷達圖中使用。
dimensionIndex: number,
// 數(shù)據圖形的顏色
color: string,
// 餅圖的百分比
percent: number,
}
注：encode 和 dimensionNames 的使用方式，例如：
如果數(shù)據為：
dataset: {
source: [
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
}
則可這樣得到 y 軸對應的 value：
params.value[params.encode.y[0]]
如果數(shù)據為：
dataset: {
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
}
則可這樣得到 y 軸對應的 value：
params.value[params.dimensionNames[params.encode.y[0]]]
在 trigger 為 'axis' 的時候，或者 tooltip 被 axisPointer 觸發(fā)的時候，params 是多個系列的數(shù)據數(shù)組。其中每項內容格式同上，并且，
{
componentType: 'series',
// 系列類型
seriesType: string,
// 系列在傳入的 option.series 中的 index
seriesIndex: number,
// 系列名稱
seriesName: string,
// 數(shù)據名，類目名
name: string,
// 數(shù)據在傳入的 data 數(shù)組中的 index
dataIndex: number,
// 傳入的原始數(shù)據項
data: Object,
// 傳入的數(shù)據值。在多數(shù)系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
value: number|Array|Object,
// 坐標軸 encode 映射信息，
// key 為坐標軸（如 'x' 'y' 'radius' 'angle' 等）
// value 必然為數(shù)組，不會為 null/undefied，表示 dimension index 。
// 其內容如：
// {
// x: [2] // dimension index 為 2 的數(shù)據映射到 x 軸
// y: [0] // dimension index 為 0 的數(shù)據映射到 y 軸
// }
encode: Object,
// 維度名列表
dimensionNames: Array,
// 數(shù)據的維度 index，如 0 或 1 或 2 ...
// 僅在雷達圖中使用。
dimensionIndex: number,
// 數(shù)據圖形的顏色
color: string,
}
注：encode 和 dimensionNames 的使用方式，例如：
如果數(shù)據為：
dataset: {
source: [
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
}
則可這樣得到 y 軸對應的 value：
params.value[params.encode.y[0]]
如果數(shù)據為：
dataset: {
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
}
則可這樣得到 y 軸對應的 value：
params.value[params.dimensionNames[params.encode.y[0]]]
注： ECharts 2.x 使用數(shù)組表示各參數(shù)的方式不再支持。
第二個參數(shù) ?ticket ?是異步回調標識，配合第三個參數(shù) ?callback ?使用。 第三個參數(shù) ?callback ?是異步回調，在提示框浮層內容是異步獲取的時候，可以通過 callback 傳入上述的 ?ticket ?和 ?html ?更新提示框浮層內容。
示例：
formatter: function (params, ticket, callback) {
$.get('detail?name=' + params.name, function (content) {
callback(ticket, toHTML(content));
});
return 'Loading';
}
series-map.tooltip. backgroundColor = 'rgba(50,50,50,0.7)'
Color
注意：series.tooltip 僅在 tooltip.trigger 為 'item' 時有效。
提示框浮層的背景顏色。
series-map.tooltip. borderColor = '#333'
Color
注意：series.tooltip 僅在 tooltip.trigger 為 'item' 時有效。
提示框浮層的邊框顏色。
series-map.tooltip. borderWidth
number
注意：series.tooltip 僅在 tooltip.trigger 為 'item' 時有效。
提示框浮層的邊框寬。
series-map.tooltip. padding = 5
number
注意：series.tooltip 僅在 tooltip.trigger 為 'item' 時有效。
提示框浮層內邊距，單位px，默認各方向內邊距為5，接受數(shù)組分別設定上右下左邊距。
使用示例：
// 設置內邊距為 5
padding: 5
// 設置上下的內邊距為 5，左右的內邊距為 10
padding: [5, 10]
// 分別設置四個方向的內邊距
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
]
series-map.tooltip. textStyle
Object
注意：series.tooltip 僅在 tooltip.trigger 為 'item' 時有效。
提示框浮層的文本樣式。
所有屬性
{ color , fontStyle , fontWeight , fontFamily , fontSize , lineHeight , width , height , textBorderColor , textBorderWidth , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY }
series-map.tooltip. extraCssText
string
注意：series.tooltip 僅在 tooltip.trigger 為 'item' 時有效。
額外附加到浮層的 css 樣式。如下為浮層添加陰影的示例：
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'網站欄目：創(chuàng)新互聯(lián)ECharts教程：ECharts地圖的提示框浮層設置
地址分享：http://fisionsoft.com.cn/article/dhppdhs.html
