ECharts箱形圖的提示框浮層設置

我們知道tooltip用于設置提示框浮層，而在本節(jié)中，我們將使用tooltip來對ECharts箱形圖的提示框浮層進行專屬的設置。

ECharts箱形圖提示框浮層屬性

position

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

箱形圖提示框浮層的位置，默認不設置時位置會跟隨鼠標的位置。

可選：

• Array
  通過數組表示提示框浮層的位置，支持數字設置絕對位置，百分比設置相對位置。
  示例: 

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

• Function
  回調函數，格式如下 ：

   (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array

  參數：
  point: 鼠標位置，如 [20, 40]。
  params: 同 formatter 的參數相同。
  dom: tooltip 的 dom 對象。
  rect: 只有鼠標在圖形上時有效，是一個用x, y, width, height四個屬性表達的圖形包圍盒。
  size: 包括 dom 的尺寸和 echarts 容器的當前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。
  返回值：可以是一個表示 tooltip 位置的數組，數組值可以是絕對的像素值，也可以是相 百分比。也可以是一個對象，如：{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'的時候有效。

formatter

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

箱形圖提示框浮層內容格式器，支持字符串模板和回調函數兩種形式。

1、字符串模板

模板變量有 {a}, ，{c}，mpth4nm，{e}，分別表示系列名，數據名，數據值等。 在 trigger 為 'axis' 的時候，會有多個系列的數據，此時可以通過 {a0}, {a1}, {a2} 這種后面加索引的方式表示系列的索引。 不同圖表類型下的 {a}，，{c}，zc3gpxl 含義不一樣。 其中變量{a}, , {c}, vxgu3ae在不同圖表類型下代表數據含義為：

• 折線（區(qū)域）圖、柱狀（條形）圖、K線圖 : {a}（系列名稱），（類目值），{c}（數值）, twfyc95（無）
• 散點圖（氣泡）圖 : {a}（系列名稱），（數據名稱），{c}（數值數組）, jrv8pd3（無）
• 地圖 : {a}（系列名稱），（區(qū)域名稱），{c}（合并數值）, x4j5z39（無）
• 餅圖、儀表盤、漏斗圖: {a}（系列名稱），（數據項名稱），{c}（數值）, 5qoxgzd（百分比）

更多其它圖表模板變量的含義可以見相應的圖表的 label.normal.formatter 配置項。

示例：

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

2、回調函數

回調函數格式：

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

第一個參數 params 是 formatter 需要的數據集。格式如下：

{
    componentType: 'series',
    // 系列類型
    seriesType: string,
    // 系列在傳入的 option.series 中的 index
    seriesIndex: number,
    // 系列名稱
    seriesName: string,
    // 數據名，類目名
    name: string,
    // 數據在傳入的 data 數組中的 index
    dataIndex: number,
    // 傳入的原始數據項
    data: Object,
    // 傳入的數據值
    value: number|Array,
    // 數據圖形的顏色
    color: string,

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

    // 
    galleryViewPath: ,

    // 
    galleryEditorPath: ,

    // 
    imagePath: ,

    // 
    gl: ,

}

在 trigger 為 'axis' 的時候，或者 tooltip 被 axisPointer 觸發(fā)的時候，params 是多個系列的數據數組。其中每項內容格式同上，并且，

{
    componentType: 'series',
    // 系列類型
    seriesType: string,
    // 系列在傳入的 option.series 中的 index
    seriesIndex: number,
    // 系列名稱
    seriesName: string,
    // 數據名，類目名
    name: string,
    // 數據在傳入的 data 數組中的 index
    dataIndex: number,
    // 傳入的原始數據項
    data: Object,
    // 傳入的數據值
    value: number|Array,
    // 數據圖形的顏色
    color: string,

}

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

第二個參數 ticket 是異步回調標識，配合第三個參數 callback 使用。 第三個參數 callback 是異步回調，在提示框浮層內容是異步獲取的時候，可以通過 callback 傳入上述的 ticket 和 html 更新提示框浮層內容。

示例：

formatter: function (params, ticket, callback) {
    $.get('detail?name=' + params.name, function (content) {
        callback(ticket, toHTML(content));
    });
    return 'Loading';
}

backgroundColor

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

箱形圖提示框浮層的背景顏色，默認為'rgba(50,50,50,0.7)'。

borderColor

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

箱形圖提示框浮層的邊框顏色，默認為'#333'。

borderWidth

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

箱形圖提示框浮層的邊框寬。

padding

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

提示框浮層內邊距，單位px，默認各方向內邊距為5，接受數組分別設定上右下左邊距。

使用示例：

// 設置內邊距為 5
padding: 5
// 設置上下的內邊距為 5，左右的內邊距為 10
padding: [5, 10]
// 分別設置四個方向的內邊距
padding: [
    5,  // 上
    10, // 右
    5,  // 下
    10, // 左
]

textStyle

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

提示框浮層的文本樣式。

extraCssText

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

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

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