iT邦幫忙

0

EChart的tooltip formatter

Pam 2024-02-27 01:15:13527 瀏覽
  • 分享至 

  • xImage
  •  

tooltip是游標指到圖表時,會出現的提示框,內容大抵上是某某資料的值是多少這樣。而formatter就是這些資訊要以什麼樣的型式來呈現。

兩種設定方法:

  • string template
    直接使用eChart做好的template string,很方便,但能調整的彈性低,比如說這樣的悲劇...(為保護受害者,以下部分資訊已打碼)
  • callback function
    callback裡第一個自帶的argument裡有我們想要的東西,先印出來看看裡面怎麼寫
 tooltip: {
      trigger: "item",
      formatter: function (params) {
        console.log('formatter params');
      },
    },


其實這在文件中都有列,但沒實際例子有點難聯想

比較常用的有:

  • maker: 標示legend的點點
  • name: 數據名稱
  • data: 數據值
  • percent: pie chart的百分比

formatter需要吃字串,所以在callback裡回傳一個由你想要的資訊所組合而來的字串就可以

formatter: function (params) {
        return `${params.seriesName} <br/>${params.marker}${params.name}: ${params.data["eventCount"]} (${params.percent}%)`;
      },

這樣就成功了!其實並不難


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言