echarts tooltip 内容太多，超出范围显示不全问题,亲测有效

已于 2024-07-04 15:44:15 修改
阅读量5.1k 收藏 24
点赞数 11
分类专栏： 前端 # vue2 文章标签： echarts 数据库 服务器
于 2024-04-29 18:01:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46123200/article/details/138320927
版权

参考文章：echarts tooltip显示不全问题

文章目录

前言

在项目里面的tooltip数据特别多，显示不全问题（有下面几种方法，选择最适合自己的）：

解决

1、如果盒子还够大，只是tooltip飘到上面或者下面被覆盖住了，可以考虑confine: true这个属性，将tooltip限制在盒子内;

属性说明
在这里插入图片描述

示例
在这里插入图片描述

2、如果盒子比较小，展示不全的话，可以考虑appendToBody : true这个属性

属性说明
在这里插入图片描述

示例
在这里插入图片描述

3、也可以考虑将formatter格式处理一下，不让它换行，变矮一些

属性说明
在这里插入图片描述

4、如果是位置不太好，可以使用postion，处理一下

属性说明
在这里插入图片描述
在这里插入图片描述

5、还可以考虑一下层级问题，不过tooltip的层级一般都很大，当然也可以考虑，tooltip有一个extraCssText属性

属性说明
在这里插入图片描述
在这里插入图片描述

下班~

使用extraCssText解决echarts图中tooltip文本内容太长
白马非马军的博客
06-10 6578
问题描述：echarts图中tooltip文本内容太长 在用echarts绘制折线图时，可能会遇到seriesName太长，导致tooptip显示不全，多余的文本被隐藏的问题，如下： 提供两种方法解决该问题： 方法1：格式化重新输出，使用tooltip的formatter配置项，格式化输出，网上很多例子可使用，可自行参考 方法2：使文本支持换行展示，使用tooltip的extraCssText配置项，给tooltip添加样式即可，简单方便 tooltip: { trigger: 'axis',
echarts的y轴数据显示过长占不下，内容截取，鼠标hover上去显示全部
木木木华的博客
06-01 4348
echarts的y轴数据显示过长占不下，内容截取，鼠标hover上去显示全部
echarts的tooltip内容过多显示不全
weixin_64703215的博客
12-28 878
首先设置tooltip的enterable属性 此属性可以在触发tooltip后鼠标可以进入tooltip浮层。设置extraCssText:'max-height:60%;overflow:scroll'即可；echarts的图表数据过多时，使用tooltip会出现数据显示不全的情况。接着设置extraCssText的属性。
echarts中的tooltip内容过多显示不全
MR_Shi_it的博客
01-26 1145
echarts中的tooltip内容过多显示不全
ECharts 中的 tooltip（提示框）详解
最新发布
2401_88545090的博客
04-16 1071
javascript复制tooltip: {},width:10px;${item.seriesName}: ${item.value}公斤</div>`;});合计: ${params.reduce((sum, item) => sum + item.value, 0)}公斤</div>`;
echarts中tooptips提示框超出了怎么解决
weixin_51609337的博客
09-14 1371
也就是说，当提示框的位置计算出来可能超出图表范围时，会自动调整提示框的位置，确保提示框完全在图表的可视范围内。这两个配置结合起来，可以在一定程度上解决提示框内容显示不完整的问题，尤其是当提示框的内容较多或者提示框容易超出图表区域的情况。：这个配置的作用是让提示框（tooltip）限制在图表的区域内。完美解决，撒花~~~
echarts中tooltip内容太长显示不下
AstroSadmummy的博客
12-10 1497
在使用echarts绘制图表时，可能会遇到需要显示的内容过多，导致tooptip显示不全，会被隐藏的问题。
echarts tooltips数据内容过多超出显示范围
xiaoxiannvh的博客
08-05 8890
echarts tooltips数据过多超出显示
echarts tooltip内容过多超出显示范围
Aimee的博客
03-11 1万+
场景1：内容多，但在容器足够显示这么多内容 方案1：设置tooltip.confine = true;将tooltip限制在容器内，下图为echarts对tooltip.confine的解释 方案2：设置position /*1.设置x轴左右固定，上下跟随。*/ position: function(point, params, dom, rect, size){ return [0,point[1]]; } /*2.设置Y轴上下固定，X左右跟随。*/ position: func
echarts tooltip数据太多，容器遮挡显示不全，根据数据分列展示
qq_52140056的博客
11-03 3143
前言：解决bug不易，分享也不易，点亮你的小心心吧。 1.先展示一下效果图，根据数据的数量进行多列展示，每列十行，每列宽度根据文本内容长度定义 2.直接上代码 myChart.setOption({ tooltip: { trigger: 'axis', confine: true, // enterable: true, // 移入tooltip内查看数据 position:function (p...
Echarts tooltips数据量过多问题
qq_47255575的博客
06-19 283
【代码】Echarts tooltips数据量过多问题。
echarts tooltip数据量大 添加分页 多数据显示问题解决方案
html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业，各种设计应有尽有，持续更新中...
06-05 594
思路：设置5个一换行。
echarts tooltip超出范围
08-12
- *3* [echarts tooltip太多会超出显示范围-解决](https://blog.csdn.net/qq_35250826/article/details/88985610)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...
echarts tooltip框太大
07-28
- *1* *2* [echarts tooltip太多会超出显示范围](https://blog.csdn.net/dongyan3595/article/details/115657530)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...
echarts自定义tooltip绘制轨迹
njubluebird2的专栏
01-24 4150
之前用过一阵子echarts做APP上的趋势图，修改过源码实现一些自定义效果。以及设置一些echarts-m.js的隐藏setting，在此Mark一下，防止忘记。 1. 自定义tooltip绘制轨迹。     echarts提供的tooltip，在绘制直线时，只提供了实线，虚线，阴影线。如果要在直线的基础上，增加一些功能，比如线要超出图的边界(如果用formatter事件注入，会有延迟效果)
echarts中tooltips，鼠标移入提示框出界问题
AinUser的博客
02-11 2567
1.confine:true 2.tooltip: {             position: function (pos, params, el, elRect, size) {                 var obj = {top: 10};                 obj[['left', 'right'][+(pos[0] &lt; size.viewSize[0] ...
el-tooltip显示内容过长撑出屏幕
weixin_47218354的博客
03-29 173
【代码】el-tooltip显示内容过长撑出屏幕。
echarts中自定义tooltip的换行问题
热门推荐
lwang_IT的博客
09-13 2万+
问题描述： 鼠标移入,雷达图的时候，内容挤在一起，我要的效果是换行: 此时的代码，此时代码里面的\n换行也是没有效果的： tooltip: { trigger: 'item', show:true, formatter:function(params){ var s=''; s+=params.name+'\n'; var values=params...
解决echarts图中tooltip文本内容太长显示不全
weixin_44523717的博客
11-16 2827
在用echarts绘制折线图时，可能会遇到文本太长，导致tooptip显示不全，文本会被隐藏的问题 如图: 解决办法:使用tooltip的extraCssText配置项，给tooltip添加样式 extraCssText: 'white-space:pre-line' 且添加宽度 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fruge365

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值