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

在这里插入图片描述

相关文章
相关标签/搜索