给body设置了zoom属性后,echarts图鼠标悬浮偏移的解决办法

当在body元素上设置缩放属性zoom以实现响应式布局时,可能会导致内嵌的Echarts图表错位。为修复此问题,可以通过在包含Echarts图表的div上应用相反的缩放比例,使其在小屏幕设备上恢复正常布局。具体解决方案是在媒体查询中针对Echarts图表的div设置zoom:1.19,以抵消body的缩放效果。

给body设置了room属性。

@media screen and (max-width:1400px) {
	body {
		zoom: 0.81 !important;
		-moz-transform: scale(1);
		-moz-transform-origin: 0 0;
	}
}

 然后某个页面引入了echarts,悬浮发生了错位。

解决办法:既然body缩放了,那么渲染echarts图表的div再给他放大回去就好了。

@media screen and (max-width:1400px) {
	#myChart {
		zoom: 1.19 !important;
		-moz-transform: scale(1);
		-moz-transform-origin: 0 0;
	}
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值