設(shè)置ECharts折線圖的提示框

您可以對 ECharts 折線圖進行特定的提示框設(shè)置，而不需要在全局 ECharts 圖表中設(shè)置提示框組件。要設(shè)置 ECharts 折線圖特定的提示框組件的屬性、樣式等，您需要使用 series[i]-line.tooltip 來實現(xiàn)。更多詳細設(shè)置，參見下文：

• series[i]-line.tooltip.position   string, Array, Function

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

  提示框浮層的位置，默認不設(shè)置時位置會跟隨鼠標的位置。

  可選：

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

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

  • Function
    回調(diào)函數(shù)，格式如下:

      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: 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) {
          // 鼠標在左側(cè)時 tooltip 顯示到右側(cè)，鼠標在右側(cè)時 tooltip 顯示到左側(cè)。
          var obj = {top: 60};
          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
          return obj;
      }

  • 'inside'
    鼠標所在圖形的內(nèi)部中心位置，只在 trigger 為'item'的時候有效。
  • 'top'
    鼠標所在圖形上側(cè)，只在 trigger 為'item'的時候有效。
  • 'left'
    鼠標所在圖形左側(cè)，只在 trigger 為'item'的時候有效。
  • 'right'
    鼠標所在圖形右側(cè)，只在 trigger 為'item'的時候有效。
  • 'bottom'
    鼠標所在圖形底側(cè)，只在 trigger 為'item'的時候有效。

• series[i]-line.tooltip.formatter string, Function

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

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

  1. 字符串模板

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

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

     更多其它圖表模板變量的含義可以見相應(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';
     }

• series[i]-line.tooltip.backgroundColor   Color[ default: 'rgba(50,50,50,0.7)' ]

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

  提示框浮層的背景顏色。

• series[i]-line.tooltip.borderColor   Color[ default: '#333' ]

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

  提示框浮層的邊框顏色。

• series[i]-line.tooltip.borderWidth   number[ default: 0 ]

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

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

• series[i]-line.tooltip.padding   number[ default: 5 ]

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

  提示框浮層內(nèi)邊距，單位px，默認各方向內(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, // 左
  ]

• series[i]-line.tooltip.textStyle   Object

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

  提示框浮層的文本樣式。

• series[i]-line.tooltip.extraCssText   string

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

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

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