av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

創(chuàng)新互聯(lián)ECharts教程:設(shè)置特定于ECharts熱力圖系列的提示框浮層

series[i]-heatmap.tooltip 

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)的位置。

可選:

  • Array
    通過數(shù)組表示提示框浮層的位置,支持?jǐn)?shù)字設(shè)置絕對位置,百分比設(shè)置相對位置。
    示例: // 絕對位置,相對于容器左側(cè) 10px, 上側(cè) 10 px position: [10, 10] // 相對位置,放置在容器正中間 position: ['50%', '50%']
  • Function
    回調(diào)函數(shù),格式如下 (point: Array, params: Object|Array., dom: HTMLDomElement, rect: Object, size: Object) => Array
    參數(shù):
    point: 鼠標(biāo)位置,如 [20, 40]。
    params: 同 formatter 的參數(shù)相同。
    dom: tooltip 的 dom 對象。
    rect: 只有鼠標(biāo)在圖形上時有效,是一個用x, y, width, height四個屬性表達(dá)的圖形包圍盒。
  • size: 包括 dom 的尺寸和 echarts 容器的當(dāng)前尺寸,例如:{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) { // 鼠標(biāo)在左側(cè)時 tooltip 顯示到右側(cè),鼠標(biāo)在右側(cè)時 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'的時候有效。
    • 'top'
      鼠標(biāo)所在圖形上側(cè),只在 trigger 為'item'的時候有效。
    • 'left'
      鼠標(biāo)所在圖形左側(cè),只在 trigger 為'item'的時候有效。
    • 'right'
      鼠標(biāo)所在圖形右側(cè),只在 trigger 為'item'的時候有效。
    • 'bottom'
      鼠標(biāo)所在圖形底側(cè),只在 trigger 為'item'的時候有效。
    formatter

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

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

    1. 字符串模板

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

      • 折線(區(qū)域)圖、柱狀(條形)圖、K線圖 : {a}(系列名稱),(類目值),{c}(數(shù)值), waygu2m(無)
      • 散點(diǎn)圖(氣泡)圖 : {a}(系列名稱),(數(shù)據(jù)名稱),{c}(數(shù)值數(shù)組), qu0w0ou(無)
      • 地圖 : {a}(系列名稱),(區(qū)域名稱),{c}(合并數(shù)值), 2i0kk0c(無)
      • 餅圖、儀表盤、漏斗圖: {a}(系列名稱),(數(shù)據(jù)項(xiàng)名稱),{c}(數(shù)值), yqgmmw2(百分比)

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

      示例:

      formatter: '{b0}: {c0}
      {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ù)項(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);'

    本文名稱:創(chuàng)新互聯(lián)ECharts教程:設(shè)置特定于ECharts熱力圖系列的提示框浮層
    瀏覽路徑:http://uogjgqi.cn/article/cdeegog.html
    掃二維碼與項(xiàng)目經(jīng)理溝通

    我們在微信上24小時期待你的聲音

    解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流