ECharts series組件配置熱力圖

設(shè)置特定于ECharts熱力圖系列的提示框浮層

ECharts地圖系列

ECharts地圖的提示框浮層設(shè)置

ECharts系列列表：平行坐標(biāo)系

ECharts平行坐標(biāo)系屬性

ECharts線圖：繪制線數(shù)據(jù)

ECharts系列：?；鶊D的使用

ECharts漏斗圖屬性與實(shí)例介紹

ECharts儀表盤屬性與使用

ECharts象形柱圖

ECharts系列：主題河流圖

設(shè)置ECharts主題河流圖的提示框浮層

ECharts圖表自定義系列

ECharts配置項(xiàng)：背景色

設(shè)置ECharts全局字體樣式

設(shè)置ECharts動(dòng)畫(huà)的屬性

ECharts漸進(jìn)式渲染簡(jiǎn)單介紹

更多有關(guān)ECharts圖表的設(shè)置

閱讀(20.5k) 書(shū)簽贊(0) 我要糾錯(cuò)

ECharts地圖的提示框浮層設(shè)置

2020-09-08 15:41 更新

series[i]-map.tooltip

本系列特定的 tooltip 設(shè)定。

series-map.tooltip. position

stringArrayFunction

注意：series.tooltip 僅在 tooltip.trigger 為 'item' 時(shí)有效。

提示框浮層的位置，默認(rèn)不設(shè)置時(shí)位置會(huì)跟隨鼠標(biāo)的位置。

可選：

?Array?
通過(guò)數(shù)組表示提示框浮層的位置，支持?jǐn)?shù)字設(shè)置絕對(duì)位置，百分比設(shè)置相對(duì)位置。示例:

  // 絕對(duì)位置，相對(duì)于容器左側(cè) 10px, 上側(cè) 10 px
  position: [10, 10]
  // 相對(duì)位置，放置在容器正中間
  position: ['50%', '50%']

?Function?
回調(diào)函數(shù)，回調(diào)函數(shù)，格式如下：
```
  (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array
```
參數(shù)：
point: 鼠標(biāo)位置，如 [20, 40]。
params: 同 formatter 的參數(shù)相同。
dom: tooltip 的 dom 對(duì)象。
rect: 只有鼠標(biāo)在圖形上時(shí)有效，是一個(gè)用x, y, width, height四個(gè)屬性表達(dá)的圖形包圍盒。
size: 包括 dom 的尺寸和 echarts 容器的當(dāng)前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。

返回值：可以是一個(gè)表示 tooltip 位置的數(shù)組，數(shù)組值可以是絕對(duì)的像素值，也可以是相百分比。也可以是一個(gè)對(duì)象，如：?{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) {
      // 鼠標(biāo)在左側(cè)時(shí) tooltip 顯示到右側(cè)，鼠標(biāo)在右側(cè)時(shí) tooltip 顯示到左側(cè)。
      var obj = {top: 60};
      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
      return obj;
  }
