echarts tooltip 显示不全

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Mr_yangzc/article/details/89217476

echarts tooltip 显示不全 是不是很气？

官方这样说： https://echarts.baidu.com/option.html#tooltip.confine
tooltip.confine
boolean [ default: false ] 是否将 tooltip 框限制在图表的区域内。
当图表外层的 dom 被设置为 ‘overflow: hidden’，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。

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

      // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
      //   type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      // }
    },

但是是不起作用的 一气之下 怎么整？ 好在有一个 tooltip.padding
https://echarts.baidu.com/option.html#tooltip.padding
tooltip.padding number
[ default: 5 ]
提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。

使用示例：

 tooltip: {
      trigger: 'axis',
      confine: true,
      // 分别设置四个方向的内边距
      padding: [
        5,  // 上
        30, // 右
        5,  // 下
        30, // 左
      ],
   
      // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
      //   type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      // }
    },

结果很棒！就是离得有点远