大屏适配方案(vw、vh)

开发大屏主要是两方面的工作:

  • 大屏之关键-前期的自适应适配
  • 根据 ui 稿绘制图表,调细节
方案实现方式优点缺点
vw vh1.按照设计稿的尺寸,将px按比例计算转为vwvh1.可以动态计算图表的宽高,字体等,灵活性较高
2.当屏幕比例跟 ui 稿不一致时,不会出现两边留白情况
1.每个图表都需要单独做字体、间距、位移的适配,比较麻烦

 

 

 

实现思路

按照设计稿的尺寸,将px按比例计算转为vwvh,转换公式如下

假设设计稿尺寸为 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 的指令,在各图表中就只要使用该指令就可以了。

  1. 封装 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
  2. 在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;// 抛出
  3. 在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 的配置项,比如间距、定位、边距也可以用该函数

  1. 编写 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));
    }
  2. 在vue文件中import
    import { fitChartSize } from '@/assets/js/utils.js'
  3. 调用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);
    }

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

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

相关文章

PyQt基础_012_对话框类控件QInputDialog

基本操作 import sys from PyQt5.QtCore import * from PyQt5.QtGui import * from PyQt5.QtWidgets import *class InputdialogDemo(QWidget):def __init__(self, parentNone):super(InputdialogDemo, self).__init__(parent)layout QFormLayout()self.btn1 QPushButton(&qu…

路由器Beacon帧和低功耗设备DTIM之间的关系

1. 路由器发送Beacon帧&#xff1a;路由器周期性地发送Beacon帧&#xff0c;用于广播网络的存在和参数信息。Beacon帧中包含了DTIM周期和DTIM计数器的值。 2. 设备监听Beacon帧&#xff1a;低功耗设备在休眠状态下会定期唤醒来监听路由器发送的Beacon帧。 3. DTIM计数器更新&…

springboot+java校园自助洗衣机预约系统的分析与设计ssm+jsp

洗衣服是每个人都必须做的事情&#xff0c;而洗衣机更成为了人们常见的电器&#xff0c;但是单个洗衣机价格不菲&#xff0c;如果每人都买&#xff0c;就会造成资源的冗余。所有就出现了公用设备&#xff0c;随着时代的发展&#xff0c;很多公用都开始向着无人看守的自助模式经…

如何访问电脑的组策略编辑器?

如何打开组策略 如果我们使用的是 Win 10 系统&#xff0c;如何打开组策略&#xff1f;下面为大家总结了四种打开组策略编辑器的方法。 从搜索框打开 Win 10 策略组怎么打开&#xff1f;一个简单快速的方法就是使用 Windows 自带的搜索栏。我们可以向搜索框中输入“编辑组策…

halcon中灰度图自动二值化

1、首先图片要先形成灰度图&#xff0c;如果下一句是二值化的那就删掉 dev_clear_window() read_image(Image, D:/desktop/tmpp/微信图片_20231201184731.png) * 转为灰度图 rgb1_to_gray(Image, GrayImage) 2、双击图像变量中的GrayImage 3、工具栏点击打开灰度直方图按钮&…

【数电笔记】基本和复合逻辑运算

说明&#xff1a; 笔记配套视频来源&#xff1a;B站 基本逻辑运算 1. 与运算 &#xff08;and gate&#xff09; 2. 或运算 &#xff08;or gate&#xff09; 3. 非运算 &#xff08;not gate &#xff09; 复合逻辑运算 1. 与非运算&#xff08;nand&#xff09; 2. 或非运…

开源镜像站

百度&#xff08;需要权限&#xff09;&#xff1a;https://mirror.baidu.com/阿里&#xff1a;https://developer.aliyun.com/mirror/腾讯&#xff1a;https://mirrors.cloud.tencent.com/华为&#xff1a;https://mirrors.huaweicloud.com/home清华&#xff1a;https://mirro…

【动手学深度学习】(七)丢弃法

文章目录 一、理论知识二、代码实现2.1从零开始实现Dropout 【相关总结】np.random.uniform(low&#xff0c;high&#xff0c;size)astypetorch.rand() 一、理论知识 1.动机 一个好的模型需要对输入数据的扰动鲁棒 使用有噪音的数据等价于Tikhonov正则丢弃法&#xff1a;在层…

vivado实现分析与收敛技巧3-面向非工程用户的智能设计运行建议

要使用智能设计运行功能特性 &#xff0c; 需要 Vivado 工程。这是因为需要进行运行管理。以下指示信息解释了创建综合后工程的最简单方法。这些信息适用于以下流程的用户&#xff1a; • 非工程实现运行 • 使用较低版本的 Vivado 或第三方综合工具进行综合 访问智能设计…

【Paper List】Multi-modal Few-shot Sentiment Analysis

综述 Multimodal Sentiment Analysis: A Survey of Methods, Trends, and Challenges paper link: https://dl.acm.org/doi/abs/10.1145/3586075 2023 Few-shot Multimodal Sentiment Analysis Based on Multimodal Probabilistic Fusion Prompts paper link: https://dl.ac…

分析Pun老师的论文

Combating copycatting from emerging market suppliers in global supply chains 疯狂看潘老师的论文&#xff0c;感觉找论文的方向好难啊&#xff0c;好做的别人都做了&#xff0c;不好做的&#xff0c;你又没想法能做。 这篇文章就是讲保护全球制造商免受新兴市场普遍存在的…

MvLNet

表1 Noisy MNIST–ACC&#xff1a;0.678&#xff0c;F-mea&#xff1a;0.6691&#xff0c;NMI&#xff1a;0.6632&#xff0c;AMI&#xff1a;0.6626 Caltech101-20–ACC&#xff1a;0.3521&#xff0c;F-mea&#xff1a;0.2535&#xff0c;NMI&#xff1a;0.4968&#xff0c;A…

国家开放大学 平时作业 测试题 训练

试卷代号&#xff1a;1340 古代小说戏曲专题 参考试题&#xff08;开卷&#xff09; 一、选择&#xff08;每题1分&#xff0c;共10分&#xff09; 1.下列作品中属于唐传奇的是( )。 A.《公孙九娘》 B.《观音作别》 C《碾玉观音》 …

Javase | 多线程

目录: 1.程序2.进程3.线程4.多线程5.自定义线程类 :5.1 继承Thread类5.2 实现Runnable接口 6.多线程的生命周期及状态转换新建状态 (New)就绪状态 (Runnable)运行状态 (Running)阻塞状态 (Blocked)死亡状态 (Terminated) 7.多线程的调度线程的优先级线程的休眠线程的让步yield(…

你好!插值查找【JAVA】

1.初次相识 插值查找&#xff08;interpolation search&#xff09;是一种根据待查找关键字在有序数组中的大致位置决定查找范围的查找算法。插值查找与二分查找类似&#xff0c;区别在于插值查找对于待查找关键字在数组中的位置进行估计&#xff0c;从而更精准地定位到待查找关…

SpringBoot+mysql+vue实现大学生健康档案管理系统前后端分离

一、项目简介 本项目是一套基于SpringBoot实现大学生健康档案管理系统&#xff0c;主要针对计算机相关专业的正在做bishe的学生和需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目可以直接作为bishe使用。 项目都经过严格调试&#…

Android Studio新版UI介绍

顶部菜单栏 左侧主要菜单入口项目名称分支名称 展开之后&#xff0c;主要功能与原来菜单栏功能一样&#xff0c;最大的变化就是把setting独立出去了。 而项目名称这里&#xff0c;展开就可以看到打开的历史工程列表&#xff0c;可以直接新建工程&#xff0c;原来需要在项目名称…

git的相关实用命令

参看文章&#xff1a;https://blog.csdn.net/qq_21688871/article/details/130158888 http://www.mobiletrain.org/about/BBS/159885.html 1、git commit后&#xff0c;但发现文件有误&#xff0c;不想push(提交到本地库&#xff0c;回退到暂存区&#xff09; git reset --sof…

k8S 发布spring boot的jar包

在Kubernetes&#xff08;K8s&#xff09;上部署Spring Boot应用&#xff08;打包成jar文件&#xff09;的基本步骤如下&#xff1a; 1. 准备Spring Boot应用的Jar包 确保你的Spring Boot应用已经成功构建&#xff0c;生成了可执行的jar包。 2. 创建Docker镜像 为你的Sprin…

leetcode每日一题4

罗马数字转化为十进制整数 罗马数字包含以下七种字符: I&#xff0c; V&#xff0c; X&#xff0c; L&#xff0c;C&#xff0c;D 和 M。 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M …