echarts tooltip 顯示不全

echarts tooltip 顯示不全 是否是很氣?
複製代碼

在這裏插入圖片描述

官方這樣說: echarts.baidu.com/option.html… tooltip.confine boolean [ default: false ] 是否將 tooltip 框限制在圖表的區域內。 當圖表外層的 dom 被設置爲 'overflow: hidden',或者移動端窄屏,致使 tooltip 超出外界被截斷時,此配置比較有用。html

tooltip: {
      trigger: 'axis',
      confine: true,

      // axisPointer: {            // 座標軸指示器,座標軸觸發有效
      //   type: 'shadow'        // 默認爲直線,可選爲:'line' | 'shadow'
      // }
    },
複製代碼

可是是不起做用的 一氣之下 怎麼整? 好在有一個 tooltip.padding數組

echarts.baidu.com/option.html… tooltip.padding number [ default: 5 ] 提示框浮層內邊距,單位px,默認各方向內邊距爲5,接受數組分別設定上右下左邊距。markdown

使用示例: 在這裏插入圖片描述echarts

tooltip: {
      trigger: 'axis',
      confine: true,
      // 分別設置四個方向的內邊距
      padding: [
        5,  // 上
        30, // 右
        5,  // 下
        30, // 左
      ],
   
      // axisPointer: {            // 座標軸指示器,座標軸觸發有效
      //   type: 'shadow'        // 默認爲直線,可選爲:'line' | 'shadow'
      // }
    },
複製代碼

結果很棒!就是離得有點遠dom

在這裏插入圖片描述

相關文章
相關標籤/搜索