echart 提示框超过页面解决方法

最新推荐文章于 2025-06-06 17:19:19 发布

yuanliy

最新推荐文章于 2025-06-06 17:19:19 发布

阅读量687

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/a432qbc/article/details/120175838

echarts 专栏收录该内容

5 篇文章

订阅专栏

当Echarts图表的提示框内容过多时，可能会出现超出页面边界的问题，影响用户体验。解决方法包括调整提示框的位置、自定义提示框样式、使用滚动条等，确保提示信息完整展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

tooltip: {
        trigger: 'axis',
        extraCssText: 'height:auto;',
        confine: true,
        position:function(point,params,dom,rect,size) {
          var tipHeight = point[1]+size.contentSize[1];
          if(tipHeight > size.viewSize[1]){//判断高度
            return [point[0]+50,point[1]-size.contentSize[1]];
          }else if(point[1]<size.contentSize[1]){
            return [point[0]+50,point[1]+20];
          }else {
            return point;
          }
        },
        axisPointer: {
          type: 'none'
        },
        textStyle: {
          color: '#fff',
          fontFamily: 'Microsoft YaHei'
        },
        formatter: '{b}：{c}',
      },