echarts--提示框組件（tooltip）

個人工作記錄

1.工作中遇到的問題描述：餅狀圖鼠標懸浮時，提示文字超出畫布，如圖：

 

通過tooltip的confine屬性解決，官網的介紹：

confine:是否將 tooltip 框限制在圖表的區域內。

當圖表外層的 dom 被設置為 'overflow: hidden'，或者移動端窄屏，導致 tooltip 超出外界被截斷時，此配置比較有用。

    tooltip: {
      confine: true
    },

 

 

2.tooptip其他常用功能

tooltip: {
    show: true,//是否顯示提示框
    trigger: 'item',//可選，餅圖、散點圖用item，柱狀圖、折線圖用axis，none什么都不觸發
    showContent: true,//
    enterable: true,//鼠標是否可進入提示框浮層中，默認為false，如需詳情內交互，如添加鏈接，按鈕，可設置為 true。
    confine: true,//是否將 tooltip 框限制在圖表的區域內。當圖表外層的 dom 被設置為 'overflow: hidden'，或者移動端窄屏，導致 tooltip 超出外界被截斷時，此配置比較有用。
    formatter: '{a}<br/>{b}:{c} {d}%',//提示框浮層內容格式器，支持字符串模板和回調函數兩種形式。
    textStyle: {//提示框內文字樣式的設置
      color:'red',
      fontSize:'18'
    }
  },