1. 程式人生 > >echarts提示框,提示內容的編輯與自定義

echarts提示框,提示內容的編輯與自定義

tooltip.formatter    string,   Function

提示框浮層內容格式器,支援字串模板和回撥函式兩種形式。

1, 字串模板

模板變數有 {a}{b}{c}{d}{e},分別表示系列名,資料名,資料值等。 在 trigger 為 'axis' 的時候,會有多個系列的資料,此時可以通過 {a0}{a1}{a2} 這種後面加索引的方式表示系列的索引。 不同圖表型別下的 {a}{b}{c}{d}

 含義不一樣。 其中變數{a}{b}{c}{d}在不同圖表型別下代表資料含義為:

  • 折線(區域)圖、柱狀(條形)圖、K線圖 : {a}(系列名稱),{b}(類目值),{c}(數值), {d}(無)

  • 散點圖(氣泡)圖 : {a}(系列名稱),{b}(資料名稱),{c}(數值陣列), {d}(無)

  • 地圖 : {a}(系列名稱),{b}(區域名稱),{c}(合併數值), {d}(無)

  • 餅圖、儀表盤、漏斗圖: {a}(系列名稱),{b}(資料項名稱),{c}

    (數值), {d}(百分比)

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

示例:

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

 

//第一種形式的提示框
tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框的提示內容 名 值 對(不同的圖形,a b c對應的值不同)
},

//第二種形式的提示框

tooltip: { 
        trigger: 'item',
        formatter: function (params) {
             return  params.name +'' + params.data + '個';  // 提示框的文字
        }
    },