echarts大屏如何实现自适应缩放

news/2024/11/13 17:47:52/文章来源:https://www.cnblogs.com/guozhiqiang/p/18544446

核心代码

const dataScreenRef = (ref < HTMLElement) | (null > null);onMounted(() => {if (dataScreenRef.value) {dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;}console.log("dataScreenRef ========> ", dataScreenRef);window.addEventListener("resize", resize);
});// 设置响应式
const resize = () => {if (dataScreenRef.value) {dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;console.log(1111);}
};// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {let ww = window.innerWidth / width;let wh = window.innerHeight / height;return ww < wh ? ww : wh;
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/833045.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Prometheus + Grafana 监控平台搭建

1、下载 prometheus和node_exporter:https://prometheus.io/download/ 下载完后上传到服务器解压 tar -zxvf prometheus-3.0.0-rc.1.linux-amd64.tar.gztar -zxvf node_exporter-1.8.2.linux-amd64.tar.gz2、启动 node_exporter nohup ./node_exporter --web.listen-address…

阿里云可观测 2024 年 10 月产品动态

阿里云可观测 2024 年 10 月产品动态

题解:CF2025E Card Game

在这 权当卡特兰数的复习题吧。不会卡特兰数的可以先看文末。如果没有花色 \(1\) 这道题就很简单了,对于每个别的花色都有 \(C(m)\) 种分配方案。\(C(n)\) 表示卡特兰数的第 \(n\) 项,答案就是乘起来。 发现除了花色 \(1\) 每种花色的牌都是独立的。这启示我们枚举每种牌用了…

应用网关的演进历程和分类

网关作为互联网流量的入口,其形态也在跟随软件架构持续演进迭代中。我们下面就聊一聊网关的演进历程以及在时下火热的 AI 浪潮下,网关又会迸发怎样新的形态。作者:耿蕾蕾(如葑) 唯一不变的是变化,在现代复杂的商业环境中,企业的业务形态与规模往往处于不断变化和扩大之中…

Vue网站发布到iis后提示404页面不可访问

vue重定向和跨域配置:https://zhuanlan.zhihu.com/p/5306882511.安装组件:URL Rewrite:https://www.iis.net/downloads/microsoft/url-rewriteApplication Request Routing:https://www.iis.net/downloads/microsoft/application-request-routing2.新建一个web.config 放到…

fastadmin 数据记录行上添加操作按钮并设置权限

1. 一键 curd 以及配置菜单 编写控制器方法 - 业务逻辑 再次一键生成菜单 - 生成刚刚写审核通过方法的控制器。 2. 自定义控制器中方法。 3. 查看角色组的权限,并授予该角色权限。 4. 前端修改 index 页面,因为需要权限所以需要加上一句话data-operate-log="{:$auth-&g…

10 倍性能提升, GraalVM 应用可观测实践

ARMS 发布了支持 GraalVM 应用的 Java Agent 探针,可为 GraalVM 应用提供开箱即用的可观测能力。作者:铖朴、层风 GraalVM 静态编译 背景介绍 随着云原生浪潮的蓬勃发展,利用云原生技术为企业应用提供极致的弹性能力是企业数字化升级的核心诉求。但 Java 作为一种解释执行+运…

日立移动硬盘插在电脑有异响数据恢复

当日立移动硬盘插在电脑上出现异响且数据无法读取时,这通常表明硬盘可能遇到了某些问题。以下是一些建议的解决步骤和数据恢复方法: 一、异响原因排查 供电不足: 移动硬盘需要足够的电力供应才能正常工作。如果电脑的USB接口供电不足,可能会导致移动硬盘发出异响且无法读取…

辣椒销售策略:智慧应对顾客,洞悉销售真谛

售卖辣椒的商贩常常面临这样的询问:“你的辣椒辣不辣?”回答这个问题时,他们面临两难:若答辣,怕辣之人即刻离去;若答不辣,或许又错失了喜辣的顾客,交易依旧难以达成。 某日闲暇,我驻足于一位售卖辣椒的妇人三轮车旁,好奇她如何解决这一逻辑悖论。 见暂无顾客,我自以…

idea无法打开:Cannot collect JVM options

idea报错:Cannot collect JVM options Caused by: 0: Cannot read:"C:\\Program Files(x86)\\新建文件夹\\jetbra-ded4f9dc4fcb60294b21669dafa90330f2713ce4\jetbra vmoptionsllidea.vmoptions" 1:stream did not contain valid UTF -8 划重点,错误信息提示流没…

Spring boot HibernateJPA CRUD

连接数据库和创建表 1. pom安装<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><dependency><groupId>com.mysql</groupId><artifact…

GitLab 中文版如何禁止从 UI 上下载代码?

本文分享如何通过配置来禁止用户从 GitLab 中文版 UI 界面上下载源代码。 GitLab 中文版也就是极狐GitLab,使用界面和 GitLab 一样。常规下载代码的方式也一样,要么使用 SSH 或者 HTTP 克隆,要么直接从 UI 上下载源代码:但是有些企业不想让员工从这个界面上通过下载源代码的…