Vue进行页面等比缩放后，鼠标悬停echarts错位高亮

于 2024-08-15 15:36:09 发布
阅读量197 收藏
点赞数 2
文章标签： vue.js echarts 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hunantai/article/details/141223649
版权

项目中使用vue+echarts实现大屏页只展示河北省地图，并且鼠标滑过显示井的详情信息

因为页面进行了等比缩放，所以每次鼠标移入地图区域时不高亮，移到该区域的右下方才高亮

以下是等比缩放的代码：

导致整个页面缩放了0.775倍，所以出现错位的情况

解决办法是给echarts加上zoom、transform:scale、transform-origin这三个属性将页面的比例进行还原

获取zoom缩放大小的方法：

完美解决

果酱小米粥
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 - Element Plus 表格组件 table 隐藏鼠标移入时 hover 高亮背景色，el-table 组件去除鼠标悬停在表格行的 hover 高亮效果（完美解决表格合并后导致行错位）
王佳斌
02-19 5099
vue3，element plus，el-table，table表格，取消表格行row移入高亮效果，element plus表格组件去掉鼠标移入行时的hover效果，取消el-table的hover状态，取消高亮显示，隐藏表格鼠标hover效果，去除鼠标触摸变色效果，如何取消elementplus表格的行悬停效果，怎么将表格移入每行时的灰色高亮去掉，table的行hover如何去除，element的el-table合并，处理合并产生的hover样式问题，表格合并后鼠标移入hover出现异常问题，表格行被鼠标
VUE：页面布局的自动缩放
干饭搬砖两不误。
04-07 7483
关于页面自动缩放的两种情况：固定宽高、不固定宽高。
Vue中页面自适应缩放
......
10-11 2174
在写项目的时候经常会有因为屏幕尺寸不同导致的页面混乱，而px转化为rem可以让页面按照相同的比例进行缩放，使页面效果保持一致。
zoom缩放后，echarts鼠标悬浮错位的bug
tao_min的博客
03-22 743
使用zoom缩放后，echarts鼠标悬浮错位的bug。然后使用transform对myChart进行缩放。首先把echarts恢复比例。
全局缩放后echarts鼠标偏移的问题(鼠标触发提示框位置有偏差，中心点偏移的问题)
zhj1329000的博客
06-05 1677
eahart地图适配大屏缩放中心点发生偏移问题
vue项目等比例缩放页面
lay7889的博客
01-19 2780
vue项目等比例缩放页面
vue结合Echarts实现点击高亮效果的示例
01-19
本文主要介绍如何在vue中使用Echarts实现点击高亮效果。 1、首先看一下官方网站上的介绍： http://echarts.baidu.com/api.html#action.graph.focusNodeAdjacency 2、在初始化的时候绑定这两个事件。需要绑定的事件...
echarts实现中国地图、鼠标悬浮、点击跳转对应省市、给省市图标、缩放、拖拽、自适应
最新发布
04-22
安装Vue.js：如果你还没有安装Vue.js，你可以通过npm或yarn进行安装。 安装ECharts：同样，通过npm或yarn安装ECharts。 2. 创建Vue组件 在Vue项目中创建一个新的组件，比如ChinaMap.vue，用于展示中国地图。 3. ...
【echarts】关于body.style.zoom修改后鼠标悬停错位问题
请问这块砖要搬到哪
08-03 1762
关于body.style.zoom修改后鼠标悬停错位问题
VUE页面屏幕自适应等比例缩放
yfc888z888的博客
03-18 1368
/获取当前分辨率下的可是区域宽度。//放大缩小相应倍数。// 分母——设计稿的尺寸。// 监听页面的窗口的变化，每次窗口变化调用等比例缩放方法。// 页面等比例缩放的方法。
在Vue项目中,防止页面被缩放和放大示例
10-16
今天小编就为大家分享一篇在Vue项目中,防止页面被缩放和放大示例，具有很好的参考 价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue大屏适配缩放
编写博客，学习交流
07-06 1903
原理: 将px转化成rem,通过setRem缩放页面适配大屏。
PC端 VUE 官网项目 前端开发 响应式布局（宽+高 等比例缩放）
weixin_55846296的博客
08-01 6764
各位大佬有好方法或者想指正的可以在评论去告诉我们，大佬们辛苦了（抱大腿）！！！
Vue 页面放大缩小，且放大后可以拖拽
weixin_43945408的博客
09-27 2631
Vue.js 简单的放大组件，放大倍数现在为hardCode, 可更改为根据两指之间距离重新计算倍数。缩小到一倍后不可继续缩小且页面也无法移动。放大后可移动整个页面用来聚焦某部分。
vue 等比例缩放
Tabitha rufus
09-24 7347
等比例缩放可以在不同的分辨率下都能够一屏展示，不会有滚动条的问题，也不会有适配问题。但是会导致浏览器的缩放功能失效。 代码如下： <template> <div id="app" :style="{'transform':`scale(${scalesNum}) translate(-50%,0)`, '-webkit-transform':`scale(${scalesNum}) translate(-50%,0)`, '-moz-transform':`s
Vue大屏幕等比例缩放
StevenYanghahha的博客
06-14 1194
在utils文件夹下新建drawMixin.js 文件，实现等比例缩放代码如下。在App.vue页面引入。
Vue后台项目开发必备：全面解析分辨率适配与网页缩放技巧！
CRMEB小程序商城的博客
12-13 4549
这里就不再过多举例了，通过这四张图可以看出来页面布局并没有受到过多的影响，所以直接上代码，cv就完事了。然后在App.vue中导入，此处的App.vue主要指的是主框架，因不同项目可自行选择。这里我只用谷歌浏览器和自带的Microsoft Edge浏览器展示（没有其他浏览器…本次的文章就分享到这里，总结了【vue后台管理做适配的最佳方案】，希望可以帮到大家。使用如下方法（其中的1920以及1080为定义的画布尺寸）首先下载lodash插件。在App.vue中导入。然后给app容器挂上。
vue项目网页自适应，等比例放大缩小
热门推荐
zxczero的博客
09-19 3万+
vue项目网页自适应，等比例放大缩小
vue页面屏幕等比缩放的最佳方法
04-05
1. 使用viewport设置 在页面头部添加以下代码： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 这个meta标签告诉浏览器页面的宽度等于设备的宽度，并且缩放比例为1.0。也就是说，页面会根据设备的宽度进行自适应缩放。 2. 使用rem单位 rem单位是相对于根元素(html)的字体大小来计算的单位。我们可以根据屏幕尺寸设置根元素的字体大小，从而实现等比缩放。 在CSS文件中添加以下代码： ```css html { font-size: 16px; } @media only screen and (max-width: 768px) { html { font-size: 14px; } } @media only screen and (max-width: 480px) { html { font-size: 12px; } } ``` 以上代码表示在不同屏幕尺寸下，根元素的字体大小不同，从而实现等比缩放。 3. 使用flex布局 flex布局可以根据容器的尺寸自动调整子元素的大小和位置，从而实现等比缩放。 在CSS文件中添加以下代码： ```css .container { display: flex; flex-direction: column; align-items: center; justify-content: center; } .item { flex: 1; max-width: 100%; height: auto; } ``` 以上代码表示在容器中使用flex布局，并设置每个子元素的宽度最大为容器的宽度，高度自适应。从而实现等比缩放。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值