Ehcart tooltip数据量过大显示数据问题

大数据量下优化ECharts Tooltip显示
本文介绍如何在大数据量环境下优化ECharts的Tooltip显示,通过设置confine、enterable属性及自定义CSS,实现Tooltip内滚动查看,避免数据遮挡,提升用户体验。

想必大家会遇到大数据量的时候,鼠标移入的时候tooltip提示可能会浮出div造成部分数据看不到的问题.
比如这个样子:

当你鼠标向上移动的时候 tooltip显示也会向上 数据就看不到了。
此时一个属性就可以搞定

tooltip:{
		trigger:'axis',
		confine:true // 可以将tooltip显示的位置固定
	}

但是数据量还是很多 超过你下方的div 甚至超过显示的界面 还是会遮挡看不到,怎么办?
我想了一下 是不是弄成一个下拉的 就可以搞定了,可是你输入进入不了tooltip这个里面,就
没有办法实现下拉了,当然这是它里面的属性都是可以解决的.

 tooltip: {
            trigger: 'axis',
            confine :true,
            enterable :true,//鼠标可以移入tooltip里
            extraCssText:'max-height:400px;overflow:auto;font-size:12px;' //向div一样设置最大高度,超出滚动
        }

然后就解决了!!!
在这里插入图片描述
怎么说呢,大数据量的时候 tooltip提示就显得没用了,既然要看 我就只能这样解决了。

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值