大屏适配方案(vw、vh)
开发大屏主要是两方面的工作:
大屏之关键-前期的自适应适配
根据 ui 稿绘制图表,调细节
方案 | 实现方式 | 优点 | 缺点 |
vw vh | 1.按照设计稿的尺寸,将px 按比例计算转为vw 和vh | 1.可以动态计算图表的宽高,字体等,灵活性较高 2.当屏幕比例跟 ui 稿不一致时,不会出现两边留白情况 | 1.每个图表都需要单独做字体、间距、位移的适配,比较麻烦 |
实现思路
按照设计稿的尺寸,将px
按比例计算转为vw
和vh
,转换公式如下
假设设计稿尺寸为 1920*1080(做之前一定问清楚 ui 设计稿的尺寸)即:
网页宽度=1920px
网页高度=1080px我们都知道
网页宽度=100vw
网页宽度=100vh所以,在 1920px*1080px 的屏幕分辨率下1920px = 100vw1080px = 100vh这样一来,以一个宽 300px 和 200px 的 div 来说,其所占的宽高,以 vw 和 vh 为单位,计算方式如下:vwDiv = (300px / 1920px ) * 100vw
vhDiv = (200px / 1080px ) * 100vh所以,就在 1920*1080 的屏幕分辨率下,计算出了单个 div 的宽高当屏幕放大或者缩小时,div 还是以 vw 和 vh 作为宽高的,就会自动适应不同分辨率的屏幕
css 方案 - sass
util.scss
// 使用 scss 的 math 函数,https://sass-lang.com/documentation/breaking-changes/slash-div
@use "sass:math";// 默认设计稿的宽度
$designWidth: 1920;
// 默认设计稿的高度
$designHeight: 1080;// px 转为 vw 的函数
@function vw($px) {@return math.div($px, $designWidth) * 100vw;
}// px 转为 vh 的函数
@function vh($px) {@return math.div($px, $designHeight) * 100vh;
}
在 .vue 中使用
<template><div class="box"> </div>
</template><script>
export default{name: "Box",
}
</script><style lang="scss" scoped="scoped">
@import '@/assets/scss/util.scss';
/* 直接使用 vw 和 vh 函数,将像素值传进去,得到的就是具体的 vw vh 单位 */
.box{width: vw(300);height: vh(100);font-size: vh(16);background-color: black;margin-left: vw(10);margin-top: vh(10);border: vh(2) solid red;
}
</style>
屏幕变化后,图表自动调整
这种使用方式有个弊端,就是屏幕尺寸发生变化后,需要手动刷新一下才能完成自适应调整
为了解决这个问题,你需要在各个图表中监听页面尺寸变化,重新调整图表,在 vue 项目中,最好封装个 resize 的指令,在各图表中就只要使用该指令就可以了。
- 封装 directive
// 在directives目录下创建resizeObserver.js文件 // 监听元素大小变化的指令 const map = new WeakMap() const ob = new ResizeObserver((entries) => {for (const entry of entries) {// 获取dom元素的回调const handler = map.get(entry.target)//存在回调函数if (handler) {// 将监听的值给回调函数handler({width: entry.borderBoxSize[0].inlineSize,height: entry.borderBoxSize[0].blockSize})}} })export const Resize = {mounted(el, binding) {//将dom与回调的关系塞入mapmap.set(el, binding.value)//监听el元素的变化ob.observe(el)},unmounted(el) {//取消监听ob.unobserve(el)} }export default Resize
- 在directives目录下创建index.js文件
import Resize from "./resizeObserver"; // 监听dom宽高变化const directivesList = {Resize };const directives = {install: function (app) {Object.keys(directivesList).forEach((key) => {app.directive(key, directivesList[key]); // 注册});} };export default directives;// 抛出
-
在vue中使用
<!-- vue3 --> <template><div class="content"><div class="bar-content" id="bar-content" v-resize="onResize"></div><div class="bar-content" id="pie-content" v-resize="onResize"></div></div></template> <script> const onResize = (width,height)=>{nextTick(()=>{myChart.resize()myPieChart.resize()myPieChart.clear();//消除当前实例pieInit()//重新渲染echart// myPieChart.setOption(options,true);//重新渲染echart})} onMounted(()=>{barInit()pieInit() })</script>
图表字体、间距、位移等尺寸自适应
echarts 的字体大小只支持具体数值(像素),不能用百分比或者 vw 等尺寸,一般字体不会去做自适应,当宽高比跟 ui 稿比例出入太大时,会出现文字跟图表重叠的情况
这里我们就需要封装一个工具函数,来处理图表中文字自适应了👇
-
默认情况下,这里以你的设计稿是 1920*1080 为例,即网页宽度是 1920px (做之前一定问清楚 ui 设计稿的尺寸)
-
把这个函数写在一个单独的工具文件
dataUtil.js
里面,在需要的时候调用 -
其原理是计算出当前屏幕宽度和默认设计宽度的比值,将原始的尺寸乘以该值
-
另外,其它 echarts 的配置项,比如间距、定位、边距也可以用该函数
- 编写 dataUtil.js 工具函数
// Echarts图表字体、间距自适应 export const fitChartSize = (size,defalteWidth = 1920) => {let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;if (!clientWidth) return size;let scale = (clientWidth / defalteWidth);return Number((size*scale).toFixed(3)); }
- 在vue文件中import
import { fitChartSize } from '@/assets/js/utils.js'
- 调用fitChartSize
<template><div class="chartsdom" ref="chart" v-chart-resize></div> </template>// 饼状图 let myPieChart = {} let options = {} const pieInit = ()=>{// 基于准备好的dom,初始化echarts实例myPieChart = echarts.init(document.getElementById('pie-content'));options = {// backgroundColor: 'rgb(43, 51, 59)',toolbox: {show: true,feature: {mark: {show: true},dataView: {show: true,readOnly: false},magicType: {show: true,type: ['pie', 'funnel']},restore: {show: true},saveAsImage: {show: true}}},calculable: true,"tooltip": {"trigger": "item","formatter": "{a}<br/>{b}:{c}千万元"},"title": {"text": "南丁格尔玫瑰图--PieHalfRose","left": "center","top": fitChartSize(20),"textStyle": {"color": "#ccc","fontSize": fitChartSize(18)}},"calculable": true,"legend": {"icon": "circle","x": "center","y": "15%","data": ["义乌市1","义乌市2","义乌市3","义乌市4","义乌市5","义乌市6","义乌市7","义乌市8","义乌市9"],"textStyle": {"color": "#fff","fontSize": fitChartSize(12)}},"series": [{"name": "XX线索","type": "pie","radius": [fitChartSize(30),fitChartSize(70) ],"avoidLabelOverlap": false,"startAngle": 0,"center": ["50%","60%"],"roseType": "area","selectedMode": "single","label": {"normal": {"show": true,"formatter": "{c}千万元","color": '#fff',fontSize: fitChartSize(12)},"emphasis": {"show": true}},"labelLine": {"normal": {"show": true,"smooth": false,"length": fitChartSize(20),"length2": fitChartSize(10)},"emphasis": {"show": true}},"data": [{"value": 600.58,"name": "义乌市1","itemStyle": {"normal": {"color": "#f845f1"}}},{"value": 1100.58,"name": "义乌市2","itemStyle": {"normal": {"color": "#ad46f3"}}},{"value": 1200.58,"name": "义乌市3","itemStyle": {"normal": {"color": "#5045f6"}}},{"value": 1300.58,"name": "义乌市4","itemStyle": {"normal": {"color": "#4777f5"}}},{"value": 1400.58,"name": "义乌市5","itemStyle": {"normal": {"color": "#44aff0"}}},{"value": 1500.58,"name": "义乌市6","itemStyle": {"normal": {"color": "#45dbf7"}}},{"value": 1500.58,"name": "义乌市7","itemStyle": {"normal": {"color": "#f6d54a"}}},{"value": 1600.58,"name": "义乌市8","itemStyle": {"normal": {"color": "#f69846"}}},{"value": 1800,"name": "义乌市9","itemStyle": {"normal": {"color": "#ff4343"}}},{"value": 0,"name": "","itemStyle": {"normal": {"label": {"show": false},"labelLine": {"show": false}}}},{"value": 0,"name": "","itemStyle": {"normal": {"label": {"show": false},"labelLine": {"show": false}}}},{"value": 0,"name": "","itemStyle": {"normal": {"label": {"show": false},"labelLine": {"show": false}}}},{"value": 0,"name": "","itemStyle": {"normal": {"label": {"show": false},"labelLine": {"show": false}}}},{"value": 0,"name": "","itemStyle": {"normal": {"label": {"show": false},"labelLine": {"show": false}}}},{"value": 0,"name": "","itemStyle": {"normal": {"label": {"show": false},"labelLine": {"show": false}}}},{"value": 0,"name": "","itemStyle": {"normal": {"label": {"show": false},"labelLine": {"show": false}}}},{"value": 0,"name": "","itemStyle": {"normal": {"label": {"show": false},"labelLine": {"show": false}}}},{"value": 0,"name": "","itemStyle": {"normal": {"label": {"show": false},"labelLine": {"show": false}}}}]}]}// 绘制图表myPieChart.setOption(options); }
相关文章:
大屏适配方案(vw、vh)
开发大屏主要是两方面的工作: 大屏之关键-前期的自适应适配根据 ui 稿绘制图表,调细节 方案实现方式优点缺点vw vh1.按照设计稿的尺寸,将px按比例计算转为vw和vh1.可以动态计算图表的宽高,字体等,灵活性较高 2.当屏幕…...

【QuickSort】单边快排思路及实现
思路: (1)首先定义一个递归函数:qucikSort(int [ ] arr,int l,int r)。函数的定义:给定一个数组arr,对它在[l,r]这个区间内的元素进行排序,从而使得整个数组在[l,r]这个区间内有序。 ࿰…...

C++:继承
继承: 继承的基本语法: 继承是面向对象三大特性之一: 我们发现,定义这些类,下级别的成员除了拥有上一级的共性,还有自己的特性。 这个时候我们就可以考虑利用继承的技术,减少重复代码。 继承的…...
苍穹外卖--客户催单
需求分析 用户在小程序中点击催单按钮后,需要第一时间通知外卖商家 设计思路:* 通过WebSocket实现管理端页面和服务端保持长连接状态当用户点击催单按钮后,调用WebSocket的相关API实现服务端向客户端推送消息客户端浏览器解析服务端推送的…...

春秋云境:CVE-2022-32991(sql注入)
靶标介绍: 该CMS的welcome.php中存在SQL注入攻击。 获取登录地址 http://eci-2zeb0096que0556y47vq.cloudeci1.ichunqiu.com:80 登录注册 注册成功登录进入注册接口 参数接口一 发现接口参数q http://eci-2zeb0096que0556y47vq.cloudeci1.ichunqiu.com/welcome.p…...

css实现鼠标移入背景图片变灰并浮现文字的效果
首先上效果图 说明一下我的html结构 如上图是一个div包裹的img标签, div的块大小width, height 自己定义, 我说明一下核心样式代码 下面写法是scss, 请自行替换 .web-query-image {position: relative; // 相对定位, 方便浮现文案进行绝对定位border-radius: 8px;box-sizing: …...

ES-深入理解倒排索引
倒排索引 idproductdesc1新版 小米 至尊-纪念版手机1小米 NFC 手机3NFC手机4小米 耳机5华为 耳机6扫地机器人7华为 Mata………………term_indexterm dictionaryposting list------------------------------------小米1……100W华为6,7,9NFC76,90耳机5352红米643,98机器人645,9…...

linux NAT网卡配置static
由于是内网,资料无法拷贝,借助参考资料,整理发出。 镜像安装 基本操作。 查看VM配置 图1,有几个信息。一个是NAT借用了网卡里的VMnet8适配器。 子网IP是从192.168.142.0 子网掩码255.255.255.255,对应下面配置的N…...

信奥编程 1168:大整数加法
解析:在c中需要考虑这么几个问题,第一个是大数据的输入,第二个是大数据的存储,第三是大数据的计算方式,最后是输出。 针对上述几个问题,第一个问题,采用字符串的方式或者数组加循环的方式接收输…...
k8s上Pod全自动调度、定向调度、亲和性调度、污点和容忍调度详解
目录 一.Pod调度简介 二.Deployment/RC全自动调度 1.简介 2.案例演示 (1)Deployment (2)RC 三.nodeSelector/nodeName指定节点调度 1.原理简介 (1)nodeSelector原理 (2)no…...

C# 动态编译代码并执行
写在前面 本文采用动态编译的方式,对目标文件code.txt中的C#代码进行实时编译并调用;当然也可以直接在代码中直接装配或读取已有的代码文本,动态编译可以用于很多需要热更新的场景,实现无需重启程序也能达到更新代码的需求。 代…...

nginx配置反向代理及负载均衡
目录 1.前端发送的请求,是如何请求到后端服务的1.nginx 反向代理的好处:2.nginx 反向代理的配置方式:3. nginx 负载均衡的配置方式 1.前端发送的请求,是如何请求到后端服务的 1.nginx 反向代理的好处: 提高访问速度 因…...

【古月居《ros入门21讲》学习笔记】09_订阅者Subscriber的编程实现
目录 说明: 1. 话题模型 图示 说明 2. 实现过程(C) 创建订阅者代码(C) 配置发布者代码编译规则 编译并运行 编译 运行 3. 实现过程(Python) 创建订阅者代码(Python&…...

Java全栈基础篇--集合
集合 集合:集合是java中提供的一种容器,可以用来存储多个数据。 特点: 长度不固定,还可以存储不同的数据(但是一般都用同一类型) 集合和数组既然都是容器,它们有啥区别呢? 数组的长…...

Facebook公共主页受限、被封?一文教你排雷解决
一、Facebook公共主页是什么? 现在人们的生活已经离不开各种社交媒体,只要有智能手机,或多或少会使用一些社交平台,而Facebook是一个拥有大量用户的社交平台。这对于各种企业而言,也是一个十分优秀的营销平台…...

Day04:每日一题:2661. 找出叠涂元素
2661. 找出叠涂元素 给你一个下标从 0 开始的整数数组 arr 和一个 m x n 的整数 矩阵 mat 。 arr 和 mat 都包含范围 [1,m * n] 内的 所有 整数。从下标 0 开始遍历 arr 中的每个下标 i ,并将包含整数 arr[i] 的 mat 单元格涂色。请你找出 arr 中在 mat…...
SpringBoot 整合Redis
在Spring Boot中,你可以使用以下注解来实现Redis的整合: EnableCaching: 在启动类上添加该注解,开启Spring的缓存支持。 Cacheable: 标记方法的返回值可被缓存。当缓存中存在相同 key 的数据时,直接从缓存中获取数据,否则执行方法…...
tensorflow-gpu1.15 + win11 + RTX 4050环境配置
组了一套,不知道行不行 windows11GPURTX 4050python3.7.12tensorflow-gpu1.15.0cudatoolkit10.0.130cudnn7.6.5Keras2.3.1...

jmeter资料
1.jmeter介绍 Apache JMeter是Apache组织开发的基于Java的压力测试工具。用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域。 它可以用于测试静态和动态资源,例如静态文件、Java 小服务程序、CGI 脚本、Java 对象…...

代码随想录算法训练营第三十六天| 435 无重叠区间 763 划分字母区间 56 合并区间
目录 435 无重叠区间 763 划分字母区间 56 合并区间 435 无重叠区间 将intervals数组按照左端点进行升序排序。 设置变量len标志此时新加入端点后所有区间的位置,将其赋初值为第一对区间的右端点,因为该点是一定可达的。设置变量res来存储需要移除空间…...

JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...

Linux 文件类型,目录与路径,文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件:-(纯文本文件,二进制文件,数据格式文件) 如文本文件、图片、程序文件等。 目录文件:d(directory) 用来存放其他文件或子目录。 设备…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间, 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点,不需要开启数据库闪回。…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用:作为微服务架构的网关,统一入口,处理所有外部请求。 核心能力: 路由转发(基于路径、服务名等)过滤器(鉴权、限流、日志、Header 处理)支持负…...

23-Oracle 23 ai 区块链表(Blockchain Table)
小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...

PL0语法,分析器实现!
简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...