```
?'inside'?
鼠標(biāo)所在圖形的內(nèi)部中心位置，只在 trigger 為'item'的時(shí)候有效。
?'top'?
鼠標(biāo)所在圖形上側(cè)，只在 trigger 為'item'的時(shí)候有效。
?'left'
?鼠標(biāo)所在圖形左側(cè)，只在 trigger 為'item'的時(shí)候有效。
?'right'?
鼠標(biāo)所在圖形右側(cè)，只在 trigger 為'item'的時(shí)候有效。
?'bottom'
?鼠標(biāo)所在圖形底側(cè)，只在 trigger 為'item'的時(shí)候有效。

series-map.tooltip. formatter

stringFunction

注意：series.tooltip 僅在 tooltip.trigger 為 'item' 時(shí)有效。

提示框浮層內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式。

1, 字符串模板

模板變量有? {a},? ??，?{c}?，?1116161?，?{e}?，分別表示系列名，數(shù)據(jù)名，數(shù)據(jù)值等。在 trigger 為 ?'axis'? 的時(shí)候，會(huì)有多個(gè)系列的數(shù)據(jù)，此時(shí)可以通過(guò) ?{a0},? ?{a1}?, ?{a2}? 這種后面加索引的方式表示系列的索引。不同圖表類型下的 ?{a}?，??，?{c}?，?6116611 ?含義不一樣。其中變量?{a}?, ??, ?{c}?, ?6116616?在不同圖表類型下代表數(shù)據(jù)含義為：

折線（區(qū)域）圖、柱狀（條形）圖、K線圖 : ?{a}?（系列名稱），??（類目值），?{c}?（數(shù)值）, ?1166666?（無(wú)）
散點(diǎn)圖（氣泡）圖 : ?{a}?（系列名稱），??（數(shù)據(jù)名稱），?{c}?（數(shù)值數(shù)組）,? 6111111?（無(wú)）
地圖 : ?{a}?（系列名稱），??（區(qū)域名稱），?{c}?（合并數(shù)值）, ?1666111?（無(wú)）
餅圖、儀表盤、漏斗圖: ?{a}?（系列名稱），??（數(shù)據(jù)項(xiàng)名稱），?{c}?（數(shù)值）, ?1116166?（百分比）

更多其它圖表模板變量的含義可以見(jiàn)相應(yīng)的圖表的 label.formatter 配置項(xiàng)。

示例：

formatter: '{b0}: {c0}<br />{b1}: {c1}'

2, 回調(diào)函數(shù)

回調(diào)函數(shù)格式：

(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string

第一個(gè)參數(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ù)值。在多數(shù)系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
    value: number|Array|Object,
    // 坐標(biāo)軸 encode 映射信息，
    // key 為坐標(biāo)軸（如 'x' 'y' 'radius' 'angle' 等）
    // value 必然為數(shù)組，不會(huì)為 null/undefied，表示 dimension index 。
    // 其內(nèi)容如：
    // {
    //     x: [2] // dimension index 為 2 的數(shù)據(jù)映射到 x 軸
    //     y: [0] // dimension index 為 0 的數(shù)據(jù)映射到 y 軸
    // }
    encode: Object,
    // 維度名列表
    dimensionNames: Array<String>,
    // 數(shù)據(jù)的維度 index，如 0 或 1 或 2 ...
    // 僅在雷達(dá)圖中使用。
    dimensionIndex: number,
    // 數(shù)據(jù)圖形的顏色
    color: string,

    // 餅圖的百分比
    percent: number,

}

注：encode 和 dimensionNames 的使用方式，例如：

如果數(shù)據(jù)為：

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 軸對(duì)應(yīng)的 value：

params.value[params.encode.y[0]]

如果數(shù)據(jù)為：

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 軸對(duì)應(yīng)的 value：

params.value[params.dimensionNames[params.encode.y[0]]]

在 trigger 為 'axis' 的時(shí)候，或者 tooltip 被 axisPointer 觸發(fā)的時(shí)候，params 是多個(gè)系列的數(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ù)值。在多數(shù)系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
    value: number|Array|Object,
    // 坐標(biāo)軸 encode 映射信息，
    // key 為坐標(biāo)軸（如 'x' 'y' 'radius' 'angle' 等）
    // value 必然為數(shù)組，不會(huì)為 null/undefied，表示 dimension index 。
    // 其內(nèi)容如：
    // {
    //     x: [2] // dimension index 為 2 的數(shù)據(jù)映射到 x 軸
    //     y: [0] // dimension index 為 0 的數(shù)據(jù)映射到 y 軸
    // }
    encode: Object,
    // 維度名列表
    dimensionNames: Array<String>,
    // 數(shù)據(jù)的維度 index，如 0 或 1 或 2 ...
    // 僅在雷達(dá)圖中使用。
    dimensionIndex: number,
    // 數(shù)據(jù)圖形的顏色
    color: string,

}

注：encode 和 dimensionNames 的使用方式，例如：

如果數(shù)據(jù)為：

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 軸對(duì)應(yīng)的 value：

params.value[params.encode.y[0]]

如果數(shù)據(jù)為：

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 軸對(duì)應(yīng)的 value：

params.value[params.dimensionNames[params.encode.y[0]]]

注： ECharts 2.x 使用數(shù)組表示各參數(shù)的方式不再支持。

第二個(gè)參數(shù) ?ticket ?是異步回調(diào)標(biāo)識(shí)，配合第三個(gè)參數(shù) ?callback ?使用。第三個(gè)參數(shù) ?callback ?是異步回調(diào)，在提示框浮層內(nèi)容是異步獲取的時(shí)候，可以通過(guò) callback 傳入上述的 ?ticket ?和 ?html ?更新提示框浮層內(nèi)容。

示例：

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' 時(shí)有效。

提示框浮層的背景顏色。

series-map.tooltip. borderColor = '#333'

Color

注意：series.tooltip 僅在 tooltip.trigger 為 'item' 時(shí)有效。

提示框浮層的邊框顏色。

series-map.tooltip. borderWidth

number

注意：series.tooltip 僅在 tooltip.trigger 為 'item' 時(shí)有效。

提示框浮層的邊框?qū)挕?/p>

series-map.tooltip. padding = 5

number

注意：series.tooltip 僅在 tooltip.trigger 為 'item' 時(shí)有效。

提示框浮層內(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è)置四個(gè)方向的內(nèi)邊距
padding: [
    5,  // 上
    10, // 右
    5,  // 下
    10, // 左
]

series-map.tooltip. textStyle

Object

注意：series.tooltip 僅在 tooltip.trigger 為 'item' 時(shí)有效。

提示框浮層的文本樣式。

所有屬性

{ color , fontStyle , fontWeight , fontFamily , fontSize , lineHeight , width , height , textBorderColor , textBorderWidth , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY }

series-map.tooltip. extraCssText

string

注意：series.tooltip 僅在 tooltip.trigger 為 'item' 時(shí)有效。

額外附加到浮層的 css 樣式。如下為浮層添加陰影的示例：

extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'

以上內(nèi)容是否對(duì)您有幫助：

← ECharts地圖系列

ECharts系列列表：平行坐標(biāo)系 →

寫(xiě)筆記

我要補(bǔ)充

ECharts地圖的提示框浮層設(shè)置

series[i]-map.tooltip

series-map.tooltip. position

series-map.tooltip. formatter

series-map.tooltip. backgroundColor = 'rgba(50,50,50,0.7)'

series-map.tooltip. borderColor = '#333'

series-map.tooltip. borderWidth

series-map.tooltip. padding = 5

series-map.tooltip. textStyle

所有屬性

series-map.tooltip. extraCssText

推薦文章

推薦教程

推薦課程