记录一个页面在使用zoom 属性时 echarts 发生偏移的问题的解决

问题描述：

我在vue项目中 使用echarts时 需要兼容不同分辨率时，在1920宽度时，显示正常，但是电脑设置显示150%的时候 出现了 echarts的变形 （我的是变长了）和设计稿相差太大。于是 应用了 页面整体zoom 根据页面宽度除以1920 得出相应的比例 进行大小缩放，在缩放后非常完美。但是 echarts 出现了一个小问题 就是鼠标移入时有所偏移。

解决：

在页面整体缩放后 对渲染echarts的div进行单独zoom缩放还原。之后对该div进行transform ：scale 同比例缩放；设置 .transformOrigin：0 0；属性缩放中心为左上角；然后将宽度的比例调整好；就可完美实现缩放；
具体代码
效果
我猜 也可以直接 使用 transform来对页面进行缩放；但是我没有试过 感觉使用zoom 多此一举。

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue