Vue3 + js-echarts 实现前端大屏可视化

1、前言

        此文章作为本人大屏可视化项目的入门学习笔记,以此作为记录,记录一下我的大屏适配解决方案,本项目是基于vite + Vue3 + js + less 实现的,首先看ui,ui是网上随便找的,代码是自己实现的,后面会给出源码地址

2、方案介绍

这里介绍一下本人用的两种方案的优缺点

方案实现方式优点缺点
scale

1.通过 scale 属性,根据屏幕大小,

对图表进行整体的等比缩放

1.代码量少,适配简单
2.一次处理后不需要在各个图表中再去单独适配
1.因为是根据 ui 稿等比缩放,当大屏跟 ui 稿的比例不一样时,会出现周边留白情况
2.当缩放比例过大时候,字体会有一点点模糊,就一点点
3.当缩放比例过大时候,事件热区会偏移。
vw vh1.按照设计稿的尺寸,将px按比例计算转为vwvh1.可以动态计算图表的宽高,字体等,灵活性较高
2.当屏幕比例跟 ui 稿不一致时,不会出现两边留白情况
1.每个图表都需要单独做字体、间距、位移的适配,比较麻烦

以上就是两种方案的比较了下面具体介绍一下两种方案的核心代码

2.1、scale解决方案

核心代码,就是获取屏幕的分辨率,与设计稿的分辨率比较得到一个比例,然后通过 scale 进行缩放

// 适配方案先不处理,先把功能实现了先
function handleScreenAuto() {const designDraftWidth = 1920; //设计稿的宽度const designDraftHeight = 1080; //设计稿的高度// 根据屏幕的变化适配的比例,这么处理,可能会出现留白问题,可以通过控制背景色与主题色相匹配,来降低留白的影响// 当 设备宽高比 > 16/9时,两边出现留白// 当 设备宽高比 < 16/9时,上下出现留白// 接下来写样式就直接通过px来写即可const screenWidth =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth;const screenHeight =window.innerHeight ||document.documentElement.clientHeight ||document.body.clientHeight;// x y轴自适应缩放const scaleX = screenWidth / designDraftWidth;const scaleY = screenHeight / designDraftHeight;// 设置缩放中心点 很重要否则,当是2560 * 1440 、  3840 * 2160等分辨率时,会出现向上偏移document.querySelector(".home-page").style.transformOrigin = "0 0";// 缩放比例document.querySelector(".home-page").style.transform = `scale(${scaleX}, ${scaleY})`;
}

有了上面这段核心代码,接下来,我就在写样式的 时候,就可以直接使用 px写样式代码了

2.2、vw vh解决方案

这个解决方案相对会复杂一点,但是也还好,这个方案的核心代码有

1、样式方面的代码

@charset "utf-8";// 默认设计稿的宽度
@designWidth: 1920;// 默认设计稿的高度
@designHeight: 1080;/*将px转成 vw其实就是 1920 = 100vw@name: 需要转换的属性名@px: 需要转换的数值例如width: 20px.vw(width, 20)结果就是 width: 20 / 1920 * 100vw = 10.416666666666666vwvh 同理
*/
.vw(@name, @px) {@{name}: (@px / @designWidth) * 100vw;
}// px 转成 vh
.vh(@name, @px) {@{name}: (@px / @designHeight) * 100vh;
}.px2font(@px) {font-size: (@px / @designWidth) * 100vw;
}

当然还需要在我们的样式入口文件 ,引入一下(根据实际使用的,在对应的地方引入即可)

然后还需要再vite.config.js配置一下,这样我们在.vue文件写样式的时候,就可以直接使用,我们定义的样式方法了

css: {preprocessorOptions: {less: {// 方便在vue文件写样式的时候,可以直接使用 .vw .vh 方法additionalData: `@import "@/styles/vw-vh.less";`}}}

如果我们想要在.less使用定义好的方法则需要,在对应的样式文件引入

 

经过上述的配置,就可以使用了,使用的地方

这里还需要去适配一下,echarts 图图表的字体、间距、等,需要另外定义一个方法,原理与scale类似

/*** @param {*} size 实际样式值* @param {*} designWidth 设计稿的宽度* @returns 返回一个缩放后的值*/
export const fitChartSize = (size, designWidth = 1920) => {// 获取设备的设计宽度let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;if (!clientWidth) return size;// 设计宽度 / 设计宽度 就是我们要的 缩放比let scale = (clientWidth / designWidth);return Number((size * scale).toFixed(3));
}

2.3、总结

        如果我们制展示数据,也可以接受一定的留白,可以施一公scale方案,留白可以通过设置背景色与主题色一致,可以减轻留白的影响,如果我们想要图形无论是不是 与设计稿比例一致,都让图形铺满屏幕,那就可以考虑使用vw vh方案,其实还有一种网上还有一种 rem vw vh方案,但是我觉得和scale 方案的效果差不多,就没有加进来,下面是源码地址,master 是scale方案,dev-vwvh 是vwvh 方案

源码地址

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

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

相关文章

LCM接口通讯说明

LCM&#xff08;Liquid Crystal Module&#xff0c;液晶模块&#xff09;接口通讯说明涉及多种接口类型和通讯方式&#xff0c;这些接口和通讯方式的选择取决于具体的应用场景和需求。 最常见的LCD模块接口协议是&#xff1a; 1.并行接口 2.串行接口 3.串行或并行配置到微处…

基于欧氏距离的点云聚类(python)

1、背景介绍 欧式聚类是一种基于欧氏距离度量的聚类算法。它是点云处理中的一个重要步骤&#xff0c;它可以帮助我们从无序的点云数据中提取有意义的信息。一般来说&#xff0c;对点云进行欧式聚类处理&#xff0c;可以帮助后续数据处理&#xff0c;如物体检测与识别、三维重建…

<Rust><iced>基于rust使用iced构建GUI实例:一个CRC16校验码生成工具

前言 本专栏是Rust实例应用。 环境配置 平台:windows 软件:vscode 语言:rust 库:iced、iced_aw 概述 本文是专栏第五篇实例,是一个CRC16校验码转换程序。 本篇内容: 1、CRC16校验码生成 代码介绍 本文的crc16校验码生成工具,主要设计两个方面,一个是crc16 modbus…

【动态规划】力扣.213. 打家劫舍 II

你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋&#xff0c;每间房内都藏有一定的现金。这个地方所有的房屋都 围成一圈 &#xff0c;这意味着第一个房屋和最后一个房屋是紧挨着的。同时&#xff0c;相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一…

基于YOLOv8的高压输电线路异物检测系统

基于YOLOv8的高压输电线路异物检测系统 (价格88) 包含 【“鸟窝”&#xff0c;“风筝”&#xff0c;“气球”&#xff0c;“垃圾”】 4个类 通过PYQT构建UI界面&#xff0c;包含图片检测&#xff0c;视频检测&#xff0c;摄像头实时检测。 &#xff08;该系统可以根据数…

文件解析漏洞--IIS--Vulhub

文件解析漏洞 一、IIS解析漏洞 用windowserver2003安装IIS测试 1.1 IIS6.X 方法一&#xff1a;目录解析 在网站下建立文件夹的名字为.asp/.asa的文件夹&#xff0c;其目录内的任何扩展名的文件都被IIS当作asp文件来解析并执行。 1.txt文件里是asp文件的语法查看当前时间 方…

黑马头条Day11- 实时计算热点文章、KafkaStream

一、今日内容 1. 定时计算与实时计算 2. 今日内容 KafkaStream 什么是流式计算KafkaStream概述KafkaStream入门案例SpringBoot集成KafkaStream 实时计算 用户行为发送消息KafkaStream聚合处理消息更新文章行为数量替换热点文章数据 二、实时流式计算 1. 概念 一般流式计…

【Win10】记一次蓝屏修复

最近电脑蓝屏了好多次&#xff0c;错误代码为&#xff1a;IRQL_NOT_LESS_OR_EQUAL 直接搜这个错误代码不太好找原因&#xff0c;于是按照这篇文章[1]来打开错误日志文件。 需要先在windows的应用商店中下载WinDbg 然后&#xff0c;打开目录 C:\Windows\Minidump &#xff0c;…

“论云原生架构及其应用”写作框架软考高级论文系统架构设计师论文

论文真题 近年来&#xff0c;随着数字化转型不断深入&#xff0c;科技创新与业务发展不断融合&#xff0c;各行各业正在从大工业时代的固化范式进化成面向创新型组织与灵活型业务的崭新模式。在这一背景下&#xff0c;以容器和微服务架构为代表的云原生技术作为云计算服务的新…

CANoe在使用时碰到的一些很少见的Bug

CANoe作为一款成熟且稳定的总线仿真与测试工具&#xff0c;深受汽车工程师们的喜爱。CANoe虽然稳定&#xff0c;但作为一个软件来说&#xff0c;在使用中总会出现一些或大或小的Bug。最近全球范围内的大规模蓝屏事件&#xff0c;是由某个安全软件引起的。而很多CANoe使用者最近…

linux常使用的命令

关机命令 shutdown halt poweroff reboot grep 选项 参数 -l 显示所有包含关键字的文件名 -n 在匹配之前加上行号 -c 只显示匹配的行数 -v 显示不匹配的行 管道符 “|” 左边的输出作为右边的输入 例如&#xff1a;我们找个文件包含abc 但是不含有def的文件 grep …

《如鸢》开通官号,女性向游戏爆款预定

今天&#xff0c;备受瞩目的沉浸式剧情卡牌手游《如鸢》正式开通了官方社媒账号并发布了玩家信。 《如鸢》由灵犀互娱倾力打造&#xff0c;游戏不仅拥有跌宕起伏的权谋剧情&#xff0c;更采用Live2D技术&#xff0c;为玩家带来沉浸式的游戏体验&#xff0c;吸引了众多玩家关注。…

西门子s7第三方(S7netplus)读写操作

和西门子PLC通讯需要使用S7netplus​​这个包&#xff0c;可以在NuGet​​上搜索下载&#xff0c;下载后引入命令空间using S7.Net;​​ 创建PLC对象进行连接使用Write Read进行读写操作即可不需要在发请求帧 //创建Plc对象Plc plc; //西门子设备是s7-1200//参数1 CPu类型//参…

AIGC大模型产品经理高频面试大揭秘‼️

近期有十几个学生在面试大模型产品经理&#xff08;薪资还可以&#xff0c;详情见下图&#xff09;&#xff0c;根据他们面试&#xff08;包括1-4面&#xff09;中出现高频大于3次的问题汇总如下&#xff0c;一共32道题目&#xff08;有答案&#xff09;。 29.讲讲T5和Bart的区…

kubernetes管理GUI工具Lens

从github上可以知道&#xff0c;lens的前端是用electron做的客户端工具&#xff0c;打开安装路径你会发现kubectl.exe,没错&#xff0c;就是你经常用的kubectl命令行的客户端工具。kubectl本来就能输出json的数据类型&#xff0c;集成前端更方便了。看到这里你是不是发现&#…

怎么给电脑选一款合适的固态硬盘?就看这个参数!

前言 前段时间有很多小伙伴找小白修电脑&#xff0c;在修电脑的过程中&#xff0c;小白也会稍微看一下硬件配置。 小白就发现一个事情&#xff1a;很多小伙伴其实都不太懂电脑硬件。 为啥这么说呢&#xff1f;简单来说就是主板上使用了“不合适”的固态硬盘作为主系统硬盘。…

VSCode+Vue3无法找到模块“../components/xxxxx.vue”的声明文件的错误

莫名奇妙的错误 今天用Vue3写个demo&#xff0c;在components下面新建了一个DeviceList.Vue的文件&#xff0c;在HomeView引用它后居然报错&#xff0c;提示&#xff1a;无法找到模块“…/components/DeviceList.vue”的声明文件&#xff0c;真是离了个大谱&#xff0c;文件明…

C# Unity 面向对象补全计划 之 访问修饰符

本文仅作学习笔记与交流&#xff0c;不作任何商业用途&#xff0c;作者能力有限&#xff0c;如有不足还请斧正 本系列旨在通过补全学习之后&#xff0c;给出任意类图都能实现并做到逻辑上严丝合缝

人工智能的现状与未来展望

随着科技的飞速发展&#xff0c;人工智能逐渐成为人们关注的焦点。本文将分析当前人工智能的发展现状&#xff0c;并展望其未来的发展趋势。 一、引言 近年来&#xff0c;人工智能在全球范围内得到了广泛关注。作为一项具有广泛应用前景的技术&#xff0c;人工智能正在改变着…

仕考网:公务员可以报考军队文职吗?

公务员可以报考军队文职考试&#xff0c;但是需要满足前提条件。 对于已经与国家、地方的用人单位建立劳动关系的社会人才&#xff0c;在获得当前用人单位的许可后才可以申请报考。 在面试过程中&#xff0c;考生必须出示一份由其用人单位出具的且加盖公章的同意报考证明。一